Colour Contrast and Accessibility: Meeting WCAG Requirements on Your Website

Contrast ratio might sound like a technical concept, but its effect is simple: if the text on your website doesn’t stand out sufficiently from its background, people with low vision, colour blindness, or age-related sight changes can’t read it. And it’s not just users with diagnosed conditions — anyone trying to read your site in bright sunlight or on a low-quality screen is affected by poor contrast.

WCAG 2.1 sets specific contrast ratio requirements that give designers a measurable target. Many websites — even professionally designed ones — fail these requirements, often because designers check colours in isolation rather than as they actually appear on screen. This guide explains how contrast ratios work, what the requirements are, and how to test and fix your site.

Understanding Contrast Ratios

A contrast ratio is a number between 1:1 (no contrast — identical colours) and 21:1 (maximum contrast — pure black on pure white). It’s calculated from the relative luminance of the two colours, which is a measure of how much light they emit or reflect rather than simply how different they appear. This is why some colour combinations that look obviously different to a person with typical colour vision — like red text on a green background — can have a poor contrast ratio and be unreadable to people with colour blindness.

WCAG 2.1 Level AA requires: at least 4.5:1 for normal text (under 18pt or 14pt bold); at least 3:1 for large text (18pt or larger, or 14pt bold); at least 3:1 for user interface components and graphical objects (form borders, chart lines, icons). Level AAA raises these thresholds to 7:1 for normal text and 4.5:1 for large text. Most private-sector websites target Level AA.

How to Check Your Site’s Contrast

The fastest way to check contrast ratios is the WebAIM Contrast Checker at webaim.org/resources/contrastchecker. Enter the foreground and background hex colour codes and it calculates the ratio instantly. The browser extension Axe DevTools checks contrast across your entire page automatically and flags failures with the specific elements involved. Chrome DevTools also surfaces contrast issues in the Accessibility pane when you inspect an element.

When checking, be thorough — don’t just check your main body text. Check: navigation links, buttons, placeholder text in forms (often light grey and frequently fails), small print, footer text, labels in charts and graphs, icon-only buttons (the icon must meet the 3:1 threshold), and text overlaid on images. Text over images is particularly risky — the contrast may pass over one part of the image and fail over another. Use a solid semi-transparent overlay behind text to guarantee contrast regardless of the image beneath.

Fixing Contrast Issues Without Ruining Your Design

The most common resistance to fixing contrast issues is the belief that it will compromise the brand or design aesthetic. In practice, contrast improvements rarely require major design changes — most fixes involve darkening a text colour slightly, lightening a background, or both. The key is to use a contrast checker in the design phase rather than retrofitting after launch, when layout changes are more disruptive.

Common fixes: darken mid-grey body text (e.g. change #999999 to #767676, which is the minimum passing grey on white), use a slightly darker tint of your brand colour for text overlaid on light backgrounds, add a darker border to form fields with light-grey borders, and ensure disabled-state text still meets 3:1. When in doubt, test your palette adjustments with a colour blindness simulator (such as the Coblis tool) to check they work across the most common forms of colour blindness. At Xpose, we run a contrast audit on every design mockup before a site goes into development.