Guides
WCAG contrast requirements, answered in one table
The ratios for normal text, large text and UI parts at each level, what counts as large, what is exempt, and how to check a pair.
The WCAG contrast requirements are short: at level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, large text needs 3:1, and the visible parts of controls and meaningful graphics need 3:1. Level AAA raises text to 7:1 and large text to 4.5:1; to test any pair, paste it into a free checker such as the AyeTab Contrast Checker.
The requirements in one table
| Success criterion | Level | Applies to | Minimum ratio |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Text and images of text | 4.5:1 |
| 1.4.3 Contrast (Minimum) | AA | Large text | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Text and images of text | 7:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Large text | 4.5:1 |
| 1.4.11 Non-text Contrast | AA | UI components and graphical objects | 3:1 |
Meet the AA rows first. AAA is a stricter level on top of them, and a sensible goal for long reading text such as articles and docs.
What counts as large text
WCAG calls text large when it is at least 18 point, or at least 14 point and bold. On the web, WebAIM translates that to roughly 24px for regular weight and about 18.66px for bold. Anything smaller is held to the normal text ratio, which is the stricter one.
What the non-text rule covers
Success criterion 1.4.11 asks for 3:1 between a component and the colors next to it. That covers the border of a text input, the outline of a checkbox, the focus indicator, and the parts of a chart or icon you need to understand the content. Disabled controls are exempt, as are controls whose look comes from the browser and was not changed by the author.
What is exempt from the text rules
- Text in an inactive control, such as a disabled button label.
- Pure decoration, and text no one can see.
- Text that is part of a photo or picture with other main content.
- Logos and brand names.
How the ratio is measured
The ratio compares the relative luminance of the two colors, so it runs from 1:1 (no difference) to 21:1 (black on white). Hue does not matter on its own; a red and a green with the same luminance score 1:1. The W3C also says the result must not be rounded: 4.499:1 does not meet 4.5:1.
A few reference points:
- #767676 on white is about 4.54:1, the lightest flat gray that passes AA for body text.
- #949494 on white is about 3.03:1, enough for large text and borders, not body copy.
- #595959 on white is about 7.0:1, which reaches AAA.
How to check your colors
Use a contrast checker. In AyeTab you paste the text color and the background color, and it shows the ratio with separate grades for normal text, large text and UI components, so each row of the table above gets its own answer. It is free, needs no account and runs in the browser, so unreleased brand colors stay on your machine. Developers can also open it from the AyeTab new tab extension for Chrome.
If you need to scan a whole page instead of one pair, a page auditor fits better. Chrome DevTools reports contrast issues in its CSS Overview panel and in a Lighthouse accessibility report, and WebAIM's WAVE checks all text on a page in one pass.