“Users say the text blends into the background.” “We were asked to make our site WCAG-compliant, but how do I actually check it?” Whether a color combination is readable is not a matter of taste — it is a number you can calculate and verify.
This guide explains how contrast ratio works (relative luminance), the WCAG 2.x thresholds at AA and AAA, worked examples for common color pairs, and how to adjust combinations that fall short. A free browser checker does the math for you at the end.
What Contrast Ratio Is — Relative Luminance in WCAG 2.x
The contrast ratio measures the difference in brightness between text and its background, ranging from 1:1 (identical colors) to 21:1 (black and white).
It is computed from each color’s relative luminance — its brightness on a 0-to-1 scale. WCAG 2.x linearizes the sRGB values and combines them with weights:
relative luminance = 0.2126 × R + 0.7152 × G + 0.0722 × B
Green carries the largest weight because human vision is most sensitive to that region. The ratio then divides the lighter luminance (L1) by the darker (L2):
contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05)
The shared 0.05 offset prevents a black-on-black ratio from becoming infinite and makes pure black on pure white exactly 21:1 — the theoretical maximum.
| Color pair | Contrast ratio |
|---|---|
| White background × black text | 21.00:1 |
| White background × #333333 | 12.63:1 |
| White background × #767676 | 4.54:1 |
| White background × #999999 | 2.85:1 |
| White background × blue (#3B82F6) | 3.68:1 |
The Thresholds: WCAG AA and AAA
WCAG 2.x sets conformance thresholds (success criteria 1.4.3 and 1.4.6) that vary by text size and the level you target:
| Level | Normal text | Large text (18pt+, or 14pt bold+) |
|---|---|---|
| Level AA | 4.5:1 or higher | 3:1 or higher |
| Level AAA | 7:1 or higher | 4.5:1 or higher |
Mapping these onto the table above: white background with #767676 (4.54:1) just clears the AA threshold of 4.5:1, while #999999 (2.85:1) does not. That “light gray text is hard to read” feeling has a numeric basis.
What counts as "large text": WCAG defines it as 18 points or larger, or 14 points bold and up. Large text is easier to read, so its threshold relaxes to 3:1.
Practice: Checking and Fixing a Combination
The three-step check
- Identify both colors: read the color and background-color values from your CSS, or pick them from a design tool.
- Compute the ratio: calculate relative luminance and the ratio, or enter both colors into a checker.
- Compare against the threshold: aim for AA (4.5:1 or higher) for body text, and AAA (7:1 or higher) for critical information where possible.
When a combination falls short
The fix is always one of two moves: darken the text or lighten the background. White background with #999999 (2.85:1) misses AA, but switching the text to #767676 reaches 4.54:1 — one step darker and the threshold is met.
Reserve pale colors for decoration: Pale colors work well for placeholders and ornament, but not for body copy or important notes. Keep "must-read text" above the threshold and let only decoration stay subtle — that split preserves both the design and the readability.
Beyond text: non-text contrast and real-world conditions
WCAG also covers non-text contrast: meaningful visual elements such as button borders, input boundaries and chart legends need 3:1 against adjacent colors (criterion 1.4.11). Your text may pass while a form field’s border fades into the background — leaving inputs unnoticed.
Even a passing ratio does not guarantee readability in every environment: projectors crush dark colors, and outdoor screens fight glare. After publishing, check the page in bright light and on a second device.
Never rely on color alone
Color contrast matters most for users with low vision or color vision deficiencies. And information conveyed by color alone — red errors, required fields marked only in a color — never reaches those users at all. Pair color with icons, text labels and messages so the meaning survives without it.
Check Contrast Ratios with a Tool
Hand-computing luminance is tedious. The Tools Hub contrast checker takes the text and background colors and instantly shows the ratio, a live preview of the actual rendering, and pass/fail against every WCAG level. Everything runs in your browser and your colors are never transmitted.
How to use it (3 steps)
Enter text and background colors
Open the contrast checker and set both colors with the pickers or HEX codes.
Read the ratio
The contrast ratio (for example, 4.54:1) appears instantly, with a live preview of how the text renders.
Review WCAG conformance
A table shows pass/fail against WCAG AA and AAA for normal and large text, and the swap button reverses the two colors in one click.
Tool mentioned in this article
Contrast Checker
Contrast ratio, live preview and WCAG pass/fail in one view — free, in your browser.
If the palette itself is still undecided, the color palette generator expands one base color into a full scheme — and the color scheme guide explains how to choose it.
Summary
- Contrast ratio is computed from relative luminance and ranges from 1:1 to 21:1
- WCAG thresholds: AA 4.5:1 for normal text, 3:1 for large text, 7:1 for AAA normal text
- White background × #767676 (4.54:1) barely passes AA; × #999999 (2.85:1) fails
- Keep “must-read text” above the threshold, let decoration stay subtle, and pair color with icons and labels
- Tools Hub’s contrast checker shows the ratio and conformance instantly, free in the browser
Before publishing, check the body text, headings and buttons of your page once — contrast failures are the easiest accessibility issues to prevent.
FAQ
Is meeting 4.5:1 mandatory?
For public services and products serving a wide audience, meeting the WCAG thresholds is strongly recommended, and in some jurisdictions it is part of legal accessibility requirements. Logos and purely decorative elements are exempt. Prioritize based on your audience and purpose.
What exactly counts as “large text”?
WCAG defines it as 18 points or larger, or 14 points bold and up. In web font sizes, that is roughly 24px and 18.66px bold as reference points.
Which colors pass easily on a white background?
Grays such as #333333 (12.63:1) and #767676 (4.54:1) clear the thresholds comfortably. Light grays like #999999 (2.85:1) and pale yellows or light blues tend to fall short and work better as decoration than as text.
Do images with text count for the check?
WCAG expectations cover text rendered as text, and also text baked into images (images of text), but an automated ratio check cannot read pixels inside images. Verify those visually during design, keeping the same thresholds in mind.
