AAA line was added in v74. AA line has been there since v65: https://developers.google.com/web/updates/2018/01/devtools#c...
The Audits panel (powered by Lighthouse, which in turn is powered by aXe for the a11y audits) also has an audit ("Background and foreground colors do not have a sufficient contrast ratio") that checks the contrast ratio of all text nodes on a page. In other words you can automate this check.
Disclosure: I write the DevTools and Lighthouse docs.
8% of all men have some kind of color blindness, and plenty more people have other visual deficiencies. Even though they represent 100s of millions, we designers & developers often skip making sure that our designs work for everyone.
I made Color.review to help with that, believing that with better tooling we can change this behavior and get more people to check their colors.
Would love any feedback you have on the project!
Also, a litten gem, if you want you can send links to a direct color test. Such as the HN link color & background:
Quick suggestion: consider adding user-select: none on the color selection buttons, on mobile it triggers text selection popups.
I would have liked a simple way to automatically adjust the colors. Are the formulas behind the site available somewhere? That would make a nice utility function for Octave as well :)
- L1 is the relative luminance of the lighter of the colors, and
- L2 is the relative luminance of the darker of the colors."
Also, the color & background of the article changes when you use the color-picker to give you more visual feedback of the selected colors.
/Anton - creator
Anyone know of a tool that can also allow you to toggle/change around typefaces this easily in live context?
I also don't understand how #EB8521 or #00BBC9 could outright fail even the Headlines test when they're so clearly legible, which makes me think maybe this WCAG standard is not what I really want to optimize for, thank you very much.
This is the luminosity of that mapped to grayscale. You can see why it might be difficult for colorblind people to read: https://i.imgur.com/Pyxt1NR.png
…to you, in (I assume) good or great viewing conditions. For other folks, and/or in challenging viewing conditions, they'll be significantly more difficult to read than higher-contrast options.
I can agree that WCAG guidelines are a bit harsh sometimes but it makes sure that everyone have a good chance to view the content. Eyes, colors & computers interact in complex ways.
Also, in many countries, by law, you have to follow WCAG, specially for the public sector.
If you are interested how and what values W3 have chosen you can read more here: https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhance...
Don't fully understand what you mean by providing "color around the WCAG".
> Don't fully understand what you mean by providing "color around the WCAG".
I suppose that was a bad attempt at a pun... I've changed the wording slightly to make it more obvious ;-)