What this tool does
The checker computes the WCAG contrast ratio between a text color and a background color, then grades the pair against the four WCAG 2.x thresholds: AA and AAA levels, each for normal text and large text. A live preview shows your colors as real text at both sizes.
The luminance formula
First, each color's relative luminance is computed: every RGB channel is linearized (values at or below 0.03928 are divided by 12.92; larger values use ((v + 0.055) / 1.055) ^ 2.4), then combined as L = 0.2126 x R + 0.7152 x G + 0.0722 x B. The coefficients reflect that human eyes are most sensitive to green light.
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. It ranges from 1:1 (identical colors) to 21:1 (black on white).
Worked example
White text #FFFFFF on a blue background #3B82F6 gives a ratio of about 3.7:1. That passes AA for large text (needs 3:1) but fails AA for normal text (needs 4.5:1): fine for a headline, not for body copy.
The four thresholds
- AA normal text: 4.5:1, the legal baseline many regulations require.
- AA large text: 3:1. Large means at least 18pt, or 14pt bold.
- AAA normal text: 7:1, the strictest level.
- AAA large text: 4.5:1.
Limitations
The ratio measures luminance contrast only. It does not account for font rendering, thin strokes, transparency over images, or color-vision differences beyond luminance.