10 ms·

Accessible Palette: stop using HSL for color systems (2021)

323 points by bpierre 3y ago

dmarinus 3y ago
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).
hrydgard 3y ago
oklab might be an even better alternative to LCh: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
- microflash 3y ago
  I've been happily using OkLab on my site and it is way better on my eyes than previous color palette which was using CIELAB.
- refulgentis 3y ago
  It's sort of way outrun it's initial premise: it's lightness channel is inverted compared to every other color space, and it's L has nothing to do with LCH or LAB. It's success brought more intellectual poverty, unfortunately. The initial blog post needs a laundry list of corrections, it goes off the rails when it starts making claims about accuracy based on gradients using CAM16 UCS.
  - AprilArcus 3y ago
    Have the errata been collected anywhere?
    - refulgentis 3y ago
      No, it's a really interesting situation, doesn't directly claim to have lightness like Lab/LCH, or that there's something fundamentally good about having a blue-yellow gradient. But the L thing is crucial for WCAG (c.f. article), and designers, and the blue/yellow stuff is interesting. - it's _not bad_ Its better than HSL in that its lightness is correlated to "true lightness", and it's __much__ simpler to implement than a more complex thing like HCT's CAM16 x L. That's about 500 LOC, versus 15 I'd guess. And substantially faster too, few mat muls in each direction. - Oklab L is not L: The problem for engineers and designers: no relation to LAB L*/XYZ Y, so no correlation to WCAG. The problem on the designers end: it's not a linear ramp in dark to light visually. This usually goes unnoticed in a cross-disciplinary scenario unless you're really going deep into color, designers are used to working under eng. constraints. - Color space accuracy / blue and yellow gradient: It's a warning sign, not a positive sign, if a color space _isn't_ gray in the middle of a blue to yellow gradient. They're opposites on the color wheel and should cancel out to nothing. Better to instead note the requirement that you don't want gray gradients, and to travel "around" the colorspace instead of "through" it, i.e. rotate hue to make the gradient, travelling along the surface of the colorspace, rather than going into the color space, reducing colorfulness.
      - arthur2e5 3y ago
        > Oklab L is not L: The problem for engineers and designers: no relation to LAB L*/XYZ Y That should not be considered a bug by itself. CAM16-UCS lightness J also does not depend only on XYZ Y. > no correlation to WCAG Y does not necessarily have to be the standard used by WCAG (see CAM argument). And a stick that's a little skewed is still very well correlated with an upright stick, statistically speaking. > The problem on the designers end: it's not a linear ramp in dark to light visually. Now that is the actual issue which has nothing to do with which variables L depends on. The L_r (lightness with reference) derived from L is designed to deal with that: https://bottosson.github.io/posts/colorpicker/ https://bottosson.github.io/posts/colorpicker/
        refulgentis 3y ago
        > That should not be considered a bug by itself. CAM16-UCS lightness J also does not depend only on XYZ Y. I avoided the word bug, I believe. Let's say someone else claims it is. I would advise it is not a bug, but the absence of a feature. And that I'd struggle to come up with a good reason to switch away from HSL without that feature. If you're just picking colors, HSL is fine. The process advantage and magic is built-in "oh I know this color passes a11y with this one without guessing" is ___huge___. At least at BigCo, you can't skip a11y. > Y does not necessarily have to be the standard used by WCAG (see CAM argument). Sure, but it is used by WCAG and that's important: see above. Also, there's a reason Y has survived since 1900, and it's not because it's an arbitrary decision. > And a stick that's a little skewed is still very well correlated with an upright stick, statistically speaking. I assume it's a reference to the shape of Oklab's L, but I'm not sure if you meant that, so apologies if this sounds aggressive because it's not what you meant / I'm repeating another comment: Oklab's L is not Lab's L, and it's not close, and when you plot Oklab's L versus any other color spaces its very oddly shaped. This isn't a problem for an engineer or color scientist, but it is a problem for a designer. > Now that is the actual issue which has nothing to do with which variables L depends on. I agree that if we say "well WCAG could use any lightness measure" and decide we'll switch away from HSL to an arbitrary color space because the science on spatial frequency might be rewritten or WCAG may divorce itself from it completely, that we can completely write off a11y as a non-goal.
- kevingadd 3y ago
  While it's not perfect, I've been using oklab and oklch (depending on the circumstances) for color interpolation in some scenarios and the results are really visually pleasing compared to interpolating in RGB or HSL.
- simonair 3y ago
  This playground provides an incredible visualization of 16 color spaces, including LCh and OKLAB: https://color-playground.ardov.me/spaces-3d https://color-playground.ardov.me/spaces-3d
  - brookst 3y ago
    That's amazing and cool and useful. Thank you!
PaulHoule 3y ago
Nice! 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 Grayscale = 0.299R + 0.587G + 0.114B [1] 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. 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. 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 https://en.wikipedia.org/wiki/Anaglyph_3D https://en.wikipedia.org/wiki/Anaglyph_3D 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 and good color. [1] https://www.dynamsoft.com/blog/insights/image-processing/image-processing-101-color-space-conversion/ https://www.dynamsoft.com/blog/insights/image-processing/ima...
- Etherlord87 3y ago
  You're wrong on multiple things here, I don't know if you read the replies, if so write a reply and I'll clarify a few things, cheers!
- dylan604 3y ago
  This brings back thoughts of the NTSC days and broadcast safe limits, and the horrible time of clients that loved loved loved red. Explaining to them how the beautiful red artwork will be anything but beautiful on TV was never fun, especially if they wanted it for broadcast. Even when it wasn't for broadcast, an illegal red could still be seen frames later, and would bleed like it just had its throat slit.
  - LocalH 3y ago
    Red is still a particularly hard color to accurately represent, just not as hard as it used to be. The bleeding and chroma crawl that is most visible in NTSC red, has been replaced with at best half chroma resolution, and depending on how the viewer's decoder works, red edges may be especially harsh-looking. It's definitely better than it used to be, though.
