Color Contrast: WCAG Ratios and How to Check Them
Also called: Contrast ratio, Text contrast, Contrast (Minimum)
Definition
Color contrast is the difference in brightness between text or interface elements and their background, measured as a ratio from 1:1 to 21:1. WCAG requires at least 4.5:1 for normal text and 3:1 for large text.
Color contrast is how much text and interface elements stand out from their background. WCAG measures it as a ratio from 1:1 (no difference, e.g. white on white) to 21:1 (black on white). The higher the ratio, the easier the text is to read.
What it means
Low contrast is one of the most common accessibility errors on the web. Light gray text on a white background may look elegant on a designer's high-end monitor, but on a cheap laptop, in sunlight, or for someone with low vision it becomes hard or impossible to read.
WCAG 1.4.3 Contrast (Minimum) is a Level AA requirement of WCAG 2.2 – the level that laws such as the European Accessibility Act expect through EN 301 549. It sets these minimum ratios:
| What | Minimum ratio |
|---|---|
| Normal text | 4.5:1 |
| Large text – from 24px, or 18.66px bold | 3:1 |
| Logos and brand names | No requirement |
| Disabled buttons and purely decorative text | No requirement |
The stricter Level AAA (WCAG 1.4.6) asks for 7:1 for normal text and 4.5:1 for large text. For icons, form field borders and focus indicators, WCAG 1.4.11 requires at least 3:1 against the surrounding colors.
Examples
A classic borderline case: #767676 on white has a ratio of 4.54:1 and passes. The slightly lighter #777777 reaches only 4.48:1 and fails.
<!-- Passes: 4.54:1 -->
<p style="color: #767676; background: #ffffff;">Free shipping from €50</p>
<!-- Fails: 2.32:1 -->
<p style="color: #aaaaaa; background: #ffffff;">Free shipping from €50</p>Dark gray body text (#333333 on white, 12.6:1) and placeholder text that also reaches 4.5:1. For text on photos, add a dark overlay behind the text.
Light gray placeholder text, white text directly on a bright photo, or brand colors used for small text without checking the ratio first.
How to check color contrast
- Measure each color pair – enter text and background color in a contrast checker.
- Check all states – hover, focus, error messages and placeholder text count too.
- Check text on images – measure against the lightest part of the image behind the text.
- Fix at the source – change the colors in your design system or CSS variables, so every page benefits at once.
Questions
What contrast ratio does WCAG require?
At Level AA, normal text needs at least 4.5:1 and large text (from 24px, or 18.66px bold) at least 3:1. Icons, input borders and focus indicators need 3:1.
Does placeholder text need enough contrast?
Yes. Placeholder text is text, so it must reach 4.5:1. Many default browser and theme styles fail this.
Do logos need to meet contrast requirements?
No. Text that is part of a logo or brand name is exempt from WCAG 1.4.3.
How can I check my website's colors quickly?
Enter any text and background color in the free allyWay contrast checker to see the ratio and whether it passes AA and AAA. To find low-contrast text across your homepage, run the free WCAG scanner.
Can allyWay fix color contrast automatically?
Yes. allyWay finds text with too little contrast and corrects the colors automatically, matched to your brand style. Because colors are a visible change, the fixes only go live after you approve them – no changes to your code or theme needed. Start for free and see which contrast issues allyWay can fix on your website.
Related terms
Alt text
Alt text is a short written description of an image. Screen readers read it aloud, and browsers show it when the image can't load – so people who can't see the image still get its meaning.
Read definition: Alt text