Color Blindness Simulator-- A11y Tool

Simulate how colors appear with different types of color vision deficiency.

Color to Simulate

Select a color and click Simulate to see color blindness simulations

Why Use Our Color Blindness Simulator?

4 CVD Types

Simulate protanopia, deuteranopia, tritanopia, and achromatopsia.

Side by Side

Compare original and simulated colors side by side.

WCAG Ready

Test your palette for accessibility compliance.

One-Click Copy

Click any swatch to copy its HEX value instantly.

Accurate Models

Uses Brettel/Vienot matrices for precise simulation.

Free Forever

No signup, no limits. Free accessibility testing.

Other Color Tools

Color Picker

Pick colors visually

HEX to RGB

Convert HEX to RGB

RGB to HEX

Convert RGB to HEX

HSL Converter

Convert HSL colors

Palette Generator

Generate color palettes

Contrast Checker

Check WCAG contrast

Gradient Generator

Create CSS gradients

Shade & Tint

Generate shades & tints

Color Blender

Blend two colors

Complementary Finder

Find complementary colors

CSS Color Converter

Convert CSS color names

Random Color

Generate random colors

Color Name Lookup

Find color names

Complete Color Blindness Guide

Color vision deficiency (CVD), commonly known as color blindness, affects the way the eye perceives colors. The human eye has three types of cone cells (red, green, blue) that detect different wavelengths of light. When one or more types are absent or defective, color perception is altered.

The most common form is red-green color blindness, which includes protanopia (missing red cones) and deuteranopia (missing green cones). These affect about 8% of men. Tritanopia (missing blue cones) is rare, and achromatopsia (total color blindness) is extremely rare.

Our simulator applies transformation matrices to RGB values to approximate how colors appear to people with each type of CVD. This helps designers create accessible interfaces that work for everyone.

Never Rely on Color Alone

WCAG 1.4.1 requires that color is not the only visual means of conveying information. Use icons, labels, and patterns alongside color.

Sufficient Contrast

Ensure at least 4.5:1 contrast ratio for normal text and 3:1 for large text. Use our Contrast Checker to verify.

Safe Color Combinations

Blue/orange and blue/yellow are generally safe for all CVD types. Avoid red/green combinations for critical elements.

Test Your Palette

Always simulate your complete color palette through all CVD types before finalizing a design to catch accessibility issues early.

The Web Content Accessibility Guidelines (WCAG) 2.1 include specific criteria related to color use. Criterion 1.4.1 (Use of Color) states that color must not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Criterion 1.4.3 (Contrast) requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Criterion 1.4.11 (Non-text Contrast) requires 3:1 for UI components and graphical objects.

By combining our Color Blindness Simulator with the Contrast Checker, you can ensure your designs meet WCAG AA or AAA standards for all users.

What is color blindness?

Color blindness (color vision deficiency or CVD) is a condition where a person cannot perceive certain colors normally. It affects approximately 8% of men and 0.5% of women worldwide.

What is protanopia?

Protanopia is red-blind color vision deficiency where the red cones are missing. People with protanopia cannot distinguish between red and green hues and see reds as dark.

What is deuteranopia?

Deuteranopia is green-blind color vision deficiency where the green cones are missing. It is the most common form of color blindness, making green and red appear similar.

What is tritanopia?

Tritanopia is blue-blind color vision deficiency where the blue cones are missing. It is rare and causes difficulty distinguishing between blue and yellow.

What is achromatopsia?

Achromatopsia is total color blindness where no color is perceived -- only shades of gray. It is extremely rare, affecting about 1 in 30,000 people.

Why should I test for color blindness?

Testing ensures your designs are accessible to all users. If important information is conveyed only through color, users with CVD may miss it. WCAG guidelines require that color is not the sole means of conveying information.

How accurate are these simulations?

Our simulations use the Brettel/Vienot transformation matrices, which are the industry standard for color blindness simulation. They provide a close approximation of how colors appear to people with CVD.

Is the simulation processed locally?

Yes, all simulations are performed entirely in your browser using mathematical transformations. No data is sent to any server.

What should I do if my colors fail accessibility?

Add text labels, icons, or patterns alongside color to convey information. Increase contrast between colors, and use our Contrast Checker to verify WCAG compliance.

Can I test multiple colors at once?

This tool tests one color at a time. Test each critical color in your palette individually to ensure accessibility across all types of color vision deficiency.

What percentage of people are color blind?

About 8% of males and 0.5% of females of Northern European descent have some form of color vision deficiency. The most common types are protanomaly and deuteranomaly (red-green deficiency).

Does color blindness affect all colors equally?

No. Red-green deficiency (protanopia/deuteranopia) is most common and primarily affects red, green, brown, and orange perception. Blue-yellow deficiency and total color blindness are much rarer.

Color Blindness Simulator Tool

Why Use Our Color Blindness Simulator?

Other Color Tools

Complete Color Blindness Guide