Check text contrast with WCAG ratios

Understand the settings

Contrast compares relative luminance, not simply the numerical distance between RGB values. The checker linearizes each sRGB channel, calculates luminance, then compares the lighter and darker colors with the WCAG formula. Black against white gives 21:1; identical colors give 1:1.

For WCAG AA, ordinary text needs at least 4.5:1 and large text needs at least 3:1. Large text means at least 18 pt regular or 14 pt bold. AAA thresholds are 7:1 for ordinary text and 4.5:1 for large text. The displayed ratio is rounded, but the pass/fail decision uses the unrounded value.

A ratio is one accessibility check. Font size, weight, focus indicators, content structure, keyboard access and meaning conveyed only by color need separate attention. A gradient, photograph or transparent layer may change the effective background under different letters.

Step by step

1. Enter two six-digit hex colors, such as #24558e and #ffffff.
2. Calculate and compare the ratio with the normal-text and large-text thresholds.
3. Inspect the live preview, then test the actual text size and weight on your page.
4. Repeat for links, hover states, selected states and any alternate background.

Reproduce the endpoints

Set text to #000000 and background to #ffffff: the ratio should be 21.00:1. Make both colors #ffffff: the result should be 1.00:1 and fail the listed text thresholds.

Limits and what to check

• Only opaque six-digit sRGB colors are accepted. Three-digit hex, alpha and CSS color names are not supported.
• This is a text-contrast calculator, not a complete WCAG audit or certification.
• A displayed rounded value at a threshold may still fail if the underlying ratio is slightly lower.
• Colors and results remain in the browser.

Troubleshooting