Accessible Color Contrast: A WCAG Guide

Color contrast is one of the most common accessibility failures on the web, and one of the easiest to fix once you understand the rules. If text does not stand out enough from its background, a meaningful share of your visitors simply cannot read it. The Web Content Accessibility Guidelines, or WCAG, set clear numeric thresholds so you do not have to rely on a hunch.

Why contrast matters

Not everyone sees color and brightness the same way. People with low vision, age-related sight changes, or color vision deficiencies struggle with low-contrast text. So does anyone reading on a dim phone screen in bright sunlight, which is most of us at some point. Light gray text on a white background might look elegant on your high-end monitor and be invisible on a cheap laptop outdoors. Good contrast is not just compliance; it is whether your content can actually be read.

How contrast is measured

Contrast is expressed as a ratio between the brightness of the text and the brightness of its background. The range runs from 1:1, identical colors with no contrast, to 21:1, pure black on pure white. The higher the ratio, the easier the text is to read. WCAG defines specific minimum ratios you must meet.

The WCAG thresholds

There are two conformance levels, AA and AAA, and the required ratio depends on the text size.

• AA, normal text: 4.5:1. This is the baseline most sites should meet for body copy, labels, and links. It is also the level referenced by most accessibility laws.
• AA, large text: 3:1. Large text is defined as roughly 18 point, or 14 point bold, and above. Bigger letters are easier to read, so they get a more lenient threshold.
• AAA, normal text: 7:1. A stricter standard for body text, appropriate when you want maximum readability, such as government or healthcare content.
• AAA, large text: 4.5:1. The enhanced level for large text.

There is also a 3:1 minimum for non-text elements like icons, form input borders, and focus indicators, so users can perceive interactive controls and their states.

Aim for AA, reach for AAA

Meeting AA, 4.5:1 for normal text and 3:1 for large, is the practical target for the vast majority of projects and satisfies most legal requirements. AAA is worth pursuing for content read at length or by audiences with a higher likelihood of vision impairment, but it can be hard to hit while keeping a brand's lighter colors, so treat it as a goal rather than a blanket requirement.

Fixing a failing combination

When a pairing fails, you do not have to abandon your palette. Try these moves, easiest first:

• Darken the text or lighten the background. Lowering the lightness of dark text or raising it on a light background is the most direct fix and usually preserves the hue.
• Increase the text size or weight. Bumping copy into the large-text category drops the requirement from 4.5:1 to 3:1, which can rescue a marginal pairing.
• Adjust saturation. A very vivid mid-tone color can read as having less contrast than its ratio suggests; muting or deepening it often helps.
• Add a backing layer. Text over an image or gradient can sit on a solid or semi-transparent panel so it always meets the ratio regardless of what is behind it.

After each change, recheck the number. Small lightness tweaks often move the ratio more than you expect.

Check it instantly and privately

Guessing whether a pairing passes is futile, so measure it. Paste your foreground and background colors into a Color Contrast Checker and it reports the exact ratio and whether you meet AA and AAA for both normal and large text. It runs entirely in your browser, so you can test colors from an unreleased design system without sending anything to a server.

Make contrast checking part of your design process rather than an afterthought, and accessible, readable color stops being a constraint and becomes a default.