Color blindness simulator

About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Interfaces that rely only on colour, such as red and green status badges or chart lines, can be unreadable for them. This simulator shows how colours look under the main types of colour blindness so you can catch problems before your users do.

How to use it

1. Choose or enter the colours you want to test, such as your brand palette or chart colours.
2. Switch between simulation types.
3. Check whether colours that must be distinguished still look different.

Types of colour vision deficiency

• Protanopia / protanomaly: reduced sensitivity to red light. Reds look darker and can be confused with greens and browns.
• Deuteranopia / deuteranomaly: reduced sensitivity to green light. The most common type; red and green are hard to tell apart.
• Tritanopia / tritanomaly: reduced sensitivity to blue light. Rare; blue and green, and yellow and pink, are confused.
• Achromatopsia: no colour perception; everything is seen in shades of grey.

Example

A success green #2E7D32 and an error red #C62828 look clearly different with normal vision. Under deuteranopia both shift towards similar muddy olive-brown tones with comparable brightness, so a user may not tell which state is which.

Design fixes

• Never use colour as the only signal. Add icons, text labels or patterns.
• Use colour pairs with a large difference in lightness, not just hue.
• Blue and orange are safer than red and green for contrasting categories.
• Combine with a contrast check against WCAG guidelines.