Color Blindness Emulator

What is protanopia?

It’s one of the two types of color blindness commonly referred to as “red-green” color blindness. Affected people, called protanopes, have trouble distinguishing colors in the green–yellow–red area of the spectrum. Protans have either defective long-wavelength cones (L-cones) or the L-cones are missing at all. If they are missing it is called protanopia or sometimes red-dichromacy.
Reds often appear to be gray or black, and purples may be indistinguishable from shades of blue. The term “red-green” color blindness can be quite misleading, since protanopes often have trouble distinguishing many more colors beyond just red and green.
Gery Coady
Photo composition of tomatoes, paprika, jalapenos, grenada, strawberries that originally are red, but seen as light green with protanopia
Red caption
Photo composition of avocados, kiwis, salad, broccoli, grapes, apples that originally are green/dark green, but seen as light green/grey with protanopia
Green caption
Similarly to deuteranopia, protanopia makes you unable or very difficult to differentiate red and green.
With Protanopia, the brightness of red, orange, and yellow colors is reduced. Are you able to read this text without underlining it...? :)
Photo composition of bananas, paprikas, lemons, mais that originally are yellow, but seen as bright yellow, almost neon yellow with protanopia
Yellow caption
Photo composition of aubergines, figs, blueberries, grapes that originally are purple, but seen as greyish purple or grey with protanopia
Purple caption
As shown on the picture, purple is slightly faded to a greyish purple, and the orange elements seen in the apricot, fig are green-yellowish.
Blue is attenuated and the green elements seen on the turtle shell, the corals are seen as grey.
Photo composition under the sea with a turtle, coral reef in the background. The original colors are between light blue and green, but seen as darker blue with protanopia. The green colors are seen as grey.
Blue caption

Color recap with protanopia

Photo composition of tomatoes, paprika, jalapenos, grenada, strawberries that originally are red, but seen as light green with protanopia
Red caption
Photo composition of avocados, kiwis, salad, broccoli, grapes, apples that originally are green/dark green, but seen as light green/grey with protanopia
Green caption
Photo composition of bananas, paprikas, lemons, mais that originally are yellow, but seen as bright yellow, almost neon yellow with protanopia
Yellow caption
Photo composition of aubergines, figs, blueberries, grapes that originally are purple, but seen as greyish purple or grey with protanopia
Purple caption
Photo composition under the sea with a turtle, coral reef in the background. The original colors are between light blue and green, but seen as darker blue with protanopia. The green colors are seen as grey.
Blue caption

Colors & Design

Emulating real life examples with colorblindness

Communicating message with colours

Name Jean
Email jean@doe
Password

One common mistake is to assume colors can do the job for actions such as showing valid or invalid inputs.

In most color blind types, the green and red outlines are either confused together, or not matching any code color reminding of a valid or invalid element (grey, yellows. etc.)

Learn more: Avoid communicating a message on the basis of colour

Links and colors

Using color to only differenciate a link from the text is inaccessible for colorblind users.

In the following example, the chapter 1 and last paragraph are links, without underline. It's difficult, if not impossible to see the difference between the text and the links available.

Learn more: Render links accessible

Chapter 1

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

See European languages

Color contrast

Portfolio

Welcome to my portfolio!

I'm a content creator and translator from English to German and German to English.

Color contrast is sometimes set aside, in favor of a subtle color theme. If the background and text colors have a low contrast, they are illegible.

In this example, deuteranopian and protanopian users are the most affected with this choice of colors. They might not even see there is content on the page.

Learn more: Top color contrast checkers, Color and contrast with Material.io

Color pickers

Color pickers sometimes use the original color as caption. This type of selection is only accessible for non colorblind users. Users with protanopia, deuternopia, tritanopia and achromatopsia are unable to identify the original colors shown.

With protanopia and deuteranopia, reds, greens, yellows, purple are impossible to identify. Tritan users will confuse pinks, yellows, purple, also, greens and blues are altered and difficult to identify.

Learn more: Designing eCommerce for colorblind users

Model wearing a white shirt with a black design of a light bulb

Unisex t-shirt Lightbulb - 35 EUR

Choose a color:

Pie charts and infographics

Pie chart with the original question: How do you spend your leisure time? The answers in the chart are divided in 5 categories: TV, Books, Games, Other and Music. Each pie as a different color, that are only easy to distinguish without colorblindess. The colors are dark blue, lighter blue, orange and a lighter tone, the last one is grey.

Pie charts and graphics are also easily inaccessible, due to the colors, again, being the only source of information. Different tones of blue and yellow will be seen as very similar with protanopia, deuteranopia, tritanopia. Achromatopsia can even show colors in the same shade of grey, which makes the pie chart impossible to read.

Learn more: How to render diagrams and infographics accessible

Resources

eBooks

Definitions

Best practices and recommendations

Extensions and applications