Nice!<p>I'd point out though that with ordinary display and print systems, saturated reds and blues really are darker than greens. The exact formula depends on your color space but<p><pre><code> Grayscale = 0.299R + 0.587G + 0.114B [1]
</code></pre>
is commonly quoted (I think for sRGB) and in that case the brightest pure red is about 30% bright and the brightest pure blue is 11% which makes "bright red" an oxymoron in most cases.<p>You can certainly use those colors but they are always going to be dark. Simply applying contrast rules will make your color choices accessible but if you want to make something accessible and that look good the techniques in that article will make you a winner.<p>For that matter, saturated screen greens are nowhere near as saturated as is possible but are more saturated than most greens you see in real life: I make red-cyan stereograms<p><a href="https://en.wikipedia.org/wiki/Anaglyph_3D" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/Anaglyph_3D</a><p>and one rule of thumb is that trees and grass look great in stereograms because even though they are green, they actually have a lot of red so the balance between the channels is good so you get good stereo <i>and</i> good color.<p>[1] <a href="https://www.dynamsoft.com/blog/insights/image-processing/image-processing-101-color-space-conversion/" rel="nofollow noreferrer">https://www.dynamsoft.com/blog/insights/image-processing/ima...</a>
> In practice, samples meeting the WCAG 2.1 recommendations are harder to read than those with an “insufficient” contrast ratio.<p>Happy to see I’m not the only one. This has been bugging me for a long time, how an “accessibility guidance” formula actually had the opposite effect. Why was that standardized?
The best article I've seen on this topic is <a href="https://www.handprint.com/HP/WCL/color1.html" rel="nofollow noreferrer">https://www.handprint.com/HP/WCL/color1.html</a><p>Warning: super-long read, you will spend a day.<p>You'll be surprised, but I use some thoughts from this article in ClickHouse to color logs nicely: <a href="https://github.com/ClickHouse/ClickHouse/blob/master/base/base/terminalColors.cpp#L11C32-L11C32">https://github.com/ClickHouse/ClickHouse/blob/master/base/ba...</a>
I had the pleasure of meeting Eugene during Figma's Config conference where he gave a ton of similar pro tips to designers. Really a kind dude who truly has a passion for design and accessibility.<p>One thing I'll give a big shout out to in this article is APCA, which will likely be a successor to WCAG 2's color contrast algorithm. We used it internally here at Figma for our own accessibility revamp for a final result that ended up much better than it would have otherwise. Eugene provides some great examples of when WCAG 2 fails, and we were continually running into those.<p>That really brings me to my main piece of advice here: color is really hard to get right - any tool you have can help you along the way, but that said at some point you also have to trust your eye. At the end of the day, all of these tools are just providing some mathematical approximation for how your eye sees color. Your eye is the final source of truth, not the algorithms. If you're encountering areas where a tool or an algorithm aren't providing you the right result, switch it around or fall back to basics.
Friendly plug for HCT -- it's a color space I built to enable Material You, it weds the lightness measure mentioned here to the latest and greatest color science space --- LAB/LCH is from 1976!<p>It makes design more intuitive, they only need to know that a 40 difference in 'T' ensures that WCAG standards for buttons are met, and a difference of 50 meets the standards for text.
In addition to missing oklab/oklch, the article is also wrong in claiming web/css supports only srgb; css color() function supports many colorspaces
oklab might be an even better alternative to LCh:<p><a href="https://bottosson.github.io/posts/oklab/" rel="nofollow noreferrer">https://bottosson.github.io/posts/oklab/</a>
If the CIELAB numbers are based on perceptual changes, how do they interact with accessibility? Do we need to worry that these perceptual formulae might be based on standard vision? Could they be different for different types of color blindness, or is that not a thing. (FWIW, I try to make my charts as accessible as possible, but I’m totally uneducated in color stuff, so I’m limited to just following advice, can’t derive anything—there’s every possibility that this is a dumb question!)
This article puts the description of it at the bottom, but APCA Contrast—which is the readable contrast test in the WCAG 3 Draft Standard—is much more fair to some colors than WCAG 2.1's Contrast Ratio was.<p>Good reading for the color theory behind perceptual contrast: <a href="https://www.smashingmagazine.com/2022/09/realities-myths-contrast-color/" rel="nofollow noreferrer">https://www.smashingmagazine.com/2022/09/realities-myths-con...</a><p>And a distilled description of APCA: <a href="https://typefully.com/u/DanHollick/t/sle13GMW2Brp" rel="nofollow noreferrer">https://typefully.com/u/DanHollick/t/sle13GMW2Brp</a>
Came across an article when looking into this issue, about HSY[1] from a Krita (image editor) dev, which is apparently part of Krita's advanced color selector and addresses the same issue by mapping perceived luminosity of colors.<p>[1] <a href="https://wolthera.info/2014/07/hsi-and-hsy-for-kritas-advanced-colour-selector/" rel="nofollow noreferrer">https://wolthera.info/2014/07/hsi-and-hsy-for-kritas-advance...</a>
if you're interested in the topic, a nice article was just published in Smashing Magazine about Oklch:<p><a href="https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/" rel="nofollow noreferrer">https://www.smashingmagazine.com/2023/08/oklch-color-spaces-...</a>
Does anyone know off hand how we test whether or not tetrachromats are able to truly see more colours than your average person? Not just like the x-rite or whatever but maybe something that's more advanced than that which goes in the kind of direction that these more advanced colour space profiles seem to cover? I pass that test really easily but I really doubt I have more cones in my eyes or any of that.
I'm so excited to see more work in the perceptually uniform color-choice space. I first saw this discussed by Stripe in 2019, but the work with "accessible pallets" is a revolution!<p><a href="https://stripe.com/blog/accessible-color-systems" rel="nofollow noreferrer">https://stripe.com/blog/accessible-color-systems</a>
I created a game editor some years ago that had several HSL alternatives including one contrast corrected bar and two different light/shadow corrected bars. I used it mostly the other way around though. Creating suggestive backgrounds with many colors but with low contrast between them.
I'm not a trained designer, and for that reason I would never attempt to design a color system with six different colors, and then shades / tones within each. Is that not overkill and unnecessary?<p>Mind you, I appreciate the suggestion to avoid Tool X (i.e., in this case HSL) but I can't help but believe they did themselves a disservice by choosing a six-color color system to begin with. In my eyes, mind and heart accessiblity and simplicity go hand in hand.<p>Fact: There's not a user in the world who wakes up and thinks "My day will be made if and only if I visit a site with an overly complicated color system."
I love websites getting uglier and uglier due to forced "accesibility" colors, how about you give me a color palette? I want my color palettes to be like a 90s RPG, fully radioactive colors, I can see better if colors are brighter, I don't want dull/boring colors, I literally turn off darcula and switch to high contrast/terminal colors with bright green on my IDE for a reason.
I use HSL to set the color of my keyboard leds during the day. For that purpose it's really great because it gives nice bright colors contrary to cielab which give many dull colors (like visible in the blog post).
A truly correct color system would precisely describe the spectrum of whatever color you're communicating, interpreting the mangling eyeballs do to it left as an exercise to the reader.