Text contrast: test the color pair and its context

A text color cannot pass independently of its background. A useful color on white can become difficult to read on a dark surface, so start with the pair actually used.

Identify the text before choosing the threshold

WCAG 2.2 level AA calls for at least 4.5:1 for ordinary text and 3:1 for large text. Large text depends on size and weight, not merely an HTML heading tag.

The criterion treats 18pt regular or 14pt bold as large under its stated conditions. A small heading does not automatically qualify for the lower threshold.

References: W3C WAI — Understanding WCAG 2.2 Contrast (Minimum)

Rounded display values can hide a failure

Do not round upward before deciding whether the threshold is met. A ratio below 4.5 does not pass 4.5 merely because its displayed value has fewer decimals.

Allow practical headroom when possible and review the actual font and size. Thin strokes and changing backgrounds can need attention beyond a calculation on two color codes.

References: W3C WAI — Understanding WCAG 2.2 Contrast (Minimum)

A color check is not a page certificate

The tool evaluates opaque sRGB foreground and background colors. It does not sample image backgrounds, resolve gradients or composite transparent layers for you.

A passing pair does not establish keyboard access, image alternatives or other accessibility requirements. When light and dark modes change the background, test both actual pairs rather than carrying the verdict across unchanged.

Example: a gray close to the boundary

Black #000000 on white #FFFFFF gives 21:1. #777777 on white gives about 4.478:1: it fails AA for ordinary text, although it exceeds the 3:1 large-text threshold when that definition applies.

Darkening the foreground to #767676 raises the ratio to about 4.542:1 and passes ordinary-text AA for this pair. That is a specific contrast improvement, not certification that the whole page now works for everyone.

References