The “dark yellow problem” in design system color palettes | Hacker News Reader

The “dark yellow problem” in design system color palettes

medium.com

128 pointsrobin_reala60 comments

My struggle with this analysis is that it's trying to reason a solution to a completely valid problem, but leaning on an intrinsically flawed metric (the WCAG contrast ratio).

WCAG 3 is moving to APCA (Advanced Perceptual Contrast Algorithm) which will be much more fair to cases covered in this post. Yes, there'll still be perceptual contrast issues with dark yellow, but I'd wager that the solutions you'll land on when measuring with APCA will be less drastic or visually unappealing.

More on APCA: https://typefully.com/u/DanHollick/t/sle13GMW2Brp

Wow, that first example is really bad. Comparing the grey-and-black against the white-on-orange, WCAG 2 and APCA differ by a factor of two, and judging by eye it's entirely due to WCAG contrast being incorrect. How do you design a contrast measure and not notice that it's sometimes off by a factor of 2? We had CIELAB in 1976; it will give you reasonable contrast measurements.

(Calculation: (61 / 47) / (2.9 / 4.5) = 2.014)

Wow finally. My site has white text on a red background for a button. Lighthouse detracts a point for this as it's not "accessible" allegedly. I don't believe this matches reality and I hope this APCA fixes the false metrics. Is there a tool online we can try out APCA with?

here you go: https://huetone.ardov.me

Looks like its saying white on red is ok with the new model, I think. A bit hard to use and can't check text in relation to colour.

Hue is a surprisingly non-linear phenomenon.

The maximum saturation occurs at a different lightness value for each hue. Blue is most saturated when it is dark, and yellow is most saturated when it is light. It is for this reason that some people erroneously describe yellow as being a bright Colour.

To added even further perversity to the mix, there are fewer (perceivable) yellows than there are perceivable greens. Relative perceivable values of hues are readily apparent in the Munsell Colour space, shown here:

https://i.pinimg.com/originals/4b/43/84/4b438408b064533fc862...

Moral of the story? Colour is difficult.

I was surprised that saturation wasn't mentioned at all in the article.

I too am a bit surprised. I could never address a problem of color perception without cycling through the relevant HSL values.

As a designer, colour models like RGB, Lab, CMTK and hex are of instruments of application. All well and good, but if you want a colour model that is suitable for thinking about colors with, then HSL (or HSV) is the only option.

As an exercise, I get my students to define the difference between color pairs using HSL. Even high school students can do it. Try that with RGB!

i'm primarily using hsl now (though have long used rgb before that), but have experimented with oklch because of the promise of an even more uniform perceptual color space. the big problem i found with lch & oklch are discontinuities in the valid ranges of lightness and chroma, which functionally dependent on the hue value (from my perspective that hue is the independent variable to set first).

color spaces definitely defy straightforward intuition about them.

I agree that as a practical space HSL is limited. Indeed, HSL was supported in the first two versions of Photoshop, but was abandoned as being too inconsistent. A conversion to and from HSL resulted in a mess. However Photoshop, like all design apps, features an HSL colour picker.

Thanks for introducing me to OKLAB.

> From my perspective that hue is the independent variable to set first

Agreed.

> Color spaces definitely defy straightforward intuition about them.

You are aware of Kuehnis book "Color space and its divisions."? It is a great read on this fascinating subject.

yah, the other neat thing about lab/lch/oklab/oklch is that they're theoretically unbounded, so as our screens get better at reproducing more of the visible spectrum, you just use more extant values rather than switching color spaces (unlike rgb & hsl).

i haven't read that book, but i'll have to check it out!

> Building on the previous rule, a yellow UI element must always be accompanied by some darker-shaded UI elements such as text and icons to articulate its meaning.

This was known long ago--it's called the Rule of Tinctures in heraldry, which says that yellow and white (sometimes rendered as gold and silver) should only appear on red, green, blue or black, and vice versa.

Edit: I realize this might come off as trivializing the author, which I didn't mean to do. I just think it's interesting that different groups have come up with the same rules over time.

It is also misused in color printers which leave a repeating pattern of small yellow dots encoding model, serial number, and so on, so your newly printed money will provide a nice paper trail back to you.

Also, yes, handling of colors and color combinations is a very old topic, just that this knowledge isn't given to us by birth, but through learning. Which means there will always be someone stumbling over this and make another post delving into (some of) the details. As long as it brings others up to speed, I count this as a net win. One can just hope that the history isn't lost entirely eventually ...

