Color blindness

When we think about accessibility, we usually imagine physical disabilities that prevent the use of input devices such as keyboards, mice, or other controllers. We also often think about complete blindness, where website users with these disabilities are forced to use assistive technologies, or about the aging population, for whom reading text that is too small can be difficult.

However, there is one disability that is not discussed very often, but which affects a large portion of the population — color blindness.

Example of Ishihara color blindness test.

The days when the vast majority of media was black and white are gone. Today’s technology allows us to see colors everywhere — on computers, televisions, or phones, but also in cars, watches, household appliances, or ATMs.

Color is truly a powerful tool that offers almost endless possibilities for graphic design, but most of us design only for one type of color vision — our own.

Color is relative

Colors are increasingly being used to convey certain types of information nowadays, which can be problematic for the colorblind population.

Colors are indeed relative. Not only because they differ on various surfaces, but also because each of us perceives them differently. This is also proven by the viral phenomenon known as “The Dress,” which was mentioned in more than ten million tweets within one week.

Photo of the dress from the viral phenomenon The Dress.

The phenomenon arose from a photograph of a dress published on the social network Facebook, where people disagreed about whether the dress was blue-black or white-gold. This phenomenon revealed differences in human color perception and became the subject of scientific research in the fields of neuroscience and vision science.

What is color blindness

Color blindness is often misunderstood and there are misconceptions about how a person with this condition sees. Only in very rare cases does color blindness mean a complete inability to see any colors; monochromatism (also known as achromatopsia) affects approximately one person out of forty thousand.

On the contrary, what most of us consider “color blindness” is a very common condition involving a reduced ability to see colors or a reduced ability to distinguish colors from one another. Most people who suffer from color blindness inherit this condition as a genetic trait.

An image from the book Color Accessibility Workflows by Geri Coady illustrates different color perceptions.

This trait occurs more frequently in people born chromosomally as men than in people born chromosomally as women; the most common form of color blindness occurs in 8% of men, but only in 0.5% of women. Together, this statistic represents a significant portion of the population.

Most common visual defects

It is known that it is more difficult to distinguish colors in the dark without light than where there is sufficient light. This is caused by the fact that cones in the retina function worse in darkness than in an illuminated environment. Inside the human eye, the retina functions as a screen onto which images are projected. It contains rods, which help with vision in low light and perceiving movement, and cones, which enable color discrimination.

Color vision disorder occurs when one or more types of cones do not function properly or are missing. It can be inherited or caused by factors such as aging, injury, or disease.

People with fully functioning color vision are able to distinguish the entire spectrum.

People who suffer from certain visual defects then perceive colors differently than those who do not have these problems. There are several main visual defects that affect the majority of those afflicted:

Protanopia (Red blindness)

Protanopia is a type of red-green color blindness that affects color perception in the green-yellow-red spectrum, where red may appear darker or gray. Purple may blend with blue and pink may appear as blue. Protanopia and its milder form, protanomaly, affect only about 2% of chromosomal males.

People with severe protanopia have difficulty distinguishing between red, green, and yellow. The brightness of colors may also be reduced.

Deuteranopia (Green blindness)

Deuteranopia is another form of red-green color blindness, where people have difficulty distinguishing colors in the green-yellow-red spectrum, and often confuse red with orange and yellow. Deuteranomaly, its milder form, is the most common color vision disorder and affects about 5% of chromosomal males.

People with severe deuteranopia also have difficulty distinguishing red, green, and yellow, but the brightness of colors is usually unaffected.

Tritanopia (Blue blindness)

Tritanopia is a rare form of color blindness. It is usually not inherited but acquired, for example, through aging or injury, and can sometimes be treated. People suffering from this disorder confuse blue with green and yellow with purple. Unlike red-green disorders, tritanopia affects chromosomal males and females equally and occurs in less than 0.01% of the population.

People with severe tritanopia may confuse blue with green and yellow with purple.

Test your vision

If you suspect you might be color blind, the first step can be trying one of the available online tests. Among the most well-known is the Ishihara test, which contains colored plates with numbers or shapes hidden in a field of dots. Another option is the Waggoner Computerized Color Vision Test (CCVT), which provides more detailed results about the type and severity of color blindness.

Selection of several plates from the Ishihara color blindness test.

Although these tests can offer some insight, their results may be distorted due to differences in monitor settings, display quality, or individual color perception on different devices. There are many online tests that can indicate possible color blindness disorders:

• Ishihara Test
• Mosaic color blindness test
• Mosaic-tritan color blindness test
• Lantern color blindness test
• HRR color blindness test (Hardy Rand and Rittler)
• Farnsworth D15 color blindness test
• Farnsworth and Munsell 100 Hue

In addition to simulations of official tests, it’s also possible to test color perception through, for example, a color matching game or by playing a Van Gogh puzzle.

For accurate diagnosis, it is therefore best to visit an eye specialist who will perform a professional examination. Specialized tests can not only determine whether you have a color vision disorder, but also precisely identify its type and degree. Doctors use calibrated diagnostic tools that eliminate distortions caused by monitors or lighting conditions.

