Text & Background Contrast Checker
See exactly how your text reads on any background, with live preview and WCAG scoring.
Small text — 14px regular
Body copy — 16px regular for paragraphs.
Large heading — 24px bold
AA normal requires 4.5:1, AAA normal requires 7:1. Large text starts at 18pt regular or 14pt bold.
Picking a text color is rarely about a single hue — it is about the relationship between the text and the surface behind it. The same blue that feels readable on white can become unreadable on a light gray, and a dark gray that works for body text can fail completely on a colored background. This checker shows that relationship live, so you can iterate on real combinations rather than guessing from a swatch palette.
The contrast ratio between text and background is the first-order driver of readability, but it is not the only one. Type size, weight and rendering all affect how legible a combination feels. Bold weights need less contrast than light weights. Large display type (24px+) reads at lower contrast ratios than small body text (14-16px). Antialiased rendering on retina displays handles low-contrast text better than older displays do. The WCAG numbers are the floor; the live preview here lets you sanity-check that the combination actually feels right at the type sizes you ship.
This checker is also useful for non-text combinations. Set the foreground to a button label color and the background to the button fill to verify CTAs stay readable. Set the foreground to an icon color and the background to a card surface to make sure UI components hit the 3:1 minimum required by WCAG SC 1.4.11. The same ratio mechanic applies whether the foreground is a glyph, an icon, a chart line or a focus ring.
Frequently asked questions
Should I always use black text on white?+
Pure black on pure white can feel harsh on long reads, especially on bright displays. A near-black like #111827 on a near-white like #FAFAFA usually feels more comfortable and still passes AAA contrast (above 7:1). For dark mode, flip the relationship: a near-white #E5E7EB on a near-black #0A0A0F is more readable than pure white on pure black.
Can I check contrast for buttons?+
Yes — set the foreground to your button label color and the background to the button fill. For body-sized labels (14-16px) aim for 4.5:1 or better; for large display labels (18-24px+) 3:1 is the AA minimum but 4.5:1 is still safer. Outlined buttons need to satisfy contrast for both the label-versus-fill and the border-versus-page combinations.
Why does my preview look wrong on retina screens?+
Retina displays render text with subpixel antialiasing that can make low-contrast combinations feel more readable than they actually are for users on standard displays. If your audience includes lower-resolution monitors (still common in B2B and enterprise), aim for higher contrast ratios than the WCAG minimum to stay legible across hardware.
What about decorative or disabled text?+
WCAG explicitly exempts purely decorative text, watermarks, logos and incidental text from contrast requirements. Disabled form controls are also exempt, but be careful — disabled controls that users cannot identify as disabled can fail other WCAG criteria. As a rule, do not use the exemption as a license to ship hard-to-read interfaces.
Does font weight affect required contrast?+
Indirectly. WCAG defines "large text" as 18pt regular or 14pt bold (which is around 24px regular or 19px bold). Bold weight effectively shifts a smaller size into the "large" category with the more lenient 3:1 contrast ratio. Light weights (300 and below) need extra contrast headroom because the strokes are thinner.