hoseja 3y ago
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.
- planede 3y ago
  A spectrum describes the physical properties of light, color describes the perception. Colorspaces are about quantifying the perception of light as observed by most human beings.
  - PaulHoule 3y ago
    You run into interesting problems of metamerism https://en.wikipedia.org/wiki/Metamerism_(color) https://en.wikipedia.org/wiki/Metamerism_(color) particularly metameric failure. For instance there are those RGB lights like Phillips Hue and Lifx which would render colors in the environment better if the colors were wideband but would work better at rendering strong saturated colors (like a display) if the R, G and B were laser-like monochromats. There was this system for stereo films https://en.wikipedia.org/wiki/Dolby_3D https://en.wikipedia.org/wiki/Dolby_3D that exploited metamerism by using 6 monochromats and very glasses with narrowband filters that route 3 of them to each eye. These were very high performance but were crazy expensive (needed theft protection) and got trashed in the marketplace by Lifton's RealD system based on circular polarization even though RealD doesn't perform quite as well.
    - SirMaster 3y ago
      The band filtering glasses type 3D is used today in a lot of theme park rides, like Avatar Flight of Passage for example. https://variety.com/2012/film/news/transformers-ride-pushes-3d-boundaries-1118054451/ https://variety.com/2012/film/news/transformers-ride-pushes-...
      - PaulHoule 3y ago
        These were withdrawn from the market for Cinema in 2018 according to Dolby https://professional.dolby.com/product/dolby-cinema-imaging-products/dolby-3d-bundles/ https://professional.dolby.com/product/dolby-cinema-imaging-... but there might still be some theme park rides still using it.
vladstudio 3y ago
if you're interested in the topic, a nice article was just published in Smashing Magazine about Oklch: https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/ https://www.smashingmagazine.com/2023/08/oklch-color-spaces-...
- pbhjpbhj 3y ago
  So, having just read this about Oklch, it strikes me that I [as a designer] would want to alter the chroma according to the ability of the display -- which they show the possibility of at the end, using @media: @media (color-gamut: p3){ .some-class { color: oklch(70.9% 0.195 47.025);}} Surely this is the only real option, otherwise you're risking distributing colours across a gamut that the display simply won't render? I'd assume that's going to result in non-linear fades, poor colour distinction, and such like?
jamal-kumar 3y ago
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.
- michaelrpeskin 3y ago
  My wife is a tetrachromat. She sees way more greens than I do. When we’re on a hike, she always gushes over all the “shimmery” greens and different shades of grasses and flowers. All I see is green. We were at an art museum once and there was a painting that was just a bunch of rectangles of different colors. She thought it was the most beautiful thing ever. So I got her a small print of it and she was disappointed. I’m sure the print was a CMYK printing of an RGB picture, so it got down sampled back to three channels. It looked the same to me as the original. God help us when we go pick out paint for a room in the house or try to color match a fabric. She has word visceral reactions to colors that just doesn’t make any sense to me.
  - jamal-kumar 3y ago
    That's really interesting, thanks for that insight! I looked into it and it seems that some people are saying that the only positive way to test is to see if you're a tetrachromat is by DNA testing, while others are saying there's vision tests that can be done - Which did your wife take out of curiosity? [1] It kind of sounds like what you describe could be used as a vision test. [1] https://www.quora.com/How-can-I-really-test-if-I-am-tetrachromatic https://www.quora.com/How-can-I-really-test-if-I-am-tetrachr...
    - michaelrpeskin 3y ago
      She was at the eye doctor and just said something passing about colors and they did an ad hoc test there. She never did anything like a DNA test because it really wouldn't change her life any. It's just an interesting fact that she sees more colors. My theory that I've pieced together: The Y chromosome codes for 1 piece of the information and the X codes for 2. I'm sure it's not linear, but the quantum mechanic in me says that the color receptors are a linear combination of the three basis functions encoded on the DNA. For women their system is over determined, and I bet the green is really a degenerate solution that _usually_ overlaps. But in some cases the green is extra wide or even two district peaks. It also can explain why men are more likely to be color blind, if one of the 1 drops out, they only have two channels remaining. Women tend to have a back up.
refulgentis 3y ago
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! 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.
- seanwilson 3y ago
  Cool! Any thoughts on how HCT compares with https://www.hsluv.org/comparison/ https://www.hsluv.org/comparison/? (Similar with HCT, the difference in "L" here makes picking contrasting colors more straightforward) On the same topic, any thoughts on https://www.myndex.com/APCA/ https://www.myndex.com/APCA/ and approaches if this becomes a standard? The color contrast value between a pair of colors depends on which color is the foreground and which is the background, so just comparing the difference in "T" won't be enough now?
  - refulgentis 3y ago
    re: HSLuv, I don't know much of it but I've heard it mentioned several times, so it must be helpful. This comment[1] goes into more detail, but TL;DR the core to me seems to be having L* and whatever H and S measurement works for you, so I'd say HSLuv is spot on. I love APCA, Myndex (Andrew Somers, APCA author) was an absolute inspiration to me for getting interested in color, I wouldn't have known 1% of what I do or have done 1% of it without his deep dives showing how to work in this space. It has an interesting effect on the community in that the general language around it is read too strongly: it is an important and crucial advance, getting science-backed data on exactly the right contrast in multiple scenarios is _absurdly important_ in a world of Ambient Computing™. The mistake that's made is reading into this too heavily as _the previous spec or WCAG aren't based on data at all_. Yes, the calculation is based on absurd stuff -- 100 nit monitor, you can't track down a source for every bit of it. But there's a _whole separate field_ that spatial frequency comes from and it is _very_ well known and understood. Most importantly: the APCA predictions for contrast were only about 5-7 L* different last time I checked. This is important, thats a _lot_ --- but it also isn't a lot, that's on a scale of 100. What we have today isn't completely utterly alienly different and broken. Comparing the difference in T will be enough as long as the luminance measure APCA relies on is monotonic to RGB (HSL's lightness is hilarious, its the max of RGB minus min of RGB) [1] https://news.ycombinator.com/item?id=37314700 https://news.ycombinator.com/item?id=37314700
