Color vision preview
Compare a chart or UI palette under three color-vision simulations and grayscale.
- 1Add input
- 2Review and run
- 3Get your result
Tool input and files are processed in this browser without being uploaded.
Before you start
Paste 2–12 HEX colors from a chart, legend, map, or interface. Compare the same palette under protanopia, deuteranopia, and tritanopia simulations, then save the color table.
How to use this tool
- Enter 2–12 six-digit HEX colors from the same design, one per line or separated by spaces or commas.
- Preview all three simulations and the grayscale reference side by side in the same numbered order.
- Look for colors that become difficult to tell apart. Revise the design with non-color cues and check text contrast separately. Copy or download the CSV if needed.
Supported inputs and limits
Simulations use Machado et al. (2009) severity-1 matrices on linear-light sRGB; displays and individual vision vary.
A palette preview does not simulate a finished image, certify accessibility, or replace tests with people. Use labels, shapes, or patterns as well as color.
Input stays in this browser. The downloadable CSV contains the original and simulated HEX values.
Worked example
Example input
#d94841 #78a22f #3769b8 #e2b642
Example options
{}Example output
original,protanopia,deuteranopia,tritanopia,grayscale #d94841,#70673f,#95873c,#ee1f48,#7b7b7b #78a22f,#aa971c,#a49439,#7c9b8b,#959595 #3769b8,#4370bb,#2d64b6,#007b87,#6a6a6a #e2b642,#cbb532,#d6c047,#f5a69e,#bcbcbc
When something does not work
Use 2–12 six-digit HEX colors such as #d94841. Remove names, alpha channels, and shorthand HEX values.
Frequently asked questions
What does the comparison show?
Each numbered palette is transformed with a severity-1 model for protanopia, deuteranopia, or tritanopia. Grayscale shows relative luminance as an extra reference. These are approximate previews, not a prediction of any one person’s view.
Does this prove my design is accessible?
No. A palette alone omits context, neighboring colors, text size, and the finished image. Keep labels or shapes in the design, check text contrast separately, and test the actual design with users.
Can I upload a whole chart?
This tool compares palette HEX values, not a screenshot or chart file. Copy the chart’s colors into the palette field to inspect their relationship.
Is my palette sent to a server?
No. The tool runs in your browser. Save the CSV before closing the tab if you need the values.
Documentation & further reading
Related tools
Color converter
Same color. A different format.
Contrast checker
Check the contrast between text and background colors.
Gradient maker
Find a blend you love. Copy the CSS.
Palette and color mixing
Generate rule-based palettes or compare weighted RGB color mixtures.