Colour Contrast for Accessible Websites: A WCAG 2.2 Guide

What the contrast ratio measures

A contrast ratio compares the relative luminance, or perceived lightness, of two colours. It runs from 1:1, where the colours are identical, to 21:1, which is black on white. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter colour and L2 that of the darker one, but you never need to work it out by hand: every contrast checker does it for you.

Good contrast helps people with low vision or colour vision deficiencies, and it also helps anyone reading on a phone in sunlight or on a dim, inexpensive screen. The Web Content Accessibility Guidelines (WCAG) 2.2, published by the W3C, set the reference values, and many accessibility laws and procurement rules point to level AA. The contrast criteria are unchanged from WCAG 2.1, so a pass under one is a pass under the other.

The WCAG 2.2 contrast requirements

Two success criteria at level AA cover most of what you need. Contrast (Minimum), criterion 1.4.3, applies to text and images of text. Non-text Contrast, criterion 1.4.11, applies to the parts of interface components and graphics that people need to see in order to use or understand the page, such as field borders, icons and chart lines.

Some things are exempt: text in logos and brand names, purely decorative elements, text that is incidental to a photograph, and inactive, disabled controls. Ratios are also not rounded. A pair that measures 4.49:1 fails the 4.5:1 requirement, so if your tool shows a rounded figure, check the unrounded value before you call it a pass.

How to check contrast

Start with your colour palette or design tokens rather than individual pages. List every text colour and the backgrounds it sits on, plus border, icon and focus colours, and check each pair once. A free online checker such as the WebAIM Contrast Checker accepts hex values, while the TPGi Colour Contrast Analyser is a free desktop app with an eyedropper for sampling colours anywhere on screen.

Then check the live site. In Chrome DevTools, the colour picker for a text colour in the Styles pane shows its contrast ratio, and the Firefox Accessibility Inspector can flag contrast issues across a page. Automated audits such as Lighthouse or axe catch many failures quickly, but they cannot reliably judge text over images or gradients, so sample those by hand at the lightest point behind the text.

• Default, hover, focus, visited and selected states, not just the default
• Placeholder and helper text in forms
• Text on images, videos, gradients and coloured cards
• Dark mode and any other themes, checked separately
• Charts, maps and icons that carry meaning

Fixing the most common failures

Light grey body text is the classic failure: #999999 on white measures about 2.85:1. The lightest neutral grey that passes 4.5:1 on white is #767676, at about 4.54:1. Placeholder text often fails in the same way, and because it disappears when someone types, it should never be the only label anyway. Very light input borders, such as #DDDDDD on white, fail the 3:1 requirement when the border is the only thing that shows where the field is.

Brand colours cause the next biggest group of problems. White text on mid-tone orange, yellow, light green or teal often falls well short of 4.5:1. The usual fix is a darker shade of the same hue for text and buttons, while the original colour stays in illustrations, large headings or decorative shapes. For text over photographs, add a solid or semi-transparent overlay behind the text rather than relying on the image.

Worked example: a palette that fails, then passes

Juniper & Moss, a fictional online plant shop, ran a contrast audit before relaunching its website. Its soft grey body text, bright green buttons and pale form borders looked calm in the mock-ups, but none of them met level AA. The team kept the brand’s character by darkening each colour only as far as needed, then checked the unrounded ratios again before signing off. The result looks almost identical at a glance, yet every text and control colour now meets the level AA ratios on the shop’s white background.

Focus indicators, states and colour alone

WCAG 2.2 pays closer attention to keyboard focus. A focus indicator shows a state, so it should reach at least 3:1 against the colours next to it, and the new criterion Focus Not Obscured (Minimum) means sticky headers and banners must not completely hide the focused element. A two-pixel outline in a dark colour, offset slightly from the element, works on most light backgrounds.

Separately, criterion 1.4.1 says colour must not be the only visual means of conveying information. An error marked only by a red border, or a link distinguished from body text only by its colour, can be missed entirely by people who do not perceive that difference. Add an icon and a message to errors, and underline links within paragraphs.

Make contrast part of your process

Contrast is far cheaper to fix in a design system than on a live site. Check pairs when you define colour tokens, record approved text and background combinations in your style guide, and add an automated accessibility check to your release process so regressions are caught early. You may see a newer method called APCA discussed for the future WCAG 3; it is not part of WCAG 2.2, so audits and most legal requirements still use the ratios above. The UX Basics: From Research to Prototype course covers contrast alongside keyboard access, labels and usability heuristics, and builds these checks into your wireframes.