1.4.3 Contrast Minimum (AA): 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.
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.
Benefitted Disability Types
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.
Why is it important?
Contrast helps organize your design and establish a hierarchy—which simply shows which parts of your design are most important (and signals viewers to focus on those). But more than emphasizing the focal point of your design, good use of contrast adds visual interest.
Summary
- Make sure that text has enough contrast against the background colour.
- Text must have a contrast ratio of at least 4.5:1 (or 3:1 in some cases) against its background colour.
Common Mistakes
Text does not have a contrast ratio of at least 4.5:1 against its background color.
Design Guide
- Use tools like Color Contrast Checker and Accessible Color Palette Generator to make sure that text has sufficient contrast.
References
- Colour contrast – why does it matter? on the Government Digital Service
- Accessibility Guidelines- Github.io