What is a good colour contrast ratio?
Under WCAG 2.2 level AA, text needs a contrast ratio of at least 4.5:1 against its background, and large text and UI components need at least 3:1. Level AAA raises normal text to 7:1 and large text to 4.5:1.
The ratio runs from 1:1 (the same colour twice) to 21:1 (black on white). It compares the relative luminance of the two colours, so hue alone does not count: a red and a green of the same lightness can fail even though they look very different.
WCAG 2.2 contrast thresholds| What | Level AA | Level AAA | Success criterion |
|---|
| Normal text | 4.5 : 1 | 7 : 1 | 1.4.3, 1.4.6 |
| Large text (24 px, or 18.66 px bold) | 3 : 1 | 4.5 : 1 | 1.4.3, 1.4.6 |
| UI components and graphical objects | 3 : 1 | No AAA level | 1.4.11 |
As of October 2026 · Source: W3C WCAG 2.2, success criteria 1.4.3, 1.4.6 and 1.4.11
What counts as large text?
Large text is at least 18 point regular or 14 point bold. On the web that is about 24 px regular or 18.66 px bold.
Large text may use the lower 3:1 ratio because thicker, bigger letters stay readable at lower contrast. Most body copy, captions and form labels are below this size, so they need 4.5:1.
WCAG 2 vs APCA
APCA (Accessible Perceptual Contrast Algorithm) is the candidate contrast method for WCAG 3. It is not part of any published standard yet, so audits and laws still use the WCAG 2 ratio.
APCA gives a lightness contrast value, Lc, instead of a ratio. It treats dark text on light and light text on dark differently, because they do not read the same, and its guidance ties the needed Lc to font size and weight. As a rough guide, Lc 75 suits body text, Lc 60 larger text, Lc 45 large headings and Lc 30 non-text elements.
WCAG 2 can overrate light text on dark colours and underrate some mid-tone pairs. Checking both is a good habit: pass WCAG 2.2 AA to meet today's rules, and use APCA to catch pairs that pass on paper but read poorly.
How to fix low contrast without changing your brand
Keep the hue and change only the lightness. A darker shade of the same colour usually passes and still looks on brand, which is what the nearest passing colour above does.
Keep a light or vivid brand colour for large elements, such as headings, illustrations and backgrounds, and use a darker shade for small text and links.
Check every state, not only the default one: hover, focus, visited links and error messages. Placeholder text and muted captions are the most common failures on landing pages.
Disabled controls are exempt from the text contrast rule, but they must still look clearly disabled and not like a low-contrast active button.