Color Blindness Simulation

The Preview tab in Vesper Colors lets you simulate five types of color vision. Selecting a simulation transforms all the UI component mockups so you can see how your color pair appears to users with each vision type.

Available simulations

Normal

Standard trichromatic color vision. This is the default view - all colors render as entered.

Protanopia

Protanopia is the absence of red cone function, affecting approximately 1% of males. Reds appear dark, and the ability to distinguish red from green is severely reduced. Red and green hues both shift towards yellow-brown.

Deuteranopia

Deuteranopia is the absence of green cone function, affecting approximately 1% of males. Like protanopia, it results in red-green color confusion, though the color shift is slightly different. Deuteranopia is the most common form of color blindness.

Tritanopia

Tritanopia is the absence of blue cone function, affecting less than 0.01% of people. Blues appear green, and yellows appear pinkish-red. It is much rarer than red-green color blindness.

Achromatopsia

Achromatopsia is the complete absence of color vision. All colors are perceived as shades of grey. This is the most severe simulation and gives you a clear view of whether your contrast works on luminance alone, independent of hue.

How the simulation works

The simulations use standard color transformation matrices to approximate how each vision type perceives color. The transformations are applied to your foreground and background hex values and used to re-render all the component mockups. The underlying colors in your pair are not changed - the simulation is visual only.

What to look for

When checking a pair under color blindness simulation, look for:

• Does text remain readable? If text becomes difficult to distinguish from the background under any simulation, the pair may not be accessible for users with that vision type.
• Does the UI still make sense? If your design relies on red meaning danger and green meaning safe, users with protanopia or deuteranopia may not perceive that distinction.
• Achromatopsia as a baseline - if your pair passes in greyscale (achromatopsia), it passes on luminance contrast alone, which is the most robust form of contrast.

Color blindness and WCAG

WCAG 2.2 contrast ratios are calculated from luminance values, not hue. This means a pair that passes WCAG numerically will generally hold up under color blindness simulation - but it is still good practice to check, particularly for pairs that rely heavily on red or green.

If you are building interfaces where color carries meaning (status indicators, charts, form validation), the simulation is especially useful for confirming that the meaning is not lost for users who cannot distinguish between certain hues.