zokier 3y ago
In addition to missing oklab/oklch, the article is also wrong in claiming web/css supports only srgb; css color() function supports many colorspaces
- altairprime 3y ago
  Note that CSS Color Module Level 4 is still at the Recommendation Draft stage, and "supports" here is more accurately stated as "supports, except for Microsoft Edge (chromium) and Pale Moon (goanna)": https://test.csswg.org/harness/results/css-color-4_dev/grouped/ https://test.csswg.org/harness/results/css-color-4_dev/group...
  - jcranmer 3y ago
    https://caniuse.com/css-lch-lab https://caniuse.com/css-lch-lab is probably a better resource for support, and it notes that the main layout engines all supported it earlier this year, and gives an estimated global support rate of ~85%.
    - altairprime 3y ago
      sRGB/ProPhoto/DCI-P3 and HSL/HSLuv/Lch/Lab/OKLab are two distinct sets of functionality. The former defines the colorspaces (such as sRGB), the latter defines colors within a given colorspace. To see a visual demo of this, visit https://oklch.com/#70,0.1,165,100 https://oklch.com/#70,0.1,165,100 and enable Show P3 and Show Rec2020; two additional thin white lines will be added showing the colorspace truncation points for the OKLCH color (70% 0.1 165). https://caniuse.com/css-color-function https://caniuse.com/css-color-function tracks support for the colorspaces, complementing the above link for Lch/Lab, and showing essentially the same current data: All desktop and the two top mobile browsers now support it. I'm really glad to see this. Thank you for sharing. That makes me much more optimistic about what will come of this. (Note that all browsers are currently failing LCH and OKLCH tests 9 and 10, and Firefox failing 15% of the CSS Color v4 parsing tests, at https://wpt.fyi/results/css/css-color?label=experimental&label=master&aligned https://wpt.fyi/results/css/css-color?label=experimental&lab... — but this is still a page full of great success for CSS Color v4! So happy.)
bee_rider 3y ago
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!)
- whoopsie 3y ago
  Worked on this. Contrast does change non linearly. You can apply simulations quite easily. The Machado at al simulations are just a matrix transform.
bandergirl 3y ago
> In practice, samples meeting the WCAG 2.1 recommendations are harder to read than those with an “insufficient” contrast ratio. 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?
- whoopsie 3y ago
  It’s a little sad the most widely used algorithms/guidance for contrast accessibility do not have peer reviewed evidence behind them. This goes for 2.1 and the upcoming standard. For something so impactful, I wish the industry help sponsor rigor here.
  - refulgentis 3y ago
    It’s not true, this is a meme that started around 2020 and color suffers the more for it. It’s funny, in a sad way, when you dig into it. The ‘scientific’ version is about 5 lightness points different from WCAG, on a scale of 100. That isn’t a coincidence. put somewhat more directly, it sure is funny these people made up contrast ratio out of thin air without evidence, and the answer that will save us has basically the same #s
  - Myndex 3y ago
    WCAG 2.x was neither peer reviewed nor empirically tested—true. However this is not the case for the candidate for WCAG 3, which is APCA. APCA has been in public beta testing for two and a half years, is the subject of ongoing empirical studies, and does already have journal published peer review, as well as independent peer reviews by PhDs, vision scientists, data scientists, and other technologists. See a partial listing of reviews: https://git.apcacontrast.com/documentation/independent-review https://git.apcacontrast.com/documentation/independent-revie...
- madeofpalk 3y ago
  IIRC there is movment within W3/WCAG to change the formula for judging contrast/ Or maybe it was just being called for and there's been no official pick up yet.
chiefalchemist 3y ago
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? 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. 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."
- PaulHoule 3y ago
  Once you have a color system, however, it can be very easy to work within it an maintain the visual "brand promise".
  - chiefalchemist 3y ago
    I understand and appreciate brand, identity, marketing, and so on. And based on that experience, I can say with confidence: if your brand needs six colors and shades / tones within each to make a "promise" you need to so rethinking and redesigning. No "promise" that complicated is going to stick.
    - karaterobot 3y ago
      You began by saying you aren't a trained designer, and ended by telling most of the industry it is doing it wrong. You've come a long way in a short time, congratulations!
      - chiefalchemist 3y ago
        Yes and no, but mostly no :) As a user of their "doing it right" - and feeling under-satisfied too often - maybe they should be listening more, and imposing their will on the rest of us less? Or do I roll over and play brain dead because I'm told to do so? I happen to believe less is more. And I've seen that work well / better often enough. If mo' mo' mo' is so great, why am I not seeing it and feeling it?
tempodox 3y ago
So, where's the code? I want an algorithm that I can use in any software, not a web form.
- todd3834 3y ago
  This is the library the author references. I’ve used it myself and it works great https://github.com/gka/chroma.js https://github.com/gka/chroma.js
  - SubiculumCode 3y ago
    It would be nice if this was packaged into R...if only I had time. I really dislike a lot of R color palettes.
- creata 3y ago
  In this thread, the author suggests that they'd use Oklab[1] if they were to write the article today. Oklab was introduced in [2], and the code in that article is really easy to use. [1]: https://news.ycombinator.com/item?id=37310534 https://news.ycombinator.com/item?id=37310534 [2]: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/
