Make figures and presentations that are friendly to Colorblind people (2002)(jfly.uni-koeln.de)
jfly.uni-koeln.de
Make figures and presentations that are friendly to Colorblind people (2002)
https://jfly.uni-koeln.de/color/
35 comments
As someone who is mildly colorblind, but not nearly as color deficient as others—Please please please use actual colorblind testers.
I have seen testers with full color vision test color contrast ratios based on edges only (pixels) of text affected by font anti-aliasing. This is pointless and serves to dilute the premise.
I have seen testers with full color vision test color contrast ratios based on edges only (pixels) of text affected by font anti-aliasing. This is pointless and serves to dilute the premise.
Also test your new UI on older people. The older you get the harder it gets to distinguish between things with low contrast. Apple is really bad at this with the newer MacOS design, but obviously not the only once. It is like old people don’t use computers, and yes, it will happen to you to.
It's not just contrast. It's also font size. It's also the font itself.
All websites should be readable in Firefox or Safari (or Chrome but I don't use that) with the minimum font size set larger than the default. I use 18 min and a lot of stuff breaks. I'm sure that other people would greatly benefit from even larger fonts.
I don't care about "pretty". I'm resigned to not getting that. But a lot of text simply disappears when the minimum font size is bumped up.
At least Firefox manages to render most sites at a decent size when I set 18 min. Safari, for some reason, still struggles with that.
Also, I generally read everything using Lucida Grande. It's a nice legible font. Firefox allows me to force that font. Safari doesn't. Just how fucking hard would it be for Apple to let me choose my own font in Safari?
All websites should be readable in Firefox or Safari (or Chrome but I don't use that) with the minimum font size set larger than the default. I use 18 min and a lot of stuff breaks. I'm sure that other people would greatly benefit from even larger fonts.
I don't care about "pretty". I'm resigned to not getting that. But a lot of text simply disappears when the minimum font size is bumped up.
At least Firefox manages to render most sites at a decent size when I set 18 min. Safari, for some reason, still struggles with that.
Also, I generally read everything using Lucida Grande. It's a nice legible font. Firefox allows me to force that font. Safari doesn't. Just how fucking hard would it be for Apple to let me choose my own font in Safari?
> Just how fucking hard would it be for Apple to let me choose my own font in Safari?
Technically not "let me choose my own font in Safari" but you can set a user style sheet which overrides fonts.
https://kgrz.io/safari-custom-user-agent-css-overrides-using...
Technically not "let me choose my own font in Safari" but you can set a user style sheet which overrides fonts.
https://kgrz.io/safari-custom-user-agent-css-overrides-using...
Tangential: it would be nice if `@font-face sans-serif { … }` (likewise for other generic families) was a thing in user-injected stylesheets. Especially when you don’t have such options in UI.
> Apple is really bad at this with the newer MacOS design,
They do, however, provide several options for dealing with this in their Accessibility settings - "Increase contrast", "Differentiate without colour", "Reduce transparency", etc.
They do, however, provide several options for dealing with this in their Accessibility settings - "Increase contrast", "Differentiate without colour", "Reduce transparency", etc.
Testing for color blindness and contrast is an area of accessibility where the tools are actually very good. Even the built-in tools in every browser will tell you about contrast levels. There are enough variations of color blindness and visual acuity problems that relying on manual testing probably won't catch much.
Question for color blind users: Does testing with the various color emulation tools (such as those provided by inspector tools) properly emulate the real thing?
It always seems like people (including me) trust them at face value but I've never heard either way if they're actually helpful in creating color-blindness aware UIs.
Of course it would always be preferable to test with real users with real disabilities, but as an indie hacker there is rarely the opportunity.
It always seems like people (including me) trust them at face value but I've never heard either way if they're actually helpful in creating color-blindness aware UIs.
Of course it would always be preferable to test with real users with real disabilities, but as an indie hacker there is rarely the opportunity.
The simulation technique [1] currently used by the Firefox / Chrome dev tools is reasonable, so it's definitely much better than not checking for color vision deficiency accessibility at all. Ideally, color should only be used for progressive enhancement; if your UI can be used in grayscale, it's probably fine.
However, the method originally used by both browsers, which is also used by some other tools, had no scientific provenance and produced clearly incorrect results, so one needs to be careful about this sort of thing in general.
[1] https://doi.org/10.1109/TVCG.2009.113
However, the method originally used by both browsers, which is also used by some other tools, had no scientific provenance and produced clearly incorrect results, so one needs to be careful about this sort of thing in general.
[1] https://doi.org/10.1109/TVCG.2009.113
colorblind person. making sure things look ok in greyscale is excellent advice. for me perceptual difference in intensity are most of what my visual system pays attention to...color only if I try.
most of the the colored interface are hugely garish, and the massive intensity differences actually make it really hard to read.
and conversely if two indicator colors are the same brightness and you need me to distinguish between them, we're going to struggle.
most of the the colored interface are hugely garish, and the massive intensity differences actually make it really hard to read.
and conversely if two indicator colors are the same brightness and you need me to distinguish between them, we're going to struggle.
One thing I worry about here that I should probably do more research on: is colorblindness like turning off or lessening a color channel? Because I know for some graphical work I've done, if I do a pure grayscale by just turning down the saturation or something, the contrast might be good, but if I turn off one color channel, the contrast/intensity differences sometimes seem to vanish.
I do grayscale testing, but I worry that when I do grayscale tests for stuff like game graphics where there aren't clear contour lines, that I'm getting a false sense of confidence -- I worry that the test might not be an accurate representation of the level of contrast a colorblind person will actually see if they sit down in front of the non-grayscale version. Is that something I should be worried about, or am I just misunderstanding how colorblindness works?
If I do a grayscale test and the interface still seems clear/usable, how confident should I actually be that you'll be able to use the non-grayscale interface?
I do grayscale testing, but I worry that when I do grayscale tests for stuff like game graphics where there aren't clear contour lines, that I'm getting a false sense of confidence -- I worry that the test might not be an accurate representation of the level of contrast a colorblind person will actually see if they sit down in front of the non-grayscale version. Is that something I should be worried about, or am I just misunderstanding how colorblindness works?
If I do a grayscale test and the interface still seems clear/usable, how confident should I actually be that you'll be able to use the non-grayscale interface?
part of the issue here is while the physical mechanism of colorblindness is quite clear, the perceptual implications are inherently subjective.
so I don't know how much my advice is relevant to colorblind people in general.
but greyscale is very good start. after that - if you want to show contrast at least for me there are whole areas of the palette that you don't want to take more than one color from. for example the whole red/green/brown/tan/orange space for me is a giant wash. purple looks nice, but don't set it against blue unless its substantially different in saturation.
a secondary issue is that some color combinations I find confusing/distracting. that is my brain can't really settle on the color(s). so for example casual games sometimes just don't work, because its going to take me a second or two to even decide if I can combine these two dots...and I may not even be able to focus on anything else because there is the loud flashing thing on the screen (flashing because I'm 'trying on' colors to see if they fit)
if there is too much color going on I'll probably just reject the whole activity if I can.
sadly I've seen games with a 'colorblind mode' which shows that someone really cared - but it was no more usable than the default more or even worse.
but low saturation UIs with good color choices do look better than mono. I have some form of blue/yellow, but certain choices of blue and yellow are really quite readable and even look pleasant (shrug).
but I wouldn't flail too much. as other people have mentioned its not really that life-changing. if I have to use your garish interface to book an appointment it doesn't really matter...but if you're going to go in and colorize my emacs with nice round hex values I wish you would have the courage to post your address so I can come visit you and have a talk.
that was all over the place. hope it helped.
so I don't know how much my advice is relevant to colorblind people in general.
but greyscale is very good start. after that - if you want to show contrast at least for me there are whole areas of the palette that you don't want to take more than one color from. for example the whole red/green/brown/tan/orange space for me is a giant wash. purple looks nice, but don't set it against blue unless its substantially different in saturation.
a secondary issue is that some color combinations I find confusing/distracting. that is my brain can't really settle on the color(s). so for example casual games sometimes just don't work, because its going to take me a second or two to even decide if I can combine these two dots...and I may not even be able to focus on anything else because there is the loud flashing thing on the screen (flashing because I'm 'trying on' colors to see if they fit)
if there is too much color going on I'll probably just reject the whole activity if I can.
sadly I've seen games with a 'colorblind mode' which shows that someone really cared - but it was no more usable than the default more or even worse.
but low saturation UIs with good color choices do look better than mono. I have some form of blue/yellow, but certain choices of blue and yellow are really quite readable and even look pleasant (shrug).
but I wouldn't flail too much. as other people have mentioned its not really that life-changing. if I have to use your garish interface to book an appointment it doesn't really matter...but if you're going to go in and colorize my emacs with nice round hex values I wish you would have the courage to post your address so I can come visit you and have a talk.
that was all over the place. hope it helped.
That is super helpful. I've done a little bit of research on this, but apparently not nearly enough because I haven't really thought that much before about the distraction angle at all; I assumed if I got the contrast right for everyone, that there just wouldn't be any other problems with color.
I guess this is a good argument for not just testing in grayscale, but at least thinking about actually shipping the grayscale mode or individual color channel adjusters. Because I know in a worst case scenario that a grayscale test will be accurate to what people see if I provide a toggle that turns it on in the final product.
Just... yeah, to your point, need to make sure that whatever colorblind mode is shipped is actually an improvement :)
I guess this is a good argument for not just testing in grayscale, but at least thinking about actually shipping the grayscale mode or individual color channel adjusters. Because I know in a worst case scenario that a grayscale test will be accurate to what people see if I provide a toggle that turns it on in the final product.
Just... yeah, to your point, need to make sure that whatever colorblind mode is shipped is actually an improvement :)
What was the original method may I ask? Some… basic RGB mixing?
It applied a linear transform to RGB values, like the current method, but the original matrices were the "colorjack.com matrices" [1] that have been floating around the internet for a while. They weren't derived scientifically and are quite inaccurate, at least for protanopia.
[1] https://github.com/MaPePeR/jsColorblindSimulator#the-colorma...
[1] https://github.com/MaPePeR/jsColorblindSimulator#the-colorma...
Hard to say, I can the difference between the 'real' image and the 'colour blind' image, so the image doesn't 'work' for me. But I'm not certain how you see things, so I'm never really sure.
In the case of colorblindness, the incidence rate is about 1 in 10 men (x chromosome gene so it affects far more men than women), so it’s reasonably likely you could find a tester among your peers if you ask around.
Colorblind person here:
Can you link them? I usually do firmware/ CLI stuff, so I've never tried them
Can you link them? I usually do firmware/ CLI stuff, so I've never tried them
It's really great how the world changes to accomodate those of us who are less fortunate in some physical capacity - for example wheelchair access to buildings and transportation where everyone wins.
In other cases the drive for equality means everyone has to be equaly harmed, like when institutions of higher education remove online courses from public access due to lack of captions [0]
I hope we are mature enough to accept someone who experiences reality in a different way [1] is not necessarily dimished by that and that being supportive of them in their uniqueness is the sign of a healthy society but also that being supportive isn't the same as bending over backwards.
[0] https://www.insidehighered.com/news/2017/03/06/u-california-...
[1]Blind people have their other senses heightened. How is that not amazing?!
In other cases the drive for equality means everyone has to be equaly harmed, like when institutions of higher education remove online courses from public access due to lack of captions [0]
I hope we are mature enough to accept someone who experiences reality in a different way [1] is not necessarily dimished by that and that being supportive of them in their uniqueness is the sign of a healthy society but also that being supportive isn't the same as bending over backwards.
[0] https://www.insidehighered.com/news/2017/03/06/u-california-...
[1]Blind people have their other senses heightened. How is that not amazing?!
> wheelchair access to buildings and transportation where everyone wins.
I don't win from this any more than I win if state colleges make their courses accessible. I walk, see, and hear fine. If the standard for accommodation is that everybody wins, then we need to end it until something happens to me personally.
I don't win from this any more than I win if state colleges make their courses accessible. I walk, see, and hear fine. If the standard for accommodation is that everybody wins, then we need to end it until something happens to me personally.
We have technical specialists at my company who developed a great visualization interface for our product. Everyone who has seen it is really impressed. They ask why we can't have nice visualization tools like this built-in. The main engineering team won't adopt the solution because the graphs are red/green instead of gradients of blue. The technical specialists believe we shouldn't make the blue gradient the default, and instead believe that because color blind people are a minority, a mode that works for them should be a later add-on. I understand where they are coming from, but personally, I think it would be great to have the out-of-the-box UI be useful for colorblind people. The weird thing is, the two teams have had this difference for several months now, and haven't done anything about it. Unfortunately, it just seems like the most talented developers are just apathetic towards this. Almost like the brain space our design team devotes to ADA compatibility is in th specialists mind devoted to actually making something useful. It's an odd dynamic.
One tool I've found really helpful in this regard is Color Oracle (https://colororacle.org/). It lets you see what your presentation (or software) looks like to someone who is colorblind. I've used that to tune our software to be useable by colorblind individuals.
Another neat trick is that Android (under developer settings) have alternative colour space emulation settings. Combined with a smartphone camera, you can view anything you find in the real world with a colour deficiency.
Just turn on the emulation and point the camera at anything. Look through the live screen.
Just turn on the emulation and point the camera at anything. Look through the live screen.
Oh, that's really clever. I knew about Android's color modes, but I never thought to combine it with the camera before.
Tangential: if you or someone you know is red-green color blind, just this week, we bought my dad a pair of EnChroma colorblind glasses and, at 69, he welled up as he saw, for the first time, shades of green around him and saw red cars going down the road. Truly the greatest gift we could have gotten for him.
As a person with more severe color blindness/deficiency than most, I guess I'll ask the question: is it actually a big deal?
I ask because for me, I really don't think about being colorblind, and colorblindness becomes an issue maybe a few times a year? But I'm also sensitive to the fact that I may be a bad example too (maybe I don't run into presentations where it is apparent? Or I just think the person made bad color choices and didn't realize it's my colorblindness?)
I ask because for me, I really don't think about being colorblind, and colorblindness becomes an issue maybe a few times a year? But I'm also sensitive to the fact that I may be a bad example too (maybe I don't run into presentations where it is apparent? Or I just think the person made bad color choices and didn't realize it's my colorblindness?)
I’m mildly colourblind: I find it difficult to distinguish red/green, but can still do it under the right conditions. On the whole, I agree that colourblindness doesn’t really affect my life, in that for the most part it doesn’t cause me any significant difficulties. But I have a feeling that this is only because I’ve gotten used to it, and that it does affect me — just in ways that I don’t notice. Most relevantly for this discussion, I recall seeing a 3D chart which I was having trouble reading, until I noticed a link to a colourblind version replacing red/green with red/blue (or something like that), at which point it became almost trivial to understand. I had gotten so used to seeing non-colourblind-adapted charts I didn’t even realise they were impeding my comprehension.
(The other major time I recall it affecting me was in first-year geology class — the instructor would say things like ‘this rock has huge red garnets which are easy to see’, and indeed everyone could see them except for me. Thankfully, colour mostly plays a very minor role in mineral identification.)
(The other major time I recall it affecting me was in first-year geology class — the instructor would say things like ‘this rock has huge red garnets which are easy to see’, and indeed everyone could see them except for me. Thankfully, colour mostly plays a very minor role in mineral identification.)
> , I agree that colourblindness doesn’t really affect my life, in that for the most part it doesn’t cause me any significant difficulties. But I have a feeling that this is only because I’ve gotten used to it, and that it does affect me — just in ways that I don’t notice.
Thats pretty much how I feel about it. It doesnt seem to affect me at all, but maybe its because i dont think about it and i am used to it.
Thats pretty much how I feel about it. It doesnt seem to affect me at all, but maybe its because i dont think about it and i am used to it.
While I fail most colour blindness tests, I rarely notice it in my like. My wife notes that I mistake dark green and brown, and also some shades of grey as brown. I also find that pink and light grey 'stobe' for me.
But aside from failing colour blindness tests, I've never found it impacts my life. I can see traffic signals and can identify most colours, so my kids don't believe I really am colour blind.
But aside from failing colour blindness tests, I've never found it impacts my life. I can see traffic signals and can identify most colours, so my kids don't believe I really am colour blind.
Heh, I have seem that strobing effect, but only in very specific shades of blue.
For those interested, I've done some recent research on this topic [1], which tries to find cycles of colors that optimize both accessibility for color vision deficiencies, using simulations and minimum perceptual distances, and aesthetics, using crowd-sourced survey data.
[1] https://arxiv.org/abs/2107.02270
[1] https://arxiv.org/abs/2107.02270
tl dr.. use grayscale instaed?
Next article: make slides that are friendly to blind people
Link to PDF: https://jfly.uni-koeln.de/html/manuals/pdf/color_blind.pdf
Color Universal Design Organization (CUDO) resources (palettes, guidebooks).[1,2,3]
[0] https://www2.cudo.jp/wp/?page_id=1936
[1] https://jfly.uni-koeln.de/colorset/
[2] https://github.com/atsuyaw/CUDcolorset
[3] http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guideb...*