What the contrast requirements are, and how to fix a failing pair

There is more than one requirement

WCAG 2.2 has two contrast criteria that matter for a user interface. 1.4.3 sets a minimum for text against its background, and 1.4.11 covers the visual information needed to identify a control, such as an input border or a focus ring.

The text requirement has two levels with two thresholds each, because large text needs less contrast than body copy. Knowing which threshold applies to which piece of your interface is most of the work.

• AA, normal text — 4.5:1 (body copy under 18pt)
• AA, large text — 3:1 (18pt bold or 24pt regular)
• AAA, normal text — 7:1
• AAA, large text — 4.5:1
• Non-text contrast, 1.4.11 — 3:1 for borders, icons and focus rings

How the ratio is calculated

Relative luminance is computed per channel after linearising the sRGB values, then the ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05. That offset is why black on white is exactly 21:1 and white on white is exactly 1:1.

The important consequence is that the calculation depends on the actual rendered colours. A translucent element, a gradient or text over an image does not have one fixed ratio, which is why the WCAG guidance asks for a solid or sufficiently opaque overlay behind text over imagery.

Fixing a failing pair without a redesign

Saturated brand colours tend to land around 3:1 against white, which passes for large text and fails for body copy. The usual fix is to derive a darker tint of the same hue for text and keep the original colour for large elements, icons and accents.

The other common cause is a link colour. Links are usually the first thing to fail because they inherit the brand colour, and the person who chose that colour is rarely looking at it against a light background.

• Keep the brand colour for large text and non-text accents.
• Derive a darker variant of the same hue for body copy and links.
• Check the disabled, hover and focus states too — they often fail even when the default passes.
• A text shadow does not count towards the ratio.

Test the states, not just the default

A design system that passes in its default state can fail in four others. Placeholder text is the usual offender, since it is usually lighter than the value it replaces, and a disabled control is often deliberately low-contrast.

Disabled elements are exempt from the requirement, since disabled controls are not required to be perceivable. Placeholder text is not exempt, because it carries information the user needs.