Will People Actually Be Able to Read Your Text?
Light gray text on a white background looks elegant in a mockup and disappears entirely on a phone in sunlight, on a cheap office monitor, or before the eyes of the hundreds of millions of people with low vision or color-vision deficiency. Readability is measurable, and the measurement is the contrast ratio: a number from 1:1 (identical colors) to 21:1 (black on white) defined by the WCAG accessibility standard. This tool computes it instantly: pick a text color and a background color, see the ratio, and get a clear pass or fail against each WCAG level — with a live text preview so your eyes can confirm what the math says.
How to Check a Combination
- Enter the text color and background color — type HEX values or use the visual pickers.
- Read the contrast ratio, displayed prominently (for example “4.83:1”).
- Check the verdict grid: pass/fail for AA normal text, AA large text, and AAA at both sizes.
- Look at the live preview paragraph rendered in your exact colors — at both normal and large sizes.
- Failing? Adjust either color with the pickers and watch the ratio respond until it clears the bar.
What the Thresholds Mean
- 4.5:1 — AA, normal text. The standard legal-and-practical baseline for body text. Most accessibility regulations and procurement requirements reference this number.
- 3:1 — AA, large text (roughly 24px regular or 19px bold and up). Bigger letterforms tolerate lower contrast.
- 7:1 — AAA, normal text. The enhanced tier, valuable for reading-heavy interfaces and audiences skewing older.
- 3:1 — interface components: icons, input borders and focus indicators also need this minimum under WCAG 2.1.
Why Designs Fail This Check So Often
Because contrast perception is nonlinear and our screens flatter us. The ratio is computed from relative luminance — a formula weighting green heavily, red moderately, blue lightly, mirroring human vision. Consequences surprise intuition: medium gray on white fails; white text on a vibrant yellow is hopeless (yellow is luminous); white on a saturated mid-blue often passes where white on equally “bright-looking” orange does not. Designers working on bright, calibrated monitors systematically overestimate their contrast — the formula does not. The fix is rarely dramatic: darkening a gray two shades or nudging lightness ten points in HSL typically carries a failing pair across 4.5:1 with the design's character intact.
A Two-Minute Habit That Pays Forever
Check contrast at design time, not after the complaint. Test body text against every background it sits on — including hover states, banners and image overlays, which are where failures hide. Remember that placeholder text, secondary labels and disabled-looking-but-enabled controls are still text someone must read. This checker runs entirely in your browser and takes seconds per pair; the result is a site that works in sunlight, on bad monitors, and for every pair of eyes that visits — which is, after all, the point of publishing anything.
Finally, remember that contrast failures concentrate in the colors nobody chose deliberately: the default gray of placeholder text, the muted captions a theme shipped with, the link color inherited from a framework. Auditing those inherited defaults with this checker — five pairs, two minutes — typically finds and fixes more real-world readability problems than any redesign of the colors you actually picked on purpose.
Frequently Asked Questions
What contrast ratio do I need for normal body text?
At least 4.5:1 for WCAG AA — the standard baseline referenced by most regulations. AAA raises it to 7:1, worth targeting for reading-heavy content.
What counts as “large text” with the lower 3:1 requirement?
Roughly 24 pixels and up for regular weight, or 19 pixels and up for bold. Large letterforms stay legible at lower contrast, so the threshold relaxes.
Why does my gray-on-white text fail when it looks fine to me?
On a bright, calibrated designer monitor, marginal contrast looks better than it will for most users. The luminance formula predicts real-world legibility — sunlight, cheap panels, aging eyes — better than a glance at your own screen.
Does the check cover color-blindness?
Contrast ratio is computed from luminance, which is exactly what remains legible under color-vision deficiency — adequate contrast helps regardless of hue perception. Avoid encoding meaning in hue alone as a complementary rule.