lelandbatey 3y ago
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! https://stripe.com/blog/accessible-color-systems https://stripe.com/blog/accessible-color-systems
cptcobalt 3y ago
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. Good reading for the color theory behind perceptual contrast: https://www.smashingmagazine.com/2022/09/realities-myths-contrast-color/ https://www.smashingmagazine.com/2022/09/realities-myths-con... And a distilled description of APCA: https://typefully.com/u/DanHollick/t/sle13GMW2Brp https://typefully.com/u/DanHollick/t/sle13GMW2Brp
- zauguin 3y ago
  APCA works great, but it has a very weird and restrictive license. Before you consider it for anything you should probably take a detailed look at that and consider if it's really usable for you.
  - kreskin 3y ago
    The current license kinda sucks but there is some hope that a more permissive license will be in place by the end of the year. https://twitter.com/MyndexResearch/status/1695501472937693332 https://twitter.com/MyndexResearch/status/169550147293769333...
    - Myndex 3y ago
      Hey @zauguin and @kreskin, I am sorry about the licensing issue, it is only temporary during the public beta. And I am providing some exceptions, if you need, send an email to legal@myndex.com Just can't do an MIT type license right now—and really there's no generic one that really suit what we need right now, so we're working on such a license, one that is reasonably permissive yet prevents some of the issues we've run into. I.e. like with bad actors incorrectly modifying, or reverse engineering and doing so wrongly, or taking it to the cantina at Mos Eisley...
deleted 3y ago
[deleted]
sph 3y ago
What about HSLuv? https://www.hsluv.org/ https://www.hsluv.org/
- tshaddox 3y ago
  HSLuv starts with a cylindrical representation of CIELUV which also doesn't "fill the cylinder" in the chroma axis (this might be what the article briefly refers to as "HCL or LCh(uv)"), and then stretches its chroma so that you always get a 0-100% chroma range regardless of hue and lightness. This might be convenient because you can't accidentally represent impossible colors, but you obviously lose perceptual chroma uniformity.
ichik 3y ago
(2021) should be added to the title, many commenters seem to be oblivious to that fact.
Springtime 3y ago
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. [1] https://wolthera.info/2014/07/hsi-and-hsy-for-kritas-advanced-colour-selector/ https://wolthera.info/2014/07/hsi-and-hsy-for-kritas-advance...
eviks 3y ago
As this blog and the app demonstrate, we haven't even progressed past the inscrutable hex codes
jjcm 3y ago
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. 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. 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.
- seanwilson 3y ago
  > 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. Can you go into more detail here? Do you mean you use only APCA and ignore what the WCAG 2 color contrast algorithm flags as insufficient contrast?
  - jjcm 3y ago
    We use a balance of both. All of our body text is WCAG 2 compliant - we wanted to ensure the primary usability of the app is accessible towards the current standard. Where we diverge is when combining saturated colors with desaturated colors for foregrounds/backgrounds, which WCAG has some trouble with. Some good examples of this are here: https://twitter.com/DanHollick/status/1417895151003865090 https://twitter.com/DanHollick/status/1417895151003865090 This was relevant for our Figma's brand color, as prior to our accessibility pass it wasn't compliant when combined with white text for neither WCAG 2 nor APCA. We modified it slightly to be #0D99FF, which was close enough to the original brand color it didn't feel like a rebrand, while still allowing us a passing APCA color contrasts score. Notably though it doesn't pass WCAG 2, but you'll see from this example the contrast is significant: https://image.non.io/15ed7558-5337-40fc-9e5b-2392087cc35b.webp https://image.non.io/15ed7558-5337-40fc-9e5b-2392087cc35b.we... That's not to say though that APCA is a perfect solution. Interestingly, should APCA be adopted as the WCAG standard, Figma and Hackernews both would fail contrast guidelines. Part of APCA is a guideline for what font size/weight combinations are allowed for any color contrast level. Even with #000 and #fff as your colors, fonts under 11.5px are not allowed (Figma uses 11px for much of the UI). For many expert tools, 11px fonts are fairly standard due to the amount of UI you have to have on screen - other examples here where this is common are tools such as Blender or CAD software. Hackernews uses black 12px font for the main body text against a #f6f6ef background, which according to APCA requires a minimum 15px font at normal font weight. This is a perfect example of my earlier point that you have to use a collection of tools at the end of the day to get to a correct solution, rather than using a single tool or algorithm as a dogmatic source of truth. You can create poorly accessible solutions with WCAG and bad user experiences with APCA.
zX41ZdbW 3y ago
The best article I've seen on this topic is https://www.handprint.com/HP/WCL/color1.html https://www.handprint.com/HP/WCL/color1.html Warning: super-long read, you will spend a day. You'll be surprised, but I use some thoughts from this article in ClickHouse to color logs nicely: https://github.com/ClickHouse/ClickHouse/blob/master/base/base/terminalColors.cpp#L11C32-L11C32 https://github.com/ClickHouse/ClickHouse/blob/master/base/ba...
- high_priest 3y ago
  I can't find anything specific on how these ANSI colors could be converted to rgb, other than that they are actually just color requests and are dependent on terminal configuration. Could you share what are your RGB expectations for every message type you have set in your code?
xmonkee 3y ago
Oof, what a great article. Fucking saved.
AtNightWeCode 3y ago
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.
deleted 3y ago
[deleted]
deleted 3y ago
[deleted]
1-6 3y ago
This is only applicable against a white background. Do the same rules apply for a black background or other colors?
darklycan51 3y ago
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.
- kccqzy 3y ago
  > I can see better if […] This is exactly the point of accessibility colors. Making things easier to see. There's a whole discussion on measurement of it in the article. It's just not a solved problem yet.
  - darklycan51 3y ago
    Or... people can start giving the option to pick the color you want for websites? why force colors you like onto others?

