The Thresholds
Contrast is expressed as a ratio between the lighter and darker of two colours, from 1:1 (identical) to 21:1 (black on white). WCAG 2.1 AA sets these minimums:
| What | Minimum ratio | Criterion |
|---|---|---|
| Body text and any text under 18.66px bold / 24px regular | 4.5:1 | 1.4.3 Contrast (Minimum) |
| Large text — 18.66px bold or 24px regular and above | 3:1 | 1.4.3 Contrast (Minimum) |
| Interface components and meaningful graphics — input borders, icons, focus indicators, chart lines | 3:1 | 1.4.11 Non-text Contrast |
| Logos and purely decorative graphics | No requirement | 1.4.3 exception |
| Disabled controls | No requirement | 1.4.3 exception |
AAA, for reference: the stricter AAA level asks for 7:1 on body text and 4.5:1 on large text. CMC's required standard is AA, but AAA is a reasonable target for long-form reading.
How to Check a Pair of Colours
- Get both hex values — the text colour and the colour actually behind it. On a gradient or photograph, test the lightest and darkest points the text crosses.
- Enter them into a contrast checker. The Colour Contrast Analyzer and the browser-based checkers listed on the accessibility tools page both give you the ratio directly.
- Compare against the table above for the text size you are actually using.
- If it fails, darken the text or lighten the background rather than enlarging the text to qualify for the 3:1 threshold — larger text does not help someone who needs contrast.
Browser developer tools also report contrast: inspect an element, and the colour swatch in the styles panel shows the computed ratio against its background.
Common Pitfalls
- Text over photographs. Contrast varies across the image. Add a solid or gradient scrim behind the text, or move the text onto a flat panel.
- Light grey placeholder and helper text. Placeholder text is still text and still needs 4.5:1.
- Brand colours used for small text. A colour that works as a large heading or a filled button often fails as body copy. Filling the shape and using white text is usually the fix.
- Focus indicators. The keyboard focus ring needs 3:1 against its background, and it must be visible — never remove it without replacing it.
- Colour as the only signal. Passing contrast does not satisfy 1.4.1 Use of Colour. Red error text still needs an icon or the word “Error”.
- Dark mode. Check both themes. A pair that passes in light mode can fail when the background inverts.
The tools we recommend are listed on the Accessibility Tools page, and contrast requirements in context are covered in the Web Content guide.
Need Help With Something Specific?
The Help Desk can work through any accessibility task with you — one-on-one, remotely or in person.
Contact the Help Desk →