Colour contrast: what 4.5:1 actually means

Low colour contrast is one of the most common issues on business websites, and one of the easiest to misunderstand. The number 4.5:1 appears in every accessibility checklist, but few explain what it measures or how to meet it without redesigning a brand. This article covers both.

What the ratio measures

A contrast ratio compares how light two colours are, usually text and its background. It is based on relative luminance: a measure of brightness that accounts for the fact that human eyes are more sensitive to green light than to red or blue.

The ratio runs from 1:1 to 21:1.

• 1:1 means no difference at all, such as white text on a white background.
• 21:1 is the maximum, black on white.

The formula takes the luminance of the lighter colour plus 0.05, and divides it by the luminance of the darker colour plus 0.05. You do not need to calculate it by hand; any contrast checker will do it from two colour codes. What matters is understanding that the ratio is about lightness, not hue. Two very different colours, such as a mid red and a mid green, can have almost the same luminance and therefore poor contrast.

The thresholds in WCAG 2.1 AA

Normal text: 4.5:1

Success criterion 1.4.3 Contrast (Minimum) requires at least 4.5:1 for regular body text, links, button labels and form text. For reference, a mid grey of #767676 on white measures about 4.54:1, just over the line. A lighter grey such as #999999 on white measures about 2.85:1, well under it.

Large text: 3:1

Large text needs at least 3:1. WCAG defines large text as at least 18 point, or 14 point if bold. On the web that is roughly 24 CSS pixels for regular weight, or about 18.66 pixels for bold. Headings often qualify; body text usually does not.

Interface components and graphics: 3:1

Success criterion 1.4.11 Non-text Contrast requires 3:1 for the visual parts people need to identify and use controls: form field borders, check boxes, radio buttons, icon-only buttons and the keyboard focus indicator. It also applies to parts of graphics needed to understand them, such as lines on a chart. A pale grey border around a text field on a white background is a frequent failure.

What is exempt

Logos and brand names in a logo are exempt. So is text that is purely decorative or part of an inactive (disabled) control. Text in photos that is incidental, such as a sign in the background of a street scene, is also exempt.

Placeholder text

Placeholder text is the grey hint inside an empty form field, such as "e.g. name@example.com". It is often styled very light, and it is still text, so if it conveys information it needs 4.5:1.

There is a second problem. Placeholder text disappears as soon as someone starts typing, so it should never be the only label. A visible label above the field, with any hint text kept outside the field, meets 3.3.2 Labels or Instructions and avoids the contrast issue entirely.

Text on images

Text placed over photos, such as a headline across a hero banner, is hard to assess because the background changes from point to point. A word may sit on a dark patch of sky in one place and a bright patch of cloud in another. The text must meet the ratio against the actual pixels behind it.

Reliable fixes include:

• A semi-transparent dark overlay on the image behind light text, so the whole area is reliably dark.
• A solid panel behind the text, sometimes slightly transparent.
• A text shadow for large headings, which can help when combined with one of the options above.
• Moving the text off the image and placing it beside or below.

Remember that responsive layouts crop images differently on phones, so check the result at several widths, including 320 CSS pixels.

Fixing contrast while keeping your brand

Many organizations worry that meeting contrast means abandoning their brand colours. Usually it does not. The most effective fix is to keep the same hue and make it slightly darker (or lighter, on a dark background) until it passes.

Two examples of this approach, each measured as text on white:

In both cases the colour stays recognizably the same; it is simply a shade deeper. Seen on its own, the adjusted colour still reads as the brand colour.

Other techniques that preserve the look:

• Use the original colour where it passes. A brand colour that fails as small text may still pass at 3:1 for large headings, or as a background behind dark text.
• Keep the bright colour for decoration, such as borders, accent bars and illustrations that do not carry meaning, and use the darker shade for text and controls.
• Swap the text colour on buttons. If white text on a light brand colour fails, dark text on the same button may pass without changing the button at all.
• Thicken or darken borders on form fields rather than changing the page palette.

Testing contrast properly

Automated scanners are good at checking plain text on solid backgrounds. They often miss text over images, gradients, hover and focus states, and the 3:1 requirement for interface components. Those need a person to check. Our method explains how we combine automated and manual testing, and you can see how contrast findings are reported in our sample report. For the other criteria that make up WCAG 2.1 AA, see the Manitoba standard.

Talk to us

If you are concerned that fixing contrast will change how your website looks, we can review your colours and explain what would need to change before any work begins. Book a consultation to discuss your site, or read about our services.