Accessible color profile for data
chrissimpkins opened this issue · comments
Bringing a conversation from Twitter to a thread here so that I can track it.
Very nice. I do find the colors hard to read. I personally prefer the green and red etc used at @caniuse
Was just thinking this. Purple and teal are probably a better separation than red and green, though I don’t know for sure. In the past, I used salmon and teal, as I think the split is a bit clearer, and also more recognizable to folks with normal vision.
Like “mathematically” accessible? In my experience the WCAG tests are only useful as a starting point and guidelines. In reality there are many more factors like display hardware and preexisting notions of meaning. Like for instance purple is not a color I associate with “no” :-)
Is there a better color profile to convey Y/N semantics and address visual accessibility issues?
cc @ireade
Reverted to the default colors in #2. Let's see if we can find an approach to accessible colors that is felt to work better.
Thanks @chrissimpkins ! I'll look into what other colours can be used, if you have any suggestions please feel free to let me know!
Thanks @chrissimpkins ! I'll look into what other colours can be used, if you have any suggestions please feel free to let me know!
Thanks for weighing in here Ire. And thank you very much for the Embed tooling. It is fantastic!
@arrowtype had some thoughts about salmon / teal?
Using the app Color Oracle, you can view and screenshot simulations of how people with certain color deficiencies see. It works best without a secondary monitor, in my experience.
The problem
A central problem is that in normal vision, red/green is a very clear difference, but with green or red color deficiencies, both look kind of "yellow/brown". To make the split clear for green or red deficiencies, red & green generally have to both shift towards blue, and/or be differentiated with lightness and saturation. This has the tradeoff that color meanings start to become less obvious to those with normal vision, and that color palettes can start to "look bad."
Existing solution
Here's the existing "accessible colors" palette:
With deuteranomaly (green deficiency, fairly common), it would look something like this:
Salmon & Teal
Here are colors that are approximately the "salmon/teal" combo I've used in the past:
--salmon: hsl(9, 100%, 63%)
--teal: hsl(138, 100%, 80%)
With deuteranomaly (green deficiency, fairly common), it would look something like this:
Dark magenta & Teal
But, testing now, I'm finding that really, a "magenta/teal" palette performs quite a bit better.
--magenta: hsl(349, 65%, 55%)
--teal: hsl(138, 100%, 80%)
With deuteranomaly (green deficiency, fairly common), it would look something like this:
I'm leaving out screenshots of other conditions because they have a relatively similar effect (protanopia, red deficiency), don't have such a negative effect in this regard (tritanopia, blue deficiency), or are very rare (achromatopsia, overall color deficiency, a reason to also use lightness for color separation).
@arrowtype This is fantastic Stephen. You think that the dark magenta + teal is the best because it preserves semantics for those without color deficiencies and preserves contrast for those who have color deficiencies?
@arrowtype Thank you for the extensive writeup! Could you possibly provide the values for the 4 colours you used for the "Dark magenta & Teal" version?
@ireade This is what I am getting with the image that he posted:
#c74e60
#8392f3
#b1fcbe
#653379
Yup, I posted them as HSL values, but that maybe got buried in the long post.
--magenta: hsl(349, 65%, 55%)
--teal: hsl(138, 100%, 80%)
I think that she may have been looking for the full 4 color profile. The other two may be her current accessible defaults?
Ah, I see. I only modified colors for the "red" and "green" cells, but left the blue cells as-is (the caniuse accessible default is already clearly separated). My screenshot for magenta/teal also includes a darker purple, but I think that may have been a hover state or mistake of some kind.
Thanks @arrowtype yes I thought there may have been modification to the other too as well.
@chrissimpkins I'm gonna update my embed right now!
Thanks @arrowtype yes I thought there may have been modification to the other too as well.
@chrissimpkins I'm gonna update my embed right now!
I will update here as soon as it is available. Tyvm to both of you!!
Thank you Ire!
@arrowtype Any interest in adding the changes here? This was your contribution. If you don't have time for it, I will push the PR this evening.
The new accessible color scheme is live. Thank you very much @arrowtype @ireade @rsms!