Accessibility guide
Design for how people actually see
Color vision varies, and designs that rely on hue alone can hide labels, states or data. Check screenshots and charts in each simulation, then test adjacent foreground and background colors with the WCAG 2.2 contrast formula. Use both checks together: simulation helps reveal confusing color choices, while the contrast result measures relative luminance.
Upload an image
Drop in a PNG, JPG, WEBP or GIF. The file is decoded and processed locally; it is not sent to ToolsFA.
Compare vision modes
Review protanopia, deuteranopia, tritanopia and achromatopsia, then use the keyboard-friendly comparison slider.
Check and export
Test text, large text, controls and graphics against WCAG 2.2, then export the selected simulation as PNG or WEBP.
Four types of color vision deficiency
Protanopia and deuteranopia (red- and green-blindness) are the most common, making reds, greens, browns and oranges hard to tell apart. Tritanopia (blue-blindness) confuses blues and yellows. Achromatopsia is rare and total -- everything appears in shades of gray.
WCAG 2.2 contrast thresholds
Level AA requires 4.5:1 for normal text and 3:1 for large text. Essential interface indicators and meaningful graphical objects generally need 3:1 against adjacent colors. The calculator compares the unrounded result with each threshold, as WCAG requires.
A slider, not just a toggle
Turn on "Compare with normal vision" and drag the handle across your image to see the simulated and normal versions side by side in the same frame, instead of flipping back and forth between two separate views.
Simulation is not certification
The simulator uses full-severity Machado matrices to flag risky palettes. People do not all perceive color in the same way, so combine this preview with WCAG testing, labels, patterns and feedback from users. A passing color pair does not make an entire page WCAG conformant.
Method and references
Contrast uses the current WCAG 2.2 sRGB relative-luminance formula and checks thresholds without rounding. Protanopia, deuteranopia and tritanopia use the full-severity matrices from the physiologically based Machado model. Achromatopsia uses the WCAG luminance coefficients for a monochrome preview.
Questions and answers
Frequently asked questions
Is this colorblindness simulator free and private?
Yes. Uploaded images are read and transformed entirely in your browser using the Canvas API -- nothing is uploaded to ToolsFA or any server.
What types of color blindness can it simulate?
The tool previews protanopia, deuteranopia, tritanopia and achromatopsia. The three dichromacy modes use the full-severity matrices from the Machado, Oliveira and Fernandes model.
How accurate is the simulation?
The simulator uses an established physiologically based model at full severity. It is a useful approximation for finding risky color choices, but individual vision varies and a simulation cannot reproduce one person's exact experience.
What is a WCAG contrast ratio?
It's a measure from 1:1 to 21:1 of how different two colors' brightness levels are. The Web Content Accessibility Guidelines (WCAG) require a minimum ratio so text stays readable for people with low vision.
What contrast ratio do I need to pass WCAG?
WCAG 2.2 requires at least 4.5:1 for normal text and 3:1 for large text at Level AA. Level AAA requires 7:1 and 4.5:1 respectively. Meaningful graphics and interface indicators generally require 3:1 at Level AA.
Can I download the simulated image?
Yes. Choose PNG or WEBP to download the selected simulated view. Large images are reduced to a maximum export dimension of 3,200 pixels to keep processing reliable in the browser.
Does it work if my browser doesn't support the eyedropper tool?
Yes. The screen eyedropper is a convenience available in Chrome and Edge. Every browser can still type or paste a hex color directly, or use the native color picker.