Tools
Contrast Checker
Pick a text color and a background, get the exact WCAG 2.1 contrast ratio, and
see at a glance which AA and AAA levels pass. The preview shows real
text so you can judge legibility, not just numbers.
Readable design
Sample body copy at a normal reading size. If this is hard to read, the ratio below is telling you the truth.
What the ratio means
Contrast ratio runs from 1:1 (the two colors are identical) to 21:1
(pure black on pure white). It compares the relative luminance of the lighter and darker
color, so it tracks perceived brightness rather than hue. Two colors can look very different and
still fail. Bright red on bright green reads as a near-tie to the math, and to many readers' eyes.
WCAG sets two bars. AA is the common legal and practical baseline:
4.5:1 for normal text, 3:1 for large text (roughly 24px, or 19px bold)
and for UI components like icons, form borders, and focus rings. AAA is the
stricter target: 7:1 for normal text, 4.5:1 for large, worth aiming
for on long-form reading and anywhere accessibility is a priority.
Hitting AA on body text covers most of the work. Push for AAA on dense paragraphs, and remember
the 3:1 bar applies to the non-text parts too: a button border or a chart line that
blends into the page is just as much a problem as faint text.