323 points by bpierre 3y ago

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).

hrydgard 3y ago

oklab might be an even better alternative to LCh: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/

microflash 3y ago
I've been happily using OkLab on my site and it is way better on my eyes than previous color palette which was using CIELAB.
refulgentis 3y ago
It's sort of way outrun it's initial premise: it's lightness channel is inverted compared to every other color space, and it's L has nothing to do with LCH or LAB. It's success brought more intellectual poverty, unfortunately. The initial blog post needs a laundry list of corrections, it goes off the rails when it starts making claims about accuracy based on gradients using CAM16 UCS.
- AprilArcus 3y ago
  Have the errata been collected anywhere?
  - refulgentis 3y ago
    No, it's a really interesting situation, doesn't directly claim to have lightness like Lab/LCH, or that there's something fundamentally good about having a blue-yellow gradient. But the L thing is crucial for WCAG (c.f. article), and designers, and the blue/yellow stuff is interesting. - it's _not bad_ Its better than HSL in that its lightness is correlated to "true lightness", and it's __much__ simpler to implement than a more complex thing like HCT's CAM16 x L. That's about 500 LOC, versus 15 I'd guess. And substantially faster too, few mat muls in each direction. - Oklab L is not L: The problem for engineers and designers: no relation to LAB L*/XYZ Y, so no correlation to WCAG. The problem on the designers end: it's not a linear ramp in dark to light visually. This usually goes unnoticed in a cross-disciplinary scenario unless you're really going deep into color, designers are used to working under eng. constraints. - Color space accuracy / blue and yellow gradient: It's a warning sign, not a positive sign, if a color space _isn't_ gray in the middle of a blue to yellow gradient. They're opposites on the color wheel and should cancel out to nothing. Better to instead note the requirement that you don't want gray gradients, and to travel "around" the colorspace instead of "through" it, i.e. rotate hue to make the gradient, travelling along the surface of the colorspace, rather than going into the color space, reducing colorfulness.
    - arthur2e5 3y ago
      > Oklab L is not L: The problem for engineers and designers: no relation to LAB L*/XYZ Y That should not be considered a bug by itself. CAM16-UCS lightness J also does not depend only on XYZ Y. > no correlation to WCAG Y does not necessarily have to be the standard used by WCAG (see CAM argument). And a stick that's a little skewed is still very well correlated with an upright stick, statistically speaking. > The problem on the designers end: it's not a linear ramp in dark to light visually. Now that is the actual issue which has nothing to do with which variables L depends on. The L_r (lightness with reference) derived from L is designed to deal with that: https://bottosson.github.io/posts/colorpicker/ https://bottosson.github.io/posts/colorpicker/
      - refulgentis 3y ago
        > That should not be considered a bug by itself. CAM16-UCS lightness J also does not depend only on XYZ Y. I avoided the word bug, I believe. Let's say someone else claims it is. I would advise it is not a bug, but the absence of a feature. And that I'd struggle to come up with a good reason to switch away from HSL without that feature. If you're just picking colors, HSL is fine. The process advantage and magic is built-in "oh I know this color passes a11y with this one without guessing" is ___huge___. At least at BigCo, you can't skip a11y. > Y does not necessarily have to be the standard used by WCAG (see CAM argument). Sure, but it is used by WCAG and that's important: see above. Also, there's a reason Y has survived since 1900, and it's not because it's an arbitrary decision. > And a stick that's a little skewed is still very well correlated with an upright stick, statistically speaking. I assume it's a reference to the shape of Oklab's L, but I'm not sure if you meant that, so apologies if this sounds aggressive because it's not what you meant / I'm repeating another comment: Oklab's L is not Lab's L, and it's not close, and when you plot Oklab's L versus any other color spaces its very oddly shaped. This isn't a problem for an engineer or color scientist, but it is a problem for a designer. > Now that is the actual issue which has nothing to do with which variables L depends on. I agree that if we say "well WCAG could use any lightness measure" and decide we'll switch away from HSL to an arbitrary color space because the science on spatial frequency might be rewritten or WCAG may divorce itself from it completely, that we can completely write off a11y as a non-goal.
kevingadd 3y ago
While it's not perfect, I've been using oklab and oklch (depending on the circumstances) for color interpolation in some scenarios and the results are really visually pleasing compared to interpolating in RGB or HSL.
simonair 3y ago
This playground provides an incredible visualization of 16 color spaces, including LCh and OKLAB: https://color-playground.ardov.me/spaces-3d https://color-playground.ardov.me/spaces-3d
- brookst 3y ago
  That's amazing and cool and useful. Thank you!

PaulHoule 3y ago

Nice! 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 Grayscale = 0.299R + 0.587G + 0.114B [1] 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. 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. 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 https://en.wikipedia.org/wiki/Anaglyph_3D https://en.wikipedia.org/wiki/Anaglyph_3D 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 and good color. [1] https://www.dynamsoft.com/blog/insights/image-processing/image-processing-101-color-space-conversion/ https://www.dynamsoft.com/blog/insights/image-processing/ima...

Etherlord87 3y ago
You're wrong on multiple things here, I don't know if you read the replies, if so write a reply and I'll clarify a few things, cheers!
dylan604 3y ago
This brings back thoughts of the NTSC days and broadcast safe limits, and the horrible time of clients that loved loved loved red. Explaining to them how the beautiful red artwork will be anything but beautiful on TV was never fun, especially if they wanted it for broadcast. Even when it wasn't for broadcast, an illegal red could still be seen frames later, and would bleed like it just had its throat slit.
- LocalH 3y ago
  Red is still a particularly hard color to accurately represent, just not as hard as it used to be. The bleeding and chroma crawl that is most visible in NTSC red, has been replaced with at best half chroma resolution, and depending on how the viewer's decoder works, red edges may be especially harsh-looking. It's definitely better than it used to be, though.