Thank you for introducing me to the Rule of Tinctures. Essentially a FG/BG contrast principle several hundreds of years old! Nice.

You're welcome!

My goto post for this kind of problems is still https://uxplanet.org/designing-systematic-colors-b5d2605b15c which, sadly, afaict, has not had the impact it deserve.

The Stripe tool mentionned at the end does draw some inspiration from this, and i would really like for Stripe to open source this tool. I have asked multiple times, to no answer. If someone from Stripe is reading this, please please please make the world better for everyone out there by releasing this tool.

This is a neat article, but it doesn't seem very actionable for a non-designer (from my programmer, non-designer perspective). He even says:

> Unfortunately, there seems to be no satisfactory color palette generator yet capable of fine-tuning and creating themable ramps

Personally, I want some website where I can chuck a color in or pick from a preset list, and it shows me HTML elements pre-styled with suggested color ramp colors (for example input{background:var(--theme-bg-2);}). Then I can see what I'm getting and inspect element to take what I need.

Yes. See my point about the lack of tooling.

This tool could be built but noone want to pay for it.

That said you can try this https://color.cloudflare.design/

The "dark yellow" here looks greenish/brown only because it is shown against a white background. Against a black background it is a perfectly acceptable yellow.

And this is why UI design standards are 1) so important, and 2) must include exhaustive examples of how UI elements should and should not be used in every context that it's possible for them to occur.

Similar how you can’t make brown light in real life.

I often encounter this problem in command line programs that seem to assume a dark background (e.g. ls, tmux, vim, git log, silver-searcher, grep). Their yellow fonts are impossible to read on my light background. Every time I reinstall Linux or MacOS on one of my laptops, I have to reconfigure the "yellow" palette in the terminal programs to something resembling dark-orange or brown. Then the problem is navigating the rat's nest of options in the various terminal programs to find the color palette configuration.

Isn't the "yellow" used in traffic lights actually .. amber ? It used to be called "car yellow" some time ago around here (e.g. jaune-auto)

I think in the US, very few people would make that distinction. I think amber is probably broadly considered a shade of yellow.

But it's a darker shade of yellow, closer to orange, which is kind of the point...

I guess I'm not sure what the point is.

Yellow is a real issue for sure. My reaction after many years is to just trust feedback from user testing more than the ratio, because users are seeing the UI in context on real screens, and in the end it's their experience that matters to me, not the calculator.

> just trust feedback from user testing

One challenge I have run into is that certain kinds of accessibility accommodations may only be necessary for a tiny fraction of your user base who have a specific type of vision, motor, or auditory deficiency. Unless you specifically recruit and test with those users the issues may not be revealed by usability tests.

> Unless you specifically recruit and test with those users the issues may not be revealed by usability tests.

And, there's just a little hope they're revealed with math. I have someone that requires 100% contrast, which is the requirement if you want to include the tails of the distribution.

And it also depends on the screen and setting; with a good quality large screen in optimal lightning conditions – such as those used in a test setting – contrast matter less than a poor quality small screen in a not-so-great lightning setting.

The WCAG calculations for contrast are complete rubbish, in my experience they don't reflect reality very well at all. I haven't been able to figure out why though, each of the individual steps looks reasonable.

Totally agree. WCAG 3 is moving to APCA, and is much better at reflecting reality: https://typefully.com/u/DanHollick/t/sle13GMW2Brp

It’s more what they’re not doing.

The main issue is that they linearise the sRGB colour space before adding together the components… and then never 'delinearise' it afterwards. Human brightness perception is non-linear and WCAG totally ignores it.

This is a collection of 'even' black-white gradients in different colour spaces.

https://docs.krita.org/en/_images/trc_gray_gradients.svg

LAB is pretty much the standard for a perceptually even colour space.

The sRGB gamma curve was chosen based on CRT mechanics… but it’s pretty close.

The WCAG calculations only make sense in a world where 'Linear TRC' is perceptually even.

That 0.150 purple on white is painful to look at, but the .548 yellow on pale grey is mostly fine... and why darken it all the way to the colour of, ahem, an infant's surprise?

The bright yellow color can be used perfectly if the design style wasn't flat. It's incredible how much more legible UI elements can be if you add some shading, gradients, 3d borders, anything!

Really interesting stuff, well-presented. I was a little surprised and disappointed that color-blindness was not mentioned at all (even if to apologize for leaving it out of a complex posting) since for me, with moderate deuteranopia, the “dark yellow”/brown is indistinguishable in practice from darker shades of green and red, unless the color field is very large or I focus on them very closely, and so hopefully would play into decisions on this sort of design system.

