Productive Toolbox

Color Blindness Simulator

Preview how images and designs appear to people with different types of color vision deficiencies

Accessibility Simulator

Color Blindness Preview Workspace

Test images or UI components across color vision deficiencies and compare side-by-side instantly.

Mode: CompareContent: ImageIntensity 100%

Vision Type

Simulation Settings

Upload or Samples

Click or drag image here

PNG, JPG, WEBP up to 10MB

Sample Images

Normal Vision

No color vision deficiency

Affects ~92% of population

Preview

Normal Vision

Simulation preview

Normal Vision

Simulation preview

Accessibility Guidelines

No specific warnings for normal vision mode. Switch to a deficiency type to see focused guidance.

Design Best Practices

• Use patterns, textures, or icons in addition to color.

• Keep contrast ratios at 4.5:1 for body text and 3:1 for large text.

• Test key screens across multiple deficiency types.

• Add labels to color-dependent status indicators.

• Prefer accessibility-safe palettes for data and UI states.

Related tools

Image to GrayscaleDuotone Image FilterContrast CheckerColor Palette Contrast GridColor Palette GeneratorRandom Hex Color GeneratorColor Format ConverterHSL Color Slider

Understanding Color Vision Deficiency

Color blindness, more accurately called color vision deficiency (CVD), affects about 8% of men and 0.5% of women of Northern European descent, and somewhat fewer in most other populations. It's not actually "blindness" but rather a reduced ability to distinguish between certain colors. Understanding these differences is crucial for creating inclusive designs that work for everyone.

Red-Green Color Blindness

The most common type, affecting about 8% of men of Northern European descent. Includes Protanopia, Protanomaly, Deuteranopia, and Deuteranomaly.

Blue-Yellow Color Blindness

Less common, affecting both males and females equally. Includes Tritanopia and Tritanomaly.

Types of Color Vision Deficiency

Protanopia (Red-Blind)

Missing or non-functioning L-cones (long wavelength). Red appears very dark or black, and red-green discrimination is impossible.

Prevalence: ~1% of males | Inheritance: X-linked recessive

Deuteranopia (Green-Blind)

Missing or non-functioning M-cones (medium wavelength). Most common severe form of color blindness.

Prevalence: ~1% of males | Inheritance: X-linked recessive

Tritanopia (Blue-Blind)

Missing or non-functioning S-cones (short wavelength). Blue appears green, and yellow appears pink or red.

Prevalence: ~0.003% of population | Inheritance: Autosomal dominant

Anomalous Trichromacy

Altered spectral sensitivity of cone cells. Protanomaly, Deuteranomaly, and Tritanomaly are milder forms where color discrimination is reduced but not absent.

Prevalence: ~5% of males (Deuteranomaly most common)

Monochromacy

Complete absence of color vision. Achromatopsia (rod monochromacy) sees only in grayscale, while blue cone monochromacy retains some blue perception.

Prevalence: ~0.003% of population | Inheritance: Autosomal recessive

How to Use the Color Blindness Simulator

1. Add an image

Upload a screenshot, chart or photo (PNG, JPG or WebP, up to 10 MB), or start with a sample such as the color chart, UI dashboard or data visualization.

2. Pick a vision type

Choose protanopia or protanomaly (red), deuteranopia or deuteranomaly (green), tritanopia or tritanomaly (blue), or achromatopsia or achromatomaly (little or no color). Start with the deutan types, the most common.

3. Compare

Use Compare to see normal vision next to the simulation, or Single for one large view.

4. Set the intensity

Lower the intensity slider to approximate a milder deficiency; many people have a partial, anomalous form rather than a complete loss.

5. Fix what you find

Where two important colors merge, add labels, icons, patterns or stronger contrast instead of relying on color alone.

Design Guidelines for Color Accessibility

Do's

  • ✓ Use high contrast between text and background
  • ✓ Add patterns, textures, or shapes to distinguish elements
  • ✓ Include text labels for color-coded information
  • ✓ Test with multiple types of color blindness
  • ✓ Use colorblind-friendly palettes
  • ✓ Provide alternative ways to convey information

Don'ts

  • ✗ Rely solely on color to convey important information
  • ✗ Use red and green as the only differentiators
  • ✗ Assume everyone sees colors the same way
  • ✗ Use low contrast color combinations
  • ✗ Ignore accessibility guidelines
  • ✗ Use color alone for interactive states

Technical Implementation of Color Simulation

SVG Color Matrix Filters

Our simulator uses SVG feColorMatrix filters to accurately simulate different types of color vision deficiency. These filters apply mathematical transformations to RGB values based on research into how different cone cells respond to light.

How It Works:

  1. 1. Matrix Transformation: Each pixel's RGB values are multiplied by a transformation matrix
  2. 2. Cone Response Simulation: Matrices are based on spectral sensitivity of L, M, and S cone cells
  3. 3. Real-time Processing: SVG filters provide hardware-accelerated, real-time simulation
  4. 4. Intensity Control: Linear interpolation between normal and simulated vision

Common Design Mistakes and Solutions

Problem: Red/Green Status Indicators

Using only red and green to show error/success states.

Solution: Add icons, text labels, or use different shapes alongside colors.

Problem: Color-Only Data Visualization

Charts and graphs that rely solely on color to distinguish data series.

Solution: Use patterns, different line styles, or direct labeling.

Problem: Low Contrast Color Combinations

Using colors that appear similar to colorblind users.

Solution: Test contrast ratios and use high-contrast combinations.

Problem: Invisible Links or Buttons

Interactive elements that blend into the background for colorblind users.

Solution: Use underlines, borders, or sufficient contrast ratios.

Colorblind-Friendly Color Palettes

Safe Color Combinations

Blue and Orange
Purple and Yellow
Black and White
Dark Blue and Light Yellow

Problematic Combinations

Red and Green
Blue and Purple
Green and Brown
Similar Gray Shades

Testing and Validation

Comprehensive Testing Approach

Don't rely on simulation alone. Combine multiple testing methods for the most accurate results:

  • • Automated Tools: Use color blindness simulators and contrast checkers
  • • User Testing: Get feedback from users with actual color vision deficiency
  • • Multiple Simulations: Test with different types and severities of color blindness
  • • Real Devices: Test on actual devices with different screen settings
  • • Accessibility Audits: Include color vision testing in regular accessibility reviews

Frequently Asked Questions

How common is color blindness?

About 1 in 12 men (8%) and 1 in 200 women (0.5%) of Northern European descent have a red-green color vision deficiency. Deuteranomaly, a weakened green sensitivity, is the most common form; blue-yellow (tritan) deficiencies and total color blindness are rare.

How accurate is this simulation?

It is an approximation. The tool applies a color matrix filter to each pixel, which shows which colors become hard to tell apart but cannot reproduce exactly what any individual sees; the effect also varies between people and with the screen. Use it to find problem areas, then test with real users where you can.

Which types should I test?

Start with deuteranopia and protanopia, since red-green deficiencies are by far the most common. Then check tritanopia and achromatopsia; a design that still works in grayscale usually works for everyone.

What colors should I avoid together?

Red with green, green with brown, blue with purple, and light green with yellow are the classic problem pairs, especially at similar lightness. Blue with orange, and blue with red, are much safer, and a clear difference in lightness helps every type.

What do the accessibility standards require?

WCAG 2.2 success criterion 1.4.1 says color must not be the only way information is conveyed, so a chart, form error or status needs a label, icon or pattern too. WCAG is referenced by the ADA and Section 508 in the US and by EN 301 549 and the European Accessibility Act in the EU.

Are my images uploaded?

No. We do not collect or store what you enter.

Legal and Compliance Considerations

Accessibility Standards

While there are no specific legal requirements for color blindness accommodation, general accessibility laws often apply:

WCAG Guidelines: Success Criterion 1.4.1 requires that color is not the only means of conveying information
Section 508: US federal agencies must ensure accessible technology
ADA Compliance: Public accommodations should be accessible to people with disabilities
EN 301 549: European accessibility standard for ICT products and services

Related Tools

Image to Grayscale

Apply grayscale filter to images.

Duotone Image Filter

Apply a two-colour gradient map to images for modern artistic effects.

Contrast Checker

Test WCAG AA and AAA color contrast accessibility.

Color Palette Contrast Grid

Test all palette text/background pairs for WCAG contrast.

Color Palette Generator

Generate harmony-based palettes with export and contrast checks.

Random Hex Color Generator

Spacebar to refresh color inspiration.

Color Format Converter

Convert HEX, RGB, HSL, HSV and CMYK, including alpha and CSS color names.

HSL Color Slider

Adjust hue, saturation, and lightness with live preview.

Color Palette Extractor

Upload image to get 5 dominant colors.

CSS Mesh Gradient Generator

Create trendy multi-color backgrounds.

Custom Scrollbar Styler

Design webkit-scrollbar styles visually.

CSS Keyframe Animator

Timeline UI to build @keyframes.

Browse all 33 Design Tools →