hoseja 3y ago

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.

planede 3y ago
A spectrum describes the physical properties of light, color describes the perception. Colorspaces are about quantifying the perception of light as observed by most human beings.
- PaulHoule 3y ago
  You run into interesting problems of metamerism https://en.wikipedia.org/wiki/Metamerism_(color) https://en.wikipedia.org/wiki/Metamerism_(color) particularly metameric failure. For instance there are those RGB lights like Phillips Hue and Lifx which would render colors in the environment better if the colors were wideband but would work better at rendering strong saturated colors (like a display) if the R, G and B were laser-like monochromats. There was this system for stereo films https://en.wikipedia.org/wiki/Dolby_3D https://en.wikipedia.org/wiki/Dolby_3D that exploited metamerism by using 6 monochromats and very glasses with narrowband filters that route 3 of them to each eye. These were very high performance but were crazy expensive (needed theft protection) and got trashed in the marketplace by Lifton's RealD system based on circular polarization even though RealD doesn't perform quite as well.
  - SirMaster 3y ago
    The band filtering glasses type 3D is used today in a lot of theme park rides, like Avatar Flight of Passage for example. https://variety.com/2012/film/news/transformers-ride-pushes-3d-boundaries-1118054451/ https://variety.com/2012/film/news/transformers-ride-pushes-...
    - PaulHoule 3y ago
      These were withdrawn from the market for Cinema in 2018 according to Dolby https://professional.dolby.com/product/dolby-cinema-imaging-products/dolby-3d-bundles/ https://professional.dolby.com/product/dolby-cinema-imaging-... but there might still be some theme park rides still using it.

vladstudio 3y ago

if you're interested in the topic, a nice article was just published in Smashing Magazine about Oklch: https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/ https://www.smashingmagazine.com/2023/08/oklch-color-spaces-...

pbhjpbhj 3y ago
So, having just read this about Oklch, it strikes me that I [as a designer] would want to alter the chroma according to the ability of the display -- which they show the possibility of at the end, using @media: @media (color-gamut: p3){ .some-class { color: oklch(70.9% 0.195 47.025);}} Surely this is the only real option, otherwise you're risking distributing colours across a gamut that the display simply won't render? I'd assume that's going to result in non-linear fades, poor colour distinction, and such like?

jamal-kumar 3y ago

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.

michaelrpeskin 3y ago
My wife is a tetrachromat. She sees way more greens than I do. When we’re on a hike, she always gushes over all the “shimmery” greens and different shades of grasses and flowers. All I see is green. We were at an art museum once and there was a painting that was just a bunch of rectangles of different colors. She thought it was the most beautiful thing ever. So I got her a small print of it and she was disappointed. I’m sure the print was a CMYK printing of an RGB picture, so it got down sampled back to three channels. It looked the same to me as the original. God help us when we go pick out paint for a room in the house or try to color match a fabric. She has word visceral reactions to colors that just doesn’t make any sense to me.
- jamal-kumar 3y ago
  That's really interesting, thanks for that insight! I looked into it and it seems that some people are saying that the only positive way to test is to see if you're a tetrachromat is by DNA testing, while others are saying there's vision tests that can be done - Which did your wife take out of curiosity? [1] It kind of sounds like what you describe could be used as a vision test. [1] https://www.quora.com/How-can-I-really-test-if-I-am-tetrachromatic https://www.quora.com/How-can-I-really-test-if-I-am-tetrachr...
  - michaelrpeskin 3y ago
    She was at the eye doctor and just said something passing about colors and they did an ad hoc test there. She never did anything like a DNA test because it really wouldn't change her life any. It's just an interesting fact that she sees more colors. My theory that I've pieced together: The Y chromosome codes for 1 piece of the information and the X codes for 2. I'm sure it's not linear, but the quantum mechanic in me says that the color receptors are a linear combination of the three basis functions encoded on the DNA. For women their system is over determined, and I bet the green is really a degenerate solution that _usually_ overlaps. But in some cases the green is extra wide or even two district peaks. It also can explain why men are more likely to be color blind, if one of the 1 drops out, they only have two channels remaining. Women tend to have a back up.

refulgentis 3y ago

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! 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.

seanwilson 3y ago
Cool! Any thoughts on how HCT compares with https://www.hsluv.org/comparison/ https://www.hsluv.org/comparison/? (Similar with HCT, the difference in "L" here makes picking contrasting colors more straightforward) On the same topic, any thoughts on https://www.myndex.com/APCA/ https://www.myndex.com/APCA/ and approaches if this becomes a standard? The color contrast value between a pair of colors depends on which color is the foreground and which is the background, so just comparing the difference in "T" won't be enough now?
- refulgentis 3y ago
  re: HSLuv, I don't know much of it but I've heard it mentioned several times, so it must be helpful. This comment[1] goes into more detail, but TL;DR the core to me seems to be having L* and whatever H and S measurement works for you, so I'd say HSLuv is spot on. I love APCA, Myndex (Andrew Somers, APCA author) was an absolute inspiration to me for getting interested in color, I wouldn't have known 1% of what I do or have done 1% of it without his deep dives showing how to work in this space. It has an interesting effect on the community in that the general language around it is read too strongly: it is an important and crucial advance, getting science-backed data on exactly the right contrast in multiple scenarios is _absurdly important_ in a world of Ambient Computing™. The mistake that's made is reading into this too heavily as _the previous spec or WCAG aren't based on data at all_. Yes, the calculation is based on absurd stuff -- 100 nit monitor, you can't track down a source for every bit of it. But there's a _whole separate field_ that spatial frequency comes from and it is _very_ well known and understood. Most importantly: the APCA predictions for contrast were only about 5-7 L* different last time I checked. This is important, thats a _lot_ --- but it also isn't a lot, that's on a scale of 100. What we have today isn't completely utterly alienly different and broken. Comparing the difference in T will be enough as long as the luminance measure APCA relies on is monotonic to RGB (HSL's lightness is hilarious, its the max of RGB minus min of RGB) [1] https://news.ycombinator.com/item?id=37314700 https://news.ycombinator.com/item?id=37314700

