[HN Gopher] The "dark yellow problem" in design system color pal...
___________________________________________________________________
The "dark yellow problem" in design system color palettes
Author : robin_reala
Score : 108 points
Date : 2022-10-18 13:22 UTC (9 hours ago)
(HTM) web link (medium.com)
(TXT) w3m dump (medium.com)
| edflsafoiewq wrote:
| Don't use yellow then. Palettes made of rainbow primary colors
| don't look good anyway.
| TheRealPomax wrote:
| Traffic lights may want a word. ("but that's not yellow!":
| weirdly, we know that, but we call it yellow anyway).
| robin_reala wrote:
| Do we? en-GB has it as amber. See "Traffic light signals" on
| https://www.gov.uk/guidance/the-highway-code/light-
| signals-c...
| mcv wrote:
| In Dutch we call it orange.
| TheRealPomax wrote:
| 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 =)
| mkehrt wrote:
| Note that primary color terms are language-specific and
| their ranges vary by culture. It very well could be
| "oranje" in Dutch!
| mcv wrote:
| True. Amber is not really a colour term that's often used
| in Dutch; most would actually see amber as a kind of
| orange.
| edflsafoiewq wrote:
| The aesthetics of a traffic light...
| mark-r wrote:
| 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.
| cptcobalt wrote:
| Totally agree. WCAG 3 is moving to APCA, and is much better at
| reflecting reality:
| https://typefully.com/u/DanHollick/t/sle13GMW2Brp
| Joker_vD wrote:
| 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?
| karaterobot wrote:
| 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.
| asoneth wrote:
| > 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.
| Beltalowda wrote:
| 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.
| nomel wrote:
| > 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.
| PeterStuer wrote:
| Brown is not yellow though.
| namlem wrote:
| This color is usually called chartreuse
| cptcobalt wrote:
| no, there's typically a much more green hue in chartreuse
| aaroninsf wrote:
| 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...
| bxparks wrote:
| 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.
| di4na wrote:
| 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.
| hn92726819 wrote:
| 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.
| di4na wrote:
| Yes. See my point about the lack of tooling.
|
| This tool could be built but noone want to pay for it.
| di4na wrote:
| That said you can try this https://color.cloudflare.design/
| mncharity wrote:
| 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.
| cptcobalt wrote:
| 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
| justinpombrio wrote:
| 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)
| AshamedCaptain wrote:
| 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)
| anamexis wrote:
| I think in the US, very few people would make that distinction.
| I think amber is probably broadly considered a shade of yellow.
| gl-prod wrote:
| The link was giving 500 error. This one works
| https://uxdesign.cc/the-dark-yellow-problem-in-design-system...
| laputan_machine wrote:
| Why not change the background to black? The issue isn't yellow,
| it's white.
| dsmmcken wrote:
| 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.
| WorldMaker wrote:
| 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.
| TheRealPomax wrote:
| 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.
| alt227 wrote:
| Yep, you've just proven the complexity of this issue.
| augstein wrote:
| 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.
| mkehrt wrote:
| > 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.
| enriquto wrote:
| 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.
| spanktheuser wrote:
| 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.
| sebazzz wrote:
| Similar how you can't make brown light in real life.
| [deleted]
| ChiefOBrien wrote:
| 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!
| Daub wrote:
| 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.
| karmakaze wrote:
| I was surprised that saturation wasn't mentioned at all in the
| article.
___________________________________________________________________
(page generated 2022-10-18 23:03 UTC)