This just is one of many examples which show that designing great User Interfaces is (still) more of an art than science, e.g. rigid math based design systems tend to fail in practice.

The link was giving 500 error. This one works https://uxdesign.cc/the-dark-yellow-problem-in-design-system...

Here’s a related video explaining the challenge of creating a digital brown color. https://m.youtube.com/watch?v=wh4aWZRtTwU

Why not change the background to black? The issue isn't yellow, it's white.

The issue will definitely still be yellow, and now your design system has to deal with "and do everything a second time, but now for dark mode" because dark mode has a completely different set of equally annoying problems.

The relative luminance will still make the yellow "feel" brighter than the others. In the article, the initial stated goal was to have the colours carry a similar relative level of emphasis.

Isn't that the real problem here? Yellow is evolutionarily a "high emphasis" color. The perceptual color contrast between yellow and black is one of the highest ratios in human vision (more generally, in mammalian vision). It's among the reasons that bumblebees, bananas, dandelions, and yellowjackets co-evolved their colors.

If you don't want the weird perceptual emphasis inversions of yellow, maybe don't use yellow?

The article points out the commonly held reason to use it is the "traffic color patterns", but it is easy to forget that early traffic lights intentionally put the highest emphasis/most "alert" color in the middle, because that is the shortest and most dangerous phase and needs the most attention. Plus, as other comments keep pointing out even modern traffic lights in most countries today think yellow is too strong an emphasis color and have shifted towards amber/orange.

Yep, you've just proven the complexity of this issue.

OT, but this seems a place to ask... Has anyone heard of a pedagogically nice color space?

I'm currently kludging - using CAM16UCS within sRGB gamut, but outside, where it gets badly hue nonlinear, I'm "straighten it up a bit" using Jzazbz, slightly fluffing out the visible gamut. And then packaging that as lookup tables.

For pedagogically nice, let's say "looks plausible" and "isn't grossly misleading". So a wide-gamut perceptual space, with large-scale euclidean distances at least eyeball plausible, not-too-dreadful hue linearity, and avoids high-profile space features which are mere model artifact and not perception characteristic. Sort-scale distance is much less important, and computability not at all.

Root-motivation backstory is I'm struggling to find community, around a philosophy of science education content creation, that collaboratively applying vastly greater-than-usual domain expertise is needed to escape current wretchedness. And thought a worked example might help. So web interactives for teaching color, emphasizing spectra and color space, for early primary. Where color is commonly taught, but with content and outcomes notably poor, even by science education standards. I'm still not sure it will gell, but wiggle-3D voxel space with xkcd color names, banana spectra, video cartoon shaders, zooming to physical pixels, et al, has at least been fun. Though low-hanging MVP it so isn't.

This color is usually called chartreuse

no, there's typically a much more green hue in chartreuse

There are two kinds of chartreuse, one green and one yellow, e.g. https://www.chartreuse.fr/en/produit/yellow-chartreuse/

I was familiar only with the green color name from 80s fashion, until I became mildly interested in cocktails...

Don't use yellow then. Palettes made of rainbow primary colors don't look good anyway.

Traffic lights may want a word. ("but that's not yellow!": weirdly, we know that, but we call it yellow anyway).

Do we? en-GB has it as amber. See “Traffic light signals” on https://www.gov.uk/guidance/the-highway-code/light-signals-c...

The aesthetics of a traffic light...

In Dutch we call it orange.

Which is probably closer in terms of most western experiences of the primary/secondary colours, but still pretty wrong--just on the other side of what it really is. The light between red and green is almost universally the tertiary (RYB) or quaternary (RGB) colour amber, sitting between yellow and orange =)

Note that primary color terms are language-specific and their ranges vary by culture. It very well could be "oranje" in Dutch!

True. Amber is not really a colour term that's often used in Dutch; most would actually see amber as a kind of orange.

As Dutchman myseklf: the official colour as "the traffic light is:" are rood, oranje, and groen (i.e red, orange, and green). As actual colours if you have to pick them from a Dutch colour chart with Dutch colour names tough, they'd be rood, oranje-geel, and blauw-groen (red, orange-yellow, and blue-green). No tertiary or quaternaries for us, we love them hyphenated colours.

As a Dutchman myself, who has stolen his fair share of traffic lights (who hasn't): still only what we call it because of the traffic-light-ness, if you had to write down the actual colour used, or had to point at it on a colour wheel, we'd pick "orange-yellow".

Brown is not yellow though.

Reply on news.ycombinator.com