zokier 3y ago

In addition to missing oklab/oklch, the article is also wrong in claiming web/css supports only srgb; css color() function supports many colorspaces

altairprime 3y ago
Note that CSS Color Module Level 4 is still at the Recommendation Draft stage, and "supports" here is more accurately stated as "supports, except for Microsoft Edge (chromium) and Pale Moon (goanna)": https://test.csswg.org/harness/results/css-color-4_dev/grouped/ https://test.csswg.org/harness/results/css-color-4_dev/group...
- jcranmer 3y ago
  https://caniuse.com/css-lch-lab https://caniuse.com/css-lch-lab is probably a better resource for support, and it notes that the main layout engines all supported it earlier this year, and gives an estimated global support rate of ~85%.
  - altairprime 3y ago
    sRGB/ProPhoto/DCI-P3 and HSL/HSLuv/Lch/Lab/OKLab are two distinct sets of functionality. The former defines the colorspaces (such as sRGB), the latter defines colors within a given colorspace. To see a visual demo of this, visit https://oklch.com/#70,0.1,165,100 https://oklch.com/#70,0.1,165,100 and enable Show P3 and Show Rec2020; two additional thin white lines will be added showing the colorspace truncation points for the OKLCH color (70% 0.1 165). https://caniuse.com/css-color-function https://caniuse.com/css-color-function tracks support for the colorspaces, complementing the above link for Lch/Lab, and showing essentially the same current data: All desktop and the two top mobile browsers now support it. I'm really glad to see this. Thank you for sharing. That makes me much more optimistic about what will come of this. (Note that all browsers are currently failing LCH and OKLCH tests 9 and 10, and Firefox failing 15% of the CSS Color v4 parsing tests, at https://wpt.fyi/results/css/css-color?label=experimental&label=master&aligned https://wpt.fyi/results/css/css-color?label=experimental&lab... — but this is still a page full of great success for CSS Color v4! So happy.)

bee_rider 3y ago

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!)

whoopsie 3y ago
Worked on this. Contrast does change non linearly. You can apply simulations quite easily. The Machado at al simulations are just a matrix transform.

bandergirl 3y ago

> In practice, samples meeting the WCAG 2.1 recommendations are harder to read than those with an “insufficient” contrast ratio. 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?

whoopsie 3y ago
It’s a little sad the most widely used algorithms/guidance for contrast accessibility do not have peer reviewed evidence behind them. This goes for 2.1 and the upcoming standard. For something so impactful, I wish the industry help sponsor rigor here.
- refulgentis 3y ago
  It’s not true, this is a meme that started around 2020 and color suffers the more for it. It’s funny, in a sad way, when you dig into it. The ‘scientific’ version is about 5 lightness points different from WCAG, on a scale of 100. That isn’t a coincidence. put somewhat more directly, it sure is funny these people made up contrast ratio out of thin air without evidence, and the answer that will save us has basically the same #s
- Myndex 3y ago
  WCAG 2.x was neither peer reviewed nor empirically tested—true. However this is not the case for the candidate for WCAG 3, which is APCA. APCA has been in public beta testing for two and a half years, is the subject of ongoing empirical studies, and does already have journal published peer review, as well as independent peer reviews by PhDs, vision scientists, data scientists, and other technologists. See a partial listing of reviews: https://git.apcacontrast.com/documentation/independent-review https://git.apcacontrast.com/documentation/independent-revie...
madeofpalk 3y ago
IIRC there is movment within W3/WCAG to change the formula for judging contrast/ Or maybe it was just being called for and there's been no official pick up yet.

chiefalchemist 3y ago

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? 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. 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."

PaulHoule 3y ago
Once you have a color system, however, it can be very easy to work within it an maintain the visual "brand promise".
- chiefalchemist 3y ago
  I understand and appreciate brand, identity, marketing, and so on. And based on that experience, I can say with confidence: if your brand needs six colors and shades / tones within each to make a "promise" you need to so rethinking and redesigning. No "promise" that complicated is going to stick.
  - karaterobot 3y ago
    You began by saying you aren't a trained designer, and ended by telling most of the industry it is doing it wrong. You've come a long way in a short time, congratulations!
    - chiefalchemist 3y ago
      Yes and no, but mostly no :) As a user of their "doing it right" - and feeling under-satisfied too often - maybe they should be listening more, and imposing their will on the rest of us less? Or do I roll over and play brain dead because I'm told to do so? I happen to believe less is more. And I've seen that work well / better often enough. If mo' mo' mo' is so great, why am I not seeing it and feeling it?

tempodox 3y ago

So, where's the code? I want an algorithm that I can use in any software, not a web form.

todd3834 3y ago
This is the library the author references. I’ve used it myself and it works great https://github.com/gka/chroma.js https://github.com/gka/chroma.js
- SubiculumCode 3y ago
  It would be nice if this was packaged into R...if only I had time. I really dislike a lot of R color palettes.
creata 3y ago
In this thread, the author suggests that they'd use Oklab[1] if they were to write the article today. Oklab was introduced in [2], and the code in that article is really easy to use. [1]: https://news.ycombinator.com/item?id=37310534 https://news.ycombinator.com/item?id=37310534 [2]: https://bottosson.github.io/posts/oklab/ https://bottosson.github.io/posts/oklab/

