Loading the tool…
WCAG 2.1 AA / AAA in real time
#0d7c93ratio 4.64:1.text {
color: #109cb9;
background-color: #f8fafc;
}Keep this pair. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Card body text describing something important.
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
A contrast ratio is computed from luminance, and luminance is not a property of the colour alone — it is a property of the colour and the eye reading it. The same pair, re-measured with each cone missing, at full severity.
The quick brown fox.
A link in a sentence.
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.
The quick brown fox.
A link in a sentence.
No functioning red cone. Similar confusions to deuteranopia, plus reds darken markedly — a red that looked bold becomes a muddy low-contrast brown.
The quick brown fox.
A link in a sentence.
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.
The quick brown fox.
A link in a sentence.
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.
Machado, Oliveira & Fernandes (2009), applied in linear-light sRGB — the same model the well-known simulators use. It is a good model and it is not an eye; treat a clear result as “no obvious failure” rather than as a conformance claim. The failure this cannot show you is two colours becoming one, which needs a third colour to happen and so belongs to a palette rather than a pair — that is the colour blindness simulator.
The pairs people actually open a checker to settle — greys on white at the step where they stop passing, and white on each of the colours a button gets painted. Each one is a URL; open it, nudge either colour, and the address bar follows.
#0F172A on #FFFFFF
Near-black body text on white. The safe default, and the baseline everything else is judged against.
#64748B on #FFFFFF
The muted-foreground grey most design systems ship. Passes AA for body text, and only just.
#94A3B8 on #FFFFFF
One step lighter, and it fails. The exact place a placeholder colour stops being readable.
#FFFFFF on #3B82F6
White on the default blue button. The most-shipped failing pair on the web.
#FFFFFF on #2563EB
The same button one step darker, which is what it takes to pass AA.
#FFFFFF on #059669
White on a green call-to-action — the pair that decides whether a success state is legible.
#FFFFFF on #F59E0B
White on amber. Fails badly at every size, and ships anyway more often than any other pair.
#451A03 on #FBBF24
What the amber button should be: dark ink on the same warning yellow.
#FFFFFF on #DC2626
Destructive-button white on red, the pair a delete confirmation lives or dies on.
#E2E8F0 on #0F172A
Dark-mode body text. Off-white rather than white, because pure white on near-black haloes.
#94A3B8 on #0F172A
The dark-mode muted grey. The light-mode twin of this pair fails; this one does not.
#475569 on #0F172A
Dark-on-dark, the failure that only shows up on a real screen in a bright room.
Every one of these is just the address bar. Change anything in the tool above and the URL changes with it — copy it, paste it into a ticket, or commit it in a review, and it opens for anyone with these exact settings. No account, and nothing to save first.