Slightly increase contrast for footer text to meet WCAG guidelines

[lee0c]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I want to suggest an idea and checked that ...

• ... to my best knowledge, my idea wouldn't break something for other users
• ... the documentation does not mention anything about my idea
• ... there are no open or closed issues that are related to my idea

Description

The footer text "Made with" (full section reads "Made with Material for MkDocs") which is colored by --md-footer-fg-color--lighter does not meet WCAG contrast guidelines in at least some palettes of this theme. I am using the black palette, but also notice this on the documentation for Material for MkDocs.

I found that changing the value from #ffffff4d to #ffffff73 in browser met contrast guidelines while still allowing for visual difference between the plain text and the link next to it, but I am not a front end dev and am not sure how that translates into the hsla setup used in your stylesheet. Perhaps transparency of 0.4 instead of 0.3?

Use Cases

This would be a small accessibility fix that would benefit any low vision users. It also helps anyone using relevant palettes to meet WCAG guidelines by default, without having to edit colors further.

Screenshots / Mockups

Current coloration in black palette:

Here is my version with computed value #ffffff4d replaced with #ffffff73 which meets contrast guidelines

[squidfunk]

Thanks for suggesting and digging into possible solutions. For the footer colors, we already deviate from the standard color definitions as defined via the --md-default-fg-color-* variables, so I guess changing that to 0.4 shouldn't be a problem.

Fixed in 38e2914.

[squidfunk]

Released as part of 9.0.2.

[lee0c]

Thanks for addressing this so quickly!

[lee0c]

@squidfunk Did you do any accessibility testing with the color change? The value I suggested above was a guess due to not being familiar with how you're setting colors - and from preliminary testing with 9.0.2, it looks like I didn't guess high enough. The contrast is better, but still doesn't meet guidelines.

[squidfunk]

No, I didn't, I trusted your inputs, but I just re-read your original post and now see that you weren't sure.

Reopening, looking into it again.

[lee0c]

Unfortunately I'm not a web dev and am still very much learning this topic. Apologies for not putting more focus on the fact that the value was a guess, I could have bolded or similar and did not.

Thank you for reopening and being willing to take a second look.

[facelessuser]

If you absolutely must have 4.5 for color contrast, you are going to target an alpha around 0.45. Rounding off the contrast gives you 4.5.

>>> bg = Color('#16171d')
>>> fg = Color('hsla(0, 0%, 100%, 0.45)').convert('srgb').compose(bg)
>>> fg.to_string(hex=True)
#7f7f83
>>> bg.to_string(hex=True)
#16171d
>>> fg.contrast(bg)
4.49813259779425

You can play with the results here:

https://facelessuser.github.io/coloraide/playground/?code=bg%20%3D%20Color%28%27%2316171d%27%29%0Afg%20%3D%20Color%28%27hsla%280%2C%200%25%2C%20100%25%2C%200%2e45%29%27%29%2econvert%28%27srgb%27%29%2ecompose%28bg%29%0Afg%2eto_string%28hex%3DTrue%29%0Abg%2eto_string%28hex%3DTrue%29%0Afg%2econtrast%28bg%29

[facelessuser]

Also, keep in mind that the WCAG 2.1 contrast is flawed to some extent. That is why work for WCAG 3 is targeting a different way to calculate contrast. I think they are considering this for 3: https://github.com/Myndex/apca-w3. No decisions are final though. Just an FYI.

[facelessuser]

Also, the above is just calculating color contrast, it does not take into consideration text size and such.

[squidfunk]

Turtles all the way down 😁 Thanks for the pointers @facelessuser, I'll take a look! And no worries @lee0c, I could have read your issue better, so it's essentially my fault.

[squidfunk]

I've checked, and using 0.45 results in #ffffff73. Fixed in 024616f.

[facelessuser]

Yeah, I forgot to print out the non-alpha blended value. You are correct, that does in fact equal #ffffff73

>>> Color('hsla(0, 0%, 100%, 0.45)').convert('srgb').to_string(hex=True)
#ffffff73

Anyways, that should be close enough 🙂.

[lee0c]

Thank you to both of you, especially for the extra info @facelessuser ! You're totally right that the contrast isn't a perfect fix and I am glad to hear that WCAG 3 is looking more at this, but any improvement helps.

[squidfunk]

The latest changes were released as part of 9.0.4.