WCAG Contrast Checker

The thresholds that matter

WCAG 2.2 defines contrast minimums for text and images of text. For AA, normal text needs at least 4.5:1 and large text needs at least 3:1. For AAA, the targets rise to 7:1 and 4.5:1.

Large text is usually defined as at least 18 point (24 CSS pixels) regular weight, or 14 point (about 18.66 CSS pixels) bold. The exact threshold depends on the font and weight, so when in doubt, use the stricter normal-text rule.

These are minimums for compliance. A ratio of 4.5:1 can still feel weak for a long paragraph, especially on a bright screen. Many teams aim higher for body copy.

Normal text vs large text

A heading can pass at 3:1 while the paragraph below it fails at 3:1. That is why the checker reports both thresholds. A palette that only works for large display type is not a body-text palette.

The distinction is based on size and weight, not on the element name. An `<h3>` rendered at 14 pixels is not large text just because it is a heading.

When a design uses very light font weights, the perceived contrast drops even if the measured ratio passes. Thin text at 4.5:1 can be harder to read than regular text at 4.5:1. Consider the weight in the final review.

How the ratio is calculated

The contrast ratio compares the relative luminance of two colors. Luminance is calculated from the linearized RGB channels, weighted by human sensitivity to red, green and blue. The ratio is `(L1 + 0.05) / (L2 + 0.05)`, where L1 is the lighter color.

Because the formula uses relative luminance, two colors can look similar in hue and still have very different ratios. A saturated blue and a dark gray may look different but have similar luminance; a light pink and a white may look similar but have a low ratio.

The checker uses the same sRGB luminance formula as the WCAG specification. It does not simulate color blindness or display calibration, which are separate checks.

What to do when a pair fails

First, try black or white text. If either passes, you have a safe fallback without changing the background. The checker includes a one-click switch for both.

If neither passes, adjust the background. Darkening a light background or lightening a dark background usually increases the ratio. Be careful not to lose the brand feel in the process.

If the background must stay, consider a darker or lighter variant of the brand color for text and buttons. The original color can remain as a decorative surface or a large graphic.

• Try black text on the current background.
• Try white text on the current background.
• Adjust the background lightness.
• Use a darker or lighter brand variant for text.
• Keep the original color for decoration, not body copy.

Contrast is not the only accessibility check

A page can pass every contrast check and still be inaccessible. Keyboard navigation, focus visibility, form labels, error messages, motion preferences, touch target size and screen-reader semantics all matter.

Color should not be the only way to communicate state. A red error message should also have an icon or a text label. A green success state should not rely on hue alone.

Use the contrast checker as one gate in a larger review. It is a fast, objective check that catches a common class of failures, not a complete accessibility audit.