Test entire color palettes against all types of color vision deficiency with side-by-side simulation.
This tool takes a set of colors (a chart palette, a UI's semantic colors, a brand kit) and renders each one through simulations of protanopia, deuteranopia, and tritanopia so you can see, side by side, which colors merge together for color-blind viewers. Enter the whole palette at once rather than testing pairs one at a time. The thing people miss most often: a pair can look distinct in the original swatches yet collapse to nearly the same simulated color under one deficiency type while staying fine under the other two, so a single overall pass or fail read is misleading.
A concrete input and expected output from the current implementation.
Input
A three-color chart palette: #E41A1C (red), #4DAF4A (green), #377EB8 (blue).
Expected output
Under the protanopia and deuteranopia simulations, the red and green swatches both shift to very similar muted yellow-brown tones and become hard to tell apart side by side; the blue swatch stays clearly distinct in all three simulations, including tritanopia.
Protanopia and deuteranopia both remove the ability to separate long- and medium-wavelength (red/green) cone signals, so red and green collapse toward the same hue, while blue is carried by the separate short-wavelength cone that those two deficiencies leave largely intact.
Each palette entry is passed through a model of a chosen color vision deficiency type - protanopia, deuteranopia, tritanopia, and typically their milder anomalous forms - which remaps how the color's hue and saturation would be perceived, then draws the simulated swatch next to the original so the shift is visible at a glance rather than described abstractly.
Instead of simulating one swatch at a time, the checker lays out the whole palette as rows or columns, one per deficiency type, so colors meant to be paired - a chart legend, a set of status indicators - can be scanned together and checked for whether their relative order and separation survive each simulation.
No, not by itself. WCAG Success Criterion 1.4.1 (Use of Color) requires that color never be the only way information is conveyed; separate criteria, 1.4.3 (Contrast Minimum) for text and 1.4.11 (Non-text Contrast) for UI components, require adequate contrast ratios. This tool checks neither the sole-means-of-conveying-information rule nor contrast ratios directly, so pair it with a contrast checker and non-color cues like icons or labels.
It covers red-green deficiencies, protanopia and deuteranopia, and the rarer blue-yellow type, tritanopia - the three forms that account for the large majority of color vision deficiency. Check the tool's own type selector to see whether it also offers the milder anomalous variants or full monochromacy.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.