HomePro 7:1 Furniture Collection

For furniture designers, color is primarily about aesthetics; a designer chooses colors they like or believe will be attractive in the market. But designers from HomePro, a Thai home goods retailer, realized that color can play a particularly important role for 1.3 billion people with visual impairments.

Consider what people with visual impairments see around the house compared to those with perfect vision:

The fact that people with visual impairments cannot see the boundaries between furniture and surroundings can be annoying, and in some cases quite dangerous. Therefore, this Thai company decided to design 7:1 Furniture Collection, named after the recommended contrast ratio according to W3C Web Accessibility Initiative.

7:1 Furniture Collection

7:1 Furniture Collection

The colors are designed to visually stand out for people with visual impairments and compensate for reduced contrast vision. A specially developed outline system gives the furniture clearly defined shapes and helps recognize its function. Combined with contrasting color design, this system brings back into full view what would otherwise remain barely visible.

7:1 Furniture Collection from the perspective of a person with visual impairment.

Selecting universal color

Unfortunately, there is no universal solution for color combinations that are visible to all types of color blindness. However, much research and experimentation has been conducted on which colors are most distinguishable for the widest group of people.

The Japanese Color Universal Design Organization (CUDO) has developed a color palette that can be more easily distinguishable for a broader spectrum of people with color blindness. CUDO arrived at this palette by avoiding pure red and green shades as much as possible and came up with this:

Examples of color comparisons that are more easily recognizable by color blind people.

These color choices are ideal for use in charts, navigation systems, and infographics, where colors play a key role in interpreting information.

Checking your own designs

One of the first steps that lead to creating more accessible designs is incorporating a color blindness simulator into the workflow. These tools are invaluable for checking whether color selection meets accessibility standards from the beginning.

However, it’s important to realize that not every person with color blindness perceives colors exactly as the simulator displays them — these tools mimic the vision of people with the most severe forms of color blindness. Different simulators may also show slight differences, so it’s good not to rely on them as the only way to check accessibility, but to combine them with other method.

Color Oracle

The native Color Oracle application for operating systems displays common forms of color blindness in real-time directly on your screen. This tool works as a full-screen filter independently of other software and allows instant color accessibility checking.

Older version of the Color Oracle tool on MacOS.

Simulators are a great helper, especially if you use them from the very beginning of a project, but they alone do not guarantee full color accessibility. It’s necessary to focus on contrast ratios and their compliance, which provides a more accurate way to evaluate color readability.

ColorBrewer

Another useful tool with roots in traditional design fields — cartography — is ColorBrewer, created by cartographer Cynthia Brewer. This online tool was originally intended for map design, but also contains color schemes friendly to the color blind that can be easily adapted to other design areas.

The ColorBrewer tool offers color advice for cartography.

Brewer explains that colors, even very similar ones, are more easily distinguished when placed next to each other (for example, as in a map legend). However, once they are distributed in random patterns, it becomes harder to identify their uniqueness. The tool can also suggest adjustments to individual colors or entire scales if the palette is not sufficiently readable.

In almost every company and on every project I’ve worked on, I’ve experienced situations where I had to explain deviations from brand colors. A good way to defend your decision is to argue with functionality.

It’s definitely better to have chart or interface colors slightly different from the visual identity but easily readable, than to stick to visual identity rules at all costs and risk that the information won’t be understandable.

Leonardo

If you’d like to learn more about color contrast, I recommend going through the interactive Color & Contrast guide by Nate Baldwin, and possibly trying his Leonardo tool, which can be used for managing and sharing accessible color systems for user interface design and data visualization.

Whocanuse

An interesting tool is also whocanuse.com, where you can simulate color combinations of text and background and shows how color contrast can affect different people with visual impairments.

Stark - Contrast & Accessibility Checker

This Figma plugin called Stark offers several useful functions such as color contrast checking, color blindness simulation, typography analysis, and more. If you design in Figma, this tool will save a lot of work before designs reach production.

Why focus on color selection

As designers and developers, we can educate about color blindness and adjust our workflows so that we don’t think about color accessibility as something extra, but take it for granted. This will bring a pleasant user experience for everyone.

In addition, there is also increasingly perceived legislation that forces creators of digital content to create accessible content (not only) online. A good example is the 2006 dispute where the National Federation for the Blind (NFB) sued Target, which paid $6 million in compensation due to an inaccessible website.

Conclusion

Color accessibility is about an overall approach to design that takes into account user diversity. There is no universal solution that would suit all forms of color blindness, so it’s important to combine different approaches — from careful color selection and using proven palettes, through color blindness simulators, to maintaining contrast ratios.

Well-designed color schemes help not only people with color blindness, but improve overall usability for everyone. The result is not only visually more attractive, but also more efficient and understandable design.

The article was inspired by the content of the book Color Accessibility Workflows by Geri Coady. It was written at the time when I was reading the book and taking notes.