lelandbatey 3y ago

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! https://stripe.com/blog/accessible-color-systems https://stripe.com/blog/accessible-color-systems

cptcobalt 3y ago

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. Good reading for the color theory behind perceptual contrast: https://www.smashingmagazine.com/2022/09/realities-myths-contrast-color/ https://www.smashingmagazine.com/2022/09/realities-myths-con... And a distilled description of APCA: https://typefully.com/u/DanHollick/t/sle13GMW2Brp https://typefully.com/u/DanHollick/t/sle13GMW2Brp

zauguin 3y ago
APCA works great, but it has a very weird and restrictive license. Before you consider it for anything you should probably take a detailed look at that and consider if it's really usable for you.
- kreskin 3y ago
  The current license kinda sucks but there is some hope that a more permissive license will be in place by the end of the year. https://twitter.com/MyndexResearch/status/1695501472937693332 https://twitter.com/MyndexResearch/status/169550147293769333...
  - Myndex 3y ago
    Hey @zauguin and @kreskin, I am sorry about the licensing issue, it is only temporary during the public beta. And I am providing some exceptions, if you need, send an email to legal@myndex.com Just can't do an MIT type license right now—and really there's no generic one that really suit what we need right now, so we're working on such a license, one that is reasonably permissive yet prevents some of the issues we've run into. I.e. like with bad actors incorrectly modifying, or reverse engineering and doing so wrongly, or taking it to the cantina at Mos Eisley...

deleted 3y ago

[deleted]

sph 3y ago

What about HSLuv? https://www.hsluv.org/ https://www.hsluv.org/

tshaddox 3y ago
HSLuv starts with a cylindrical representation of CIELUV which also doesn't "fill the cylinder" in the chroma axis (this might be what the article briefly refers to as "HCL or LCh(uv)"), and then stretches its chroma so that you always get a 0-100% chroma range regardless of hue and lightness. This might be convenient because you can't accidentally represent impossible colors, but you obviously lose perceptual chroma uniformity.

ichik 3y ago

(2021) should be added to the title, many commenters seem to be oblivious to that fact.

Springtime 3y ago

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. [1] https://wolthera.info/2014/07/hsi-and-hsy-for-kritas-advanced-colour-selector/ https://wolthera.info/2014/07/hsi-and-hsy-for-kritas-advance...

eviks 3y ago

As this blog and the app demonstrate, we haven't even progressed past the inscrutable hex codes

jjcm 3y ago

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. 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. 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.

seanwilson 3y ago
> 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. Can you go into more detail here? Do you mean you use only APCA and ignore what the WCAG 2 color contrast algorithm flags as insufficient contrast?
- jjcm 3y ago
  We use a balance of both. All of our body text is WCAG 2 compliant - we wanted to ensure the primary usability of the app is accessible towards the current standard. Where we diverge is when combining saturated colors with desaturated colors for foregrounds/backgrounds, which WCAG has some trouble with. Some good examples of this are here: https://twitter.com/DanHollick/status/1417895151003865090 https://twitter.com/DanHollick/status/1417895151003865090 This was relevant for our Figma's brand color, as prior to our accessibility pass it wasn't compliant when combined with white text for neither WCAG 2 nor APCA. We modified it slightly to be #0D99FF, which was close enough to the original brand color it didn't feel like a rebrand, while still allowing us a passing APCA color contrasts score. Notably though it doesn't pass WCAG 2, but you'll see from this example the contrast is significant: https://image.non.io/15ed7558-5337-40fc-9e5b-2392087cc35b.webp https://image.non.io/15ed7558-5337-40fc-9e5b-2392087cc35b.we... That's not to say though that APCA is a perfect solution. Interestingly, should APCA be adopted as the WCAG standard, Figma and Hackernews both would fail contrast guidelines. Part of APCA is a guideline for what font size/weight combinations are allowed for any color contrast level. Even with #000 and #fff as your colors, fonts under 11.5px are not allowed (Figma uses 11px for much of the UI). For many expert tools, 11px fonts are fairly standard due to the amount of UI you have to have on screen - other examples here where this is common are tools such as Blender or CAD software. Hackernews uses black 12px font for the main body text against a #f6f6ef background, which according to APCA requires a minimum 15px font at normal font weight. This is a perfect example of my earlier point that you have to use a collection of tools at the end of the day to get to a correct solution, rather than using a single tool or algorithm as a dogmatic source of truth. You can create poorly accessible solutions with WCAG and bad user experiences with APCA.

zX41ZdbW 3y ago

The best article I've seen on this topic is https://www.handprint.com/HP/WCL/color1.html https://www.handprint.com/HP/WCL/color1.html Warning: super-long read, you will spend a day. You'll be surprised, but I use some thoughts from this article in ClickHouse to color logs nicely: https://github.com/ClickHouse/ClickHouse/blob/master/base/base/terminalColors.cpp#L11C32-L11C32 https://github.com/ClickHouse/ClickHouse/blob/master/base/ba...

high_priest 3y ago
I can't find anything specific on how these ANSI colors could be converted to rgb, other than that they are actually just color requests and are dependent on terminal configuration. Could you share what are your RGB expectations for every message type you have set in your code?

xmonkee 3y ago

Oof, what a great article. Fucking saved.

AtNightWeCode 3y ago

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.

deleted 3y ago

[deleted]

deleted 3y ago

[deleted]

1-6 3y ago

This is only applicable against a white background. Do the same rules apply for a black background or other colors?

darklycan51 3y ago

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.

kccqzy 3y ago
> I can see better if […] This is exactly the point of accessibility colors. Making things easier to see. There's a whole discussion on measurement of it in the article. It's just not a solved problem yet.
- darklycan51 3y ago
  Or... people can start giving the option to pick the color you want for websites? why force colors you like onto others?