Colour Blindness Simulator
Which pairs in your palette become the same colour — the failure a contrast checker cannot see
5 collisions across 3 vision types
A collision means two of these colours land close enough together under that simulation that a person is unlikely to tell them apart in a legend or a status dot. Change one of the pair, or add a shape, an icon, or a label so colour is not the only signal.
Your colours as authored.
- Success and Error are hard to tell apart here (ΔE 0.075)
- Success and Warning are hard to tell apart here (ΔE 0.092)
No functioning green cone. By far the most common form, and the one that collapses red-versus-green — which is exactly the pair most status colours use.
- Success and Warning are hard to tell apart here (ΔE 0.057)
No functioning red cone. Similar confusions to deuteranopia, plus reds darken markedly — a red that looked bold becomes a muddy low-contrast brown.
No functioning blue cone. Rare, and it breaks blue-versus-green rather than red-versus-green — the pair a palette that was fixed for deuteranopia often lands on.
- Success and Warning are effectively the same colour here (ΔE 0.016)
- Error and Info are effectively the same colour here (ΔE 0.003)
No colour at all. Worth checking even though it is rare, because it is the same view as a black-and-white printout, a failing monitor, and a screenshot run through a greyscale filter.
- Success
- Error
- Warning
- Info
- Success
- Error
- Warning
- Info
- Success
- Error
- Warning
- Info
Status dots at the size real interfaces use them. Large blocks flatter a palette — a 10px dot in a list is where two similar colours actually stop being two colours.
:root {
--success: #22c55e;
--error: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
}Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
100% is dichromacy — the cone is absent. Lower values approximate anomalous trichromacy, which is far more common than the complete forms and is where most real users sit. Worth checking at 60%: a palette can pass at full severity and fail in the middle.
Renders the palette at the size interfaces actually use it. Large swatches flatter a palette; a 10px dot in a list is the honest test.
The transform is the Machado, Oliveira & Fernandes (2009) model, applied in linear-light sRGB. Partial severity is interpolated towards identity rather than using the paper’s per-severity matrices — close, not exact. It is a good guide and it is not an eye: treat a clear result as “no obvious collision”, and still carry meaning in something other than colour.
Keep this palette. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- Contrast CheckerWCAG 2.1 AA / AAA contrast checker with live preview at three text sizes. Get a pass/fail verdict plus the exact ratio and suggested fixes.
- Live Palette PreviewYour palette on real components — a navbar, a hero, pricing, a dashboard, a footer — repainted as you drag, in both themes, with the contrast of every token pair checked while you do it. Not swatches next to lorem ipsum.
- Palette GeneratorBuild a 5-color palette from a base color. Supports analogous, complementary, triadic, split-complementary, tetradic, monochromatic, and shades & tints schemes. Export as CSS variables, Tailwind config, or JSON — or send the base straight to the Token Generator.