Contrast Checker Guide: WCAG Text Color Ratios

Color contrast is one of the fastest accessibility checks to miss during design handoff. A color pair can look acceptable on a large monitor and still fail for body text, labels, form hints, buttons, or mobile screens in daylight.

The Contrast Checker compares a foreground color and a background color using the WCAG contrast ratio formula. It gives one ratio and evaluates it against common AA and AAA thresholds for normal and large text.

What the ratio means

A contrast ratio compares the relative luminance of two colors. Black on white is 21:1, while similar grays can be close to 1:1. WCAG AA normally expects 4.5:1 for standard text and 3:1 for large text. AAA is stricter at 7:1 for standard text.

The important detail is that large headings and small interface labels do not use the same threshold. A hero title may pass while a small placeholder, caption, disabled state, or table cell fails.

Where to test colors

• Test body text, secondary text, links, buttons, badges, alerts, and form labels separately.
• Check text on real component backgrounds, not only on pure white or pure black.
• Review both light and dark themes if your site supports theme switching.
• Keep approved color pairs in design tokens so future components do not guess.

Use suggestions carefully

The checker can suggest black or white text for the current background, but brand systems often need a better middle step: choose the nearest accessible shade that still fits the design language. Use the ratio as the constraint, then adjust the palette intentionally.

For practical UI work, check contrast before a color enters production CSS. It is much cheaper to fix a token or button style early than to chase low-contrast text across dozens of pages later.