1.4.3 - Text contrast

Summary

Text must have a contrast ratio of at least 4.5:1 (or 3:1 in some cases) against its background colour.

Requirements

• 'Large scale' text has a contrast ratio of at least 3:1 against its background.
• Text that is not 'large scale' has a contrast ratio of at least 4.5:1 against its background.

'Large scale' text is defined as text that is larger than 18pt/24px, or 14pt/18.5px and bold.

Why?

• Good colour contrast assists people with vision impairment (including colour blindness) and cognitive impairments when viewing content.
• It also benefits all users in a brightly lit environment.

Official wording in the Web Content Accessibility Guidelines

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

See the W3C's detailed explanation of this guideline with techniques and examples.

Guidance for Design

User tools like Sketch's Stark plug-in, Colour Contrast Analyser to make sure that text has sufficient contrast.

More guidance for Design

• Colour contrast - why does it matter? on the Government Digital Service