Contrast for text and images of text
Any text or image of text needs to have sufficient contrast for sighted users to be able to read it.
Text and images of text, including text in videos, must have a minimum contrast ratio of 4.5:1 against their background colours.
Meeting the Web Accessibility Standard
When both text and background colours are specified such that text and images of text meet minimum contrast requirements, this meets WCAG 2 Success Criterion 1.4.3 Contrast (Minimum) (Level AA).
There are 3 exceptions to this 4.5:1 contrast requirement:
- Large text: ‘Large text’ only needs a minimum contrast ratio of 3:1. See What is ‘large text’ below.
- Incidental text or images of text: There are no minimum contrast requirements for text or images of text if they are:
- part of an inactive user interface component
- pure decoration
- not visible to anyone
- an insignificant part of a picture of something else — for example, the vehicle registration of a car accidentally caught in a photograph of a building.
- Logotypes: Text in logos or brand names has no minimum contrast requirement.
For more on these exceptions to the 4.5:1 contrast requirement, see Exceptions — Understanding WCAG 2 Contrast and Color Requirements — WebAIM.
What is ‘large text’?
‘Large text’ is text that uses at least a 19px bold or 24px normal font weight.
Large text only needs to have a minimum contrast ratio of 3:1, as opposed to 4.5:1 for normal text.
Where those font sizes come from
The different requirement for ‘large text’ comes from the Web Content Accessibility Guidelines (WCAG), which defines large text as at least 14pt (or points) and bold or 18pt. These font sizes relate to print media.
With web content, we typically work in px or pixels. Since 1pt equals 1.333px, that means:
- 14pt is approximately 18.67px — or 19px rounded up
- 18pt equals 24px.
Specify text foreground and background colours
When a developer specifies a foreground text colour, they must also specify the background colour, and vice versa. If a web page does not declare any foreground and background colours to use, the browser’s default or the user’s own specified colours will be used.
Users with colour vision deficiencies, low vision, or intellectual, learning and reading impairments commonly customise their browser’s foreground and background colours to make text easier for them to read. These user-specified colours will be applied whenever a foreground or background colour has not been set explicitly by the developer.
The problem occurs when a developer specifies only the foreground or background colour. In that case, a user-specified colour could be matched with a page-specified colour resulting in poor contrast.
It’s not necessary to declare the foreground and background colours in the same way. For example, an element’s foreground colour might be declared in a CSS rule for that element, while the background colour is inherited through the cascade. However it’s done, both foreground and background colours must be programmatically set by the developer. Even if a CSS background image provides the background colour, it still needs to be specified because a user might turn off images.
More information on specifying foreground and background colours
For more information, see the following Techniques for WCAG 2 from the W3C:
- F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa
- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults.
More information on contrast for text
- Understanding Success Criterion 1.4.3: Contrast (Minimum) — WCAG 2 — W3C
- 1.4.3 Contrast (Minimum) — Understanding WCAG 2 Contrast and Color Requirements — WebAIM
- Colour contrast for text — Accessibility Developer Guide
- Contrast with colour gradients and background images — Knowledge Area: Colour and contrast