Hi! Guess what? For two decades, I’ve known about the need for good color contrast in web content, especially text you want people to actually read. I’ve known that one of the first guidelines for charts, graphs, and infographics is to “never rely on color alone” to convey important information. You’re supposed to add pattern or placement as a secondary means to convey information. I’ve known that there are a large handful of types of color vision deficiencies out there, and that the Adobe Creative Cloud programs have simulators you can use to soft proof your contrast. For instance, in Illustrator, you can go to View > Proof Setup > Color blindness – Protanopia-type or -Deuteranopia-type.
I do have a hard time with these medical terms, and so, for the last twenty years, I’ve been unable to memorize what Protanopia and Deuteranopia mean, and I was assuming one was for the red/green color vision deficiency and the other was for the blue/yellow deficiency. But I was wrong.
I made a vector pattern in a blue and yellow color palette, and I tested it with both of Adobe’s presets, but neither one changed the color values very much. Turns out that both of these simulators are for different versions of the red/green one.
In the following screenshot, I’m previewing my pattern inside Illustrator with a third-party app that ChatGPT suggested: Sim Daltonism. I’ve opened the menu path for you to learn where the colorblindess simulators are, but I’m using the CMYK profile during this screenshot.
I turned to ChatGPT. I asked about the Adobe simulator and why it didn’t seem that my yellow-blue pattern changed much. Here is the response.
CHAT GPT on Color Vision Deficiency
Yes, this is an excellent question and a common point of confusion. There are indeed different types of color vision deficiency (CVD), but not all affect blue and yellow perception equally.
Adobe Illustrator includes two color blindness simulation modes:
- Protanopia (red-blind)
- Deuteranopia (green-blind)
These are the two most common types of red-green color blindness, and they primarily affect the ability to distinguish between red and green hues. Blue and yellow usually remain distinguishable in these cases, which is why you didn’t see much difference in your pattern when previewing with those simulators.
But what about blue-yellow color blindness?
The condition you’re referring to is called Tritanopia, which is a blue-yellow color vision deficiency. It affects the S-cones (short-wavelength cones), which are responsible for blue light detection.
In Tritanopia:
- Blues can appear greenish
- Yellows can look pinkish or faded
- It can cause confusion between blues and greens or yellows and violets
Why didn’t Illustrator show it?
Adobe Illustrator does not currently include Tritanopia simulation in its color blindness proofing tools. This is likely why your blue and yellow pattern didn’t show noticeable changes. Illustrator’s built-in preview is limited to Protanopia and Deuteranopia only.
Recommendations:
To check for blue-yellow contrast issues, you’ll need to use third-party tools or plugins.
Tools like Color Oracle (free desktop application), Sim Daltonism (for macOS), or Stark (a plugin for Adobe apps and Figma) offer Tritanopia simulation.
You can also manually test your design by converting it to grayscale or viewing it with Tritanopia filters from accessibility checking software.