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).

Exceptions

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.

Example of what can happen if only one colour is specified

If a user has set their preferred foreground and background colours to be yellow on black, and a web page sets text to be black, but does not explicitly set a background colour, then the user will get black text (set by the page) on a black background (set by the user). Black text on a black background will be effectively invisible.

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