Why a palette that passes contrast can still fail
A contrast ratio is a number about one color on another. It says nothing about whether a reader can tell the two apart. Red #dc2626 and green #16a34a on a white background both clear the bar on their own — and under deuteranopia they become #8f801b and #958951, two shades of the same olive. A status badge that reads "failed / passed" to you reads as one repeated word to roughly one man in twelve.
Your own palette is the next step: run it through the free simulator →
What the rule actually says
WCAG SC 1.4.1 Use of Color: color must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. It is not a rule about which colors you may use — it is a rule about using them alone.
The common case is red-green
Deuteranomaly is by far the most common form of color vision deficiency, and it is red-green. Protanomaly darkens reds until they sink into grey. Tritanomaly, blue-yellow, is rare enough that it is usually the last thing to check.
What a contrast checker cannot see
Two colors can have a 5:1 ratio against the page and still be indistinguishable from each other. Contrast measures readability; a simulation measures separation. You need both, because they fail in different places.
How to do it (under a minute)
- Open the simulator and paste your colors — up to a whole palette at once. It starts with six common ones so you can see the model work before you add anything of your own.
- Set the severity. 100% is full dichromacy; lower values approximate the milder forms, which are much more common than the full ones.
- Read the table. Every color is rendered for normal vision and for protanopia, deuteranopia and tritanopia, each with its contrast ratio against a background of your choice.
- Upload a screenshot if you have one. The same model runs per pixel over the whole image, so you see the page, not just the swatches.
- Export as CSS or JSON, fix what collapsed, and run it again.
The model is the Machado, Oliveira and Fernandes (2009) severity model, interpolated between neighbouring matrices as the authors recommend — the same approach professional design tools use. Everything runs in JavaScript in your own browser; your palette never leaves the machine.
Try it on your own colors
The color blindness simulator is the tool this guide describes: a whole palette at once, adjustable severity, a screenshot mode, and the CSS or JSON back out. Nothing to install, no account, and the colors stay in your browser.
Color blindness simulator
Protanopia, deuteranopia and tritanopia over a whole palette, with severity and a per-pixel screenshot mode.
WCAG contrast checker
The other half of the job: the ratio between two colors, with the AA and AAA thresholds spelled out.
Accessible palette generator
Builds a palette that holds together — useful when simulation tells you the one you have does not.
Measured: what a red/green status pair does
These numbers come from the same model the simulator runs, at full severity, against white. The first column is a color as you picked it; the other three are what it becomes. Every figure was computed, not estimated.
| Color | Normal | Protanopia | Deuteranopia | Tritanopia |
|---|---|---|---|---|
Red #dc2626 | 4.83:1 | 7.06:1 | 4.00:1 | 4.35:1 |
Green #16a34a | 3.30:1 | 3.05:1 | 3.50:1 | 3.28:1 |
Blue #2563eb | 5.17:1 | 4.32:1 | 5.24:1 | 4.30:1 |
Amber #f59e0b | 2.15:1 | 2.48:1 | 1.97:1 | 2.30:1 |
Violet #7c3aed | 5.70:1 | 4.89:1 | 5.29:1 | 5.30:1 |
Ink #111827 | 17.74:1 | 17.53:1 | 17.87:1 | 17.68:1 |
Three things fall out of that table, and none of them are visible in a contrast checker.
A passing color stops passing
Red at 4.83:1 clears AA for normal text. Under deuteranopia it is 4.00:1, which does not. The color did not change — the reader did.
The pair merges completely
Red against green is 1.47:1 for normal vision and 1.14:1 under deuteranopia. Blue against amber survives at 2.41:1 and never drops below 1.74:1, its worst figure under protanopia — still low, but it holds.
Dark neutrals are stable
Ink barely moves, 17.74:1 to 17.53:1, because it is already near black for every model. Neutral text is the safest ground you have.
Contrast is not the whole story either: it measures readability of one color on another, not whether two colors stay apart. Run both a contrast check and a simulation before you call a palette done.
From one image to a whole page
A simulator tells you what your palette does. It cannot tell you what actually got published — which theme overrode your button color on the page nobody has opened since launch, or which chart is shipping a red/green legend someone pasted in from a spreadsheet. Use the free Accessibility Scanner for that: it runs 15 WCAG checks against a real URL, contrast among them, and tells you which page and which element failed.
More contrast help
The contrast checker tests color pairs · the palette generator builds accessible palettes · the text-on-image checker measures text over a photo.
Read the contrast guide
A step-by-step guide to the WCAG requirements themselves: WCAG contrast checker, step by step.
The simulator is free. A report you can hand over is not.
The simulator and the free Accessibility Scanner stay free forever — no account, no trial, no limit on how many palettes or pages you run through them.
What neither gives you is something you can send to a client or file with an accessibility statement: a written report that also covers the parts of a site only a server can see. Pro adds the GDPR/cookie and NIS2/security checks, and the report as a file you can attach.
| What you get | Free | EUComply Pro — $79/year per website |
|---|---|---|
| Color blindness simulation | yes, the whole palette and screenshots | included |
| Page checks | the accessibility checks — 15 WCAG rules, contrast included | the same 15 rules |
| Result | score and grade for the page | included |
| The report | the whole report on the page | included |
| A report you can attach to an email | — | pdf download of the whole report as a file |
| Checks only a server can make | — | GDPR/cookie and NIS2/security checks — 18 more, 33 in all |
The licence covers one website. If you only need to know what your palette does under deuteranopia, you never need to pay for anything — the free simulator above is the whole answer.
Frequently asked questions
What is the difference between a contrast checker and a color blindness simulator?
A contrast checker answers whether one color is readable on another — a single ratio. A simulator answers whether two colors stay distinguishable when color vision is impaired, by rendering both through a model of protanopia, deuteranopia or tritanopia. A pair can have plenty of contrast and still collapse into the same color, which is why both are needed.
How accurate is the simulation?
The tool uses the Machado, Oliveira and Fernandes (2009) severity matrices with an adjustable severity from 0 to 100 percent — the same model professional design tools use. It approximates how colors are perceived. Only a clinical test can diagnose color vision deficiency in a person.
Which vision type should I check against?
Start with deuteranopia. It is by far the most common form, and red and green are the pair that fails. If your design still works for deuteranopia and tritanopia, it will almost always work for the rarer types as well.
What does WCAG require for color?
SC 1.4.1 Use of Color: color must not be the only visual means of conveying information, indicating an action or distinguishing an element. The fix is never to remove the color — it is to add a second signal: a label, an icon, a pattern, or text that says what the color is saying.
Tools and guides
Text-on-image contrast check
Hero images with text on top are one of the most common failures. Measure the worst case behind your letters.
Accessibility scanner from the terminal
Run the same 15 checks against any URL without opening a browser, in CI or locally.
All free tools
Free accessibility testing tools
What each free tool actually checks, and where you still need a human.
Free GDPR document generators
Privacy notices, DPAs and records of processing, generated from your own answers.