WCAG 1.4.3 Contrast (Minimum)

What it asks

A contrast ratio compares the brightness of the text colour with the brightness of its background, on a scale from 1:1, where they are the same, to 21:1, black on white. The W3C defines the formula, and every contrast checker uses it. Ordinary text, and pictures of text, need at least 4.5:1. Large text needs at least 3:1.

Large means at least 18 point, or at least 14 point if it is bold. In CSS pixels that is roughly 24 pixels for regular text and roughly 18.66 pixels for bold, because a point is one and one third CSS pixels. Font weight and size are the only things that move text into the large category. A thin typeface at 24 pixels is still large by the definition, even if it is harder to read.

Three kinds of text are exempt. Incidental text: part of an inactive control, pure decoration, not visible to anyone, or part of a picture with a lot of other visual content. Logotypes: text that is part of a logo or brand name. And the rule says nothing about text that is placeholder, secondary or de-emphasised. Those are design choices, and they all need 4.5:1 like the rest.

The stricter Level AAA version, 1.4.6 Contrast (Enhanced), asks for 7:1 and 4.5:1. Controls, icons and chart parts are covered separately by 1.4.11 Non-text Contrast.

Its official name is success criterion 1.4.3 Contrast (Minimum), at Level AA. It was added in WCAG 2.2, under guideline 1.4 Distinguishable and the principle Perceivable. The W3C’s normative text says, in part:

“The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:”

From WCAG 2.2, W3C. Full explanation: Understanding 1.4.3 Contrast (Minimum).

Who it helps

People with low vision, including the many older people whose eyes let through less light and less contrast than they used to. For them, light grey on white simply is not there.

People with colour vision deficiency, for whom some colour pairs lose contrast that others can see. And everyone reading on a phone in sunlight, on a cheap screen, or with a bright window behind the monitor.

What passes and what fails

These pass

• Dark grey #333333 body text on a white background, which is well above 4.5:1.
• White text at 24 pixels on a mid-blue background that measures 3:1 or better, because the text is large.
• Placeholder text in a form field that measures 4.5:1 against the field’s background.
• A disabled button with pale text. Inactive controls are exempt.
• A company logo whose wordmark is a pale tint. Logotypes are exempt.

These fail

• Light grey secondary text, such as dates and captions, at around 3:1 on white.
• Placeholder text at 3:1, which is a very common default.
• White text over a photograph where parts of the photo are pale.
• A brand colour, chosen for a logo, used for body text on white.
• Link text that drops below 4.5:1 when the pointer hovers over it.

Text over a photograph or gradient has to meet the ratio at every point where the letters sit, not on average. The usual fixes are a darkened overlay, a solid plate behind the text or a text shadow that the W3C accepts as part of the background. Hover, focus and selected states count too: each state the text can be in has to meet the ratio.

How to test it by hand

1. Pick the text styles on the page: body text, headings, links, captions, labels, placeholders, buttons and anything inside a coloured band.
2. For each, find the text colour and the colour directly behind it in the browser’s developer tools. Look for transparency and layered backgrounds, which change the real background.
3. Put the pair into a contrast checker. Ordinary text needs 4.5:1. Text of at least 24 pixels, or at least 18.66 pixels bold, needs 3:1.
4. For text over images or gradients, sample the lightest and darkest parts of the image behind the letters, and check both.
5. Hover over links and buttons, tab to them and select items. Check each state.
6. Note every failure with its colours, its measured ratio and where it appears. Group them by colour pair, because one pair is usually one fix.

What automated testing can decide

What a machine can decide

Where the background is a flat colour, contrast is arithmetic. A tool can read the text colour and the background colour, work out the ratio with the W3C’s formula and compare it with the threshold for that text size and weight. This is the highest-volume finding in most audits, and it is one automated testing settles reliably.

What it cannot

The background is not always a colour. Behind text on a photograph, a gradient or a video frame the contrast changes from letter to letter, and there is no single value to read. A tool also has to decide whether text is incidental, decorative or part of a logo, which is a judgement about what the text is for.

How Dreven handles it

Dreven finds the text on your pages whose contrast is in question and shows you each instance, with its colours, the page and a picture of the text in place.

A reviewer decides each result, including whether a piece of text is a logo or decoration and so exempt, and signs the report. The report says how each result was decided.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 1.4.11 Non-text Contrast (Level AA). The 3:1 rule for control edges, icons and chart parts.
• 1.4.6 . The AAA version: 7:1 for ordinary text and 4.5:1 for large text.
• 1.4.1 Use of Color (Level A). Colour must not be the only cue. A different question from how far apart two colours are.
• 1.4.5 Images of Text (Level AA). Pictures of text have to meet the same contrast ratio as text.

Questions people ask

All WCAG 2.2 criteria, in plain words