Skip to content

Color Blindness Simulator

Preview sRGB colors with adjustable color-vision models. Compare palettes and text pairs, check original contrast, and copy the simulated colors as CSV.

Use this result well

Inputs that matter
Opaque sRGB background/text hex colors, a palette of up to 12 colors, sample text and model severity from 0 to 1.
Output to expect
Original, protan, deutan, tritan-approximation and grayscale previews; hex values; original-pair contrast; and palette CSV.
How it works
sRGB values are converted to linear light, transformed using the supplied Machado matrices, clipped to gamut and converted back to sRGB. Both colors in a text pair use the same model.
  • Use three or six hex digits. Invalid palette entries produce an error so that a partial palette is not mistaken for the full input.
  • Tritan approximates tritanomaly and does not model tritanopia. Grayscale is a separate luminance check; these previews do not test eyesight or reproduce one person’s vision.
  • Use text, labels or patterns alongside meaningful colors. The original pair’s contrast ratio and a simulated palette do not establish full accessibility compliance.
  • Copy palette CSV includes each source color, model, applicable severity and result. View palette CSV supports manual copying.

Model and estimate references

Color previews use the Machado, Oliveira and Fernandes model and supplied matrices in linear-light RGB, with sRGB conversion and gamut clipping.

Tritan is a tritanomaly approximation and does not model tritanopia. Grayscale is a separate luminance check. These design previews do not reproduce an individual’s vision or establish accessibility compliance.

Follow W3C guidance on meaning beyond color, and check text contrast separately.

Was this tool helpful?

Projects using Color Blindness Simulator

This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.

Website Color System Decision Record

Coordinate one website color system through content, people, component states, current accessibility requirements, bounded color/token scenarios, implementation tests, and named acceptance.

6 steps11 toolsStart project

Related Tools

Tools you might need next

Color Contrast Checker

Compare two opaque sRGB colors using WCAG text contrast ratios. See precise ratio estimates, unrounded threshold decisions and clear invalid-color feedback.

Recommended next stepColor
Color Picker

Professional color picker with HEX, RGB, and HSL conversion, WCAG contrast checking, and palette generation. Pick colors and copy CSS-ready values instantly.

Recommended next stepColor
Color Palette Generator

Generate harmonious color palettes from a base color. Complementary, analogous, triadic, tetradic, monochromatic. CSS variables, Tailwind config, WCAG contrast.

Recommended next stepColor

Reference & details

How it works

Work in linear light

Each opaque sRGB color is converted to linear RGB before matrix multiplication. Resulting channels are clipped to the displayable range and converted back to sRGB.

linear RGB′ = M(severity) × linear RGB

Use the supplied model tables

The tool uses the authors’ corrected supplementary matrices, provided at severity intervals of 0.1. Intermediate values use linear interpolation. Grayscale uses linear-light relative luminance instead of a deficiency model.

Preserve the compared color pair

Both the entered text color and background are transformed for each preview. The original pair’s contrast ratio is reported separately, and every palette result is available as a hex value and CSV row.

Updated: September 2026

Example Scenarios

Inspect two modeled red/green deficiency previews at the strongest supplied setting.

Background HEX: #ff0000Model severity: 1.0

→ Protan model: #6d5f00. Deutan model: #a39000.

Use the original color as a reference for all three model previews.

Background HEX: #123456Model severity: 0.0

→ Protan, deutan and tritan previews all remain #123456.

Inspect the entered colors without automatically changing the text color.

Background HEX: #777777Text HEX: #777777

→ Original pair contrast: 1.000:1, below the 4.5:1 minimum for normal text.

FAQ

Use three or six hex digits, with or without #, for opaque sRGB colors. The palette accepts up to 12 colors separated by commas, spaces or semicolons. Alpha colors, CSS names and other color spaces are unsupported; an invalid entry produces an error.

The 0–1 setting selects the supplied Machado matrices, with 0 preserving the original colors. Protan and deutan cover the model’s red/green deficiency range. Tritan approximates tritanomaly and does not model tritanopia. Grayscale is a separate luminance check.

These are design previews, not an eyesight test. They do not diagnose a condition or reproduce one person’s vision. Display settings, physical materials and lighting affect real appearances.

No. Add text, labels, shapes or patterns when color conveys information, and review the finished design with users. The displayed contrast ratio measures only the original opaque text/background pair; other text-size and accessibility criteria need separate checks.

Copy palette CSV records every original hex color, model, applicable severity and preview hex value. View palette CSV provides selectable text if copying is blocked. Print results includes the displayed source colors and model setting.

About Color Blindness Simulator

Compare a background color, text color or palette under the Machado color-vision model. Adjust its severity, inspect the resulting hex values and keep a CSV record of the settings. Use the previews alongside labels, patterns and review of the finished design.