WCAG 1.4.3 Contrast (Minimum)

Success criterion 1.4.3 makes sure text can be read by people who see less contrast — older visitors, people with low vision or colour vision deficiency, and anyone looking at a phone in sunlight. It is level AA, so it is part of what EN 301 549 and the European Accessibility Act rely on (clause 9.1.4.3).

What the criterion requires

The contrast ratio between text and its background must be at least:

• 4.5:1 for normal text;
• 3:1 for large text — at least 18 pt (24 CSS px) regular, or 14 pt (about 18.66 CSS px) bold.

The ratio is calculated from the relative luminance of the two colours and runs from 1:1 (same colour) to 21:1 (black on white). The rule also covers images of text, such as a banner with a slogan baked into the picture.

Exceptions:

• text in a logo or brand name;
• text of inactive controls, such as a disabled button;
• decorative text that nobody needs to read, and text that is part of a photo with other significant content.

Typical failures on an online shop

• light grey placeholder or helper text in forms (for example #aaa on white is about 2.3:1);
• the old price, "sold out" labels and small print under the "Add to cart" button;
• white text on a photo banner, where part of the photo is light;
• a brand colour used for links or buttons that looks fine on a big screen but is below 4.5:1;
• text that only gets low contrast on hover or focus.

How to check it

Automated: our checker measures the contrast of every visible text element (rule colour contrast) and shows the colours found and the ratio. It cannot always judge text over images or gradients — those results are marked for a manual look.

By hand: for text over photos, check the lightest part of the image behind the text. Check the hover, focus and error states as well, not only the default state. A contrast checker gives you the exact ratio for two colours.

How to fix it

• Darken the text or lighten the background until the ratio is at least 4.5:1; a small change in lightness is usually enough.
• Put text on images onto a solid or semi-transparent background panel.
• Do not use placeholder text as the only label; if you keep it, make it readable too.
• Fix the colour once in the theme settings or CSS variables rather than page by page.

Related criteria

• 1.4.11 Non-text Contrast — icons, field borders and focus indicators (3:1).
• 1.4.1 Use of Color — colour must not be the only way to show information.
• 1.4.4 Resize Text — text must stay usable at 200 % zoom.

Frequently asked questions

What contrast ratio does WCAG AA require?

At least 4.5:1 between text and its background, and at least 3:1 for large text. Level AAA (1.4.6) asks for 7:1 and 4.5:1.

What counts as large text in WCAG?

Text of at least 18 point (24 CSS pixels) in regular weight, or at least 14 point (about 18.66 CSS pixels) in bold.

Does 1.4.3 apply to logos and disabled buttons?

No. Text that is part of a logo or brand name, text of inactive (disabled) controls and purely decorative text are exempt.

Does 1.4.3 cover icons and input borders?

No, 1.4.3 is only about text and images of text. Icons, focus rings and the borders of form fields fall under 1.4.11 Non-text Contrast, which asks for 3:1.