-
Notifications
You must be signed in to change notification settings - Fork 97
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
A11y text color contrast fix #833
Conversation
I don't have time to thoroughly review all of this at the moment, but in general your statements are mostly correct and I am very happy to see you tackling this. To meet WCAG 2.1 AA Color Contrast ratio requirements, the general rule of thumb is text that is below 14pt bold or 18pt not bold must have at least a 4.5:1 contrast ratio. Text that is 14pt and bold or larger than 18pt must meet a minimum contrast ratio of 3:1 against the background. The best tool to check this manually is using: Color Contrast Checker - TPGi The only exception I am aware of is text that is part of a logo. All other text must meet these requirements. |
Thanks for going through this, I think this deserves more conversation. I find the darker links much harder to pick out next to the black text color, and the black text color pretty hard on the eyes. This article makes some good points on interpreting the WCAG rules, especially the one about luminance applies here. I could see the changes you made here apply more to the "prefers-contrast" mode, along with text underlines, than being the default. Let's chat on Monday about this during the jam session. |
With regards to discerning links by color alone, please see: https://www.w3.org/WAI/WCAG21/Techniques/general/G182 |
Some thoughts that I'd like to discuss on this topic:
Something I'd like to look into still are the details around color blindness (and other color deficiencies). Human perception is complex, technology advances. I want us to be smart about this and not stick to an (IMHO) oversimplified and outdated set of guidelines (curious to hear an argument for them, too). |
Hi Stephen, Christoph and Jason @jason-me @GBKS @sbddesign I wanted to respond to a couple of the posts, I came across this as it is linked to thread "695" in WCAG which I started some three years ago, and which led to the APCA project. On Contrast
Yes, AA is a minimum, though I've been pretty outspoken as to the ways that AA is not sufficient even for "normal" vision in some cases. In particular, the WCAG 2 contrast math is not useable for "dark mode".
YAY!! The world is drowning in gray text, and that's a trend that needs to change! As I bemoaned in the article "Please Stop Using Gray Text"
Not really, WCAG 2 is the "baseline" (and it is a very low bar for the most part) things like "prefers contrast" is a user preference, that is in addition to, but does not absolve the author from basic accessibility functions, like a readable level of contrast. CVD
I discuss this in some detail here: ["A Discussion of Inline Links (Theory and Practice)"]{Myndex/SAPC-APCA#65)
I've written a lot about this aspect. It splits into two parts: Readability, and distinguishability. these are both separate in terms of our neurological filtering. Readability: for all sighted users requires the correct luminance contrast, that is, lightness/darkness contrast, and irrespective on any color — our brain processes lightness/darkness/brightness separate from color (hue/saturation). The luminance channel is where all the fine details are. Distinguishability: such as for information coding. Luminance is good for fine details, but bad for distinguishable coding of information (i.e. levels or categories) color, as in hue/saturation, are much better for the task—except for the ~5% of the population that has a color insensitive vision issue. So, how does readability and Distinguishability apply with color insensitive vision (CVD)?For readability, those with CVD has normal contrast sensitivity. The exception is with the color red for those with protanopia (~1% of the population), as they lose some luminance perception of the sRGB red primary. But the mainly results in the point of "do not use red text on a black or dark background". I discuss this in the article "What's Red and Black and also Not Read" For distinguishability, those with CVD have difference needs and issues depending on their specific category—but it is important to remember that they are not actually "color blind", but with a deficit in some colors. (the exception there is the extremely rare achromatopsia). I have a free tool that demonstrates the different types, including a simulation of achromatopsia/blue cone monochromacy, and you can process screenshots to show how your site may be perceived by the different types. Thank you for reading |
@Myndex thank you for chiming in, and also for all the work you've done on this topic.
I think we're on the same page. We need a certain minimum. But instead of a We might be at a point here where we have gathered enough information and perspectives to go back to our design tools and finesse the precise solution there. We can mock up 3-5 different treatments based on standards and different design decisions, and then get consensus on which one to go for. |
Tested out the page using APAC guidelines. Since APAC also includes font wieghts in the color contrast ratios, its an interesting angle to look at. I used the tool by Myndex I compared the text sizes from Myndex to get a rough idea of what the text sizes are on the bitcoin design homepage, without looking at the code. It seems the basics are;
With that said to get a nicer higher level of contrast on the text "bitcoin design for everyone", I am not sure a font weight of 200 would be appropriate as it lowers the contrast just from a visual perspective considerably. I would consider the APAC guidelines but use my own visual perspective as well as to what would look best. That would be somewhere in the middle. (A medium weight) |
And just to mention: the weights shown on the tool are with a reference font, such as Barlow or Helvetica. some fonts may differ substantially. Here's a guide to making a weight comparison to a reference font: |
I do agree with @GBKS using pitch black (#000000) is not easy for human eyes on higher pixel displays. |
This PR is stale. I am going to close it. We can take another look at #831 in the new year. |
This PR potentially closes #831. I reworked colors across the site to improve contrast for our a11y push. I just wanted to try this so we could see what it would look like and evaluate the right approach.
#000000
throughout. I don't think the subtle gray is that noticeable to most folks, and it doesn't help the links contrast at all by having the text non-black.#AF6408
. See the test result.#DB7900
. See the test result.#000000
for text color. This allows us to maintain the nice bright#F7931A
background color while having a strong 9.14:1 contrast ratio. See the test result.Notice the perfect score the ARC provides for color contrast.
Before
After