7 ms·
The “dark yellow problem” in design system color palettes
- AshamedCaptain 4y agoIsn'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)
- anamexis 4y agoI think in the US, very few people would make that distinction. I think amber is probably broadly considered a shade of yellow.
- AshamedCaptain 4y agoBut it's a darker shade of yellow, closer to orange, which is kind of the point...
- anamexis 4y agoI guess I'm not sure what the point is.
- enriquto 4y agoThe "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.
- deleted 4y ago[deleted]
- spanktheuser 4y agoAnd 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.
- sebazzz 4y agoSimilar how you can’t make brown light in real life.
- karaterobot 4y agoYellow 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.
- asoneth 4y ago> 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.
- nomel 4y ago> 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.
- Beltalowda 4y agoAnd 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.
- namlem 4y agoThis color is usually called chartreuse
- cptcobalt 4y agono, there's typically a much more green hue in chartreuse
- aaroninsf 4y agoThere are two kinds of chartreuse, one green and one yellow, e.g. https://www.chartreuse.fr/en/produit/yellow-chartreuse/ 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...
- laputan_machine 4y agoWhy not change the background to black? The issue isn't yellow, it's white.
- TheRealPomax 4y agoThe 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.
- dsmmcken 4y agoThe 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.
- WorldMaker 4y agoIsn'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.
- alt227 4y agoYep, you've just proven the complexity of this issue.
- Daub 4y agoHue 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/4b438408b064533fc86280810a2d4861.jpg https://i.pinimg.com/originals/4b/43/84/4b438408b064533fc862... Moral of the story? Colour is difficult.
- karmakaze 4y agoI was surprised that saturation wasn't mentioned at all in the article.
- Daub 4y agoI 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!
- clairity 4y agoi'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.
- 4y ago
- augstein 4y agoThis 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.
- edflsafoiewq 4y agoDon't use yellow then. Palettes made of rainbow primary colors don't look good anyway.
- TheRealPomax 4y agoTraffic lights may want a word. ("but that's not yellow!": weirdly, we know that, but we call it yellow anyway).
- mcv 4y agoIn Dutch we call it orange.
- TheRealPomax 4y agoWhich 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 =)
- mkehrt 4y agoNote that primary color terms are language-specific and their ranges vary by culture. It very well could be "oranje" in Dutch!
- mcv 4y agoTrue. Amber is not really a colour term that's often used in Dutch; most would actually see amber as a kind of orange.
- TheRealPomax 4y agoAs 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.
- di4na 4y agoMy goto post for this kind of problems is still https://uxplanet.org/designing-systematic-colors-b5d2605b15c 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.
- hn92726819 4y agoThis 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.
- bxparks 4y agoI 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.
- ChiefOBrien 4y agoThe 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!
- mark-r 4y agoThe 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.
- Joker_vD 4y agoThat 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?
- cptcobalt 4y agoTotally agree. WCAG 3 is moving to APCA, and is much better at reflecting reality: https://typefully.com/u/DanHollick/t/sle13GMW2Brp https://typefully.com/u/DanHollick/t/sle13GMW2Brp
- systoll 4y agoIt’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 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.
- gl-prod 4y agoThe link was giving 500 error. This one works https://uxdesign.cc/the-dark-yellow-problem-in-design-system-color-palettes-a0db1eedc99d https://uxdesign.cc/the-dark-yellow-problem-in-design-system...
- cptcobalt 4y agoMy 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 https://typefully.com/u/DanHollick/t/sle13GMW2Brp
- justinpombrio 4y agoWow, 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)
- lloydatkinson 4y agoWow 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?
- cptcobalt 4y agohere you go: https://huetone.ardov.me https://huetone.ardov.me
- lloydatkinson 4y agoLooks 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.
- PeterStuer 4y agoBrown is not yellow though.
- mncharity 4y agoOT, 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.
- mkehrt 4y ago> 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.
- Daub 4y agoThank you for introducing me to the Rule of Tinctures. Essentially a FG/BG contrast principle several hundreds of years old! Nice.
- mkehrt 4y agoYou're welcome!
- pixelfarmer 4y agoIt 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 ...
- skywhopper 4y agoReally 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.
- makeitrain 4y agoHere’s a related video explaining the challenge of creating a digital brown color. https://m.youtube.com/watch?v=wh4aWZRtTwU https://m.youtube.com/watch?v=wh4aWZRtTwU