Colour and contrast

Colour contrast is a measurable ratio between text and its background, defined precisely enough that a tool can calculate it — it is not a matter of design taste, and “it looks fine to me” is not a substitute for the actual number.

The specific ratios WCAG 2.2 requires

Content type	Minimum contrast ratio (Level AA)
Normal body text	4.5:1
Large text (approximately 18pt, or 14pt bold, and larger)	3:1
User interface components and graphical objects that convey information	3:1
Decorative elements with no informational function	No requirement

These text figures come from Success Criterion 1.4.3 in WCAG 2.2; the separate 3:1 requirement for user interface components and graphical objects comes from Success Criterion 1.4.11 (Non-text Contrast), a distinct criterion. Both are calculated from the actual colour values involved — free tools exist that calculate this ratio instantly from a hex colour code, removing any subjectivity from the check.

Show the numbers behind this chart

The WCAG 2.2 contrast ratios that apply to a website, by content type and conformance level. WCAG 2.2 requires a 4.5 to 1 contrast ratio for normal body text at Level AA, 3 to 1 for large text at Level AA, and 3 to 1 for user interface components and meaningful graphical objects at Level AA. Level AAA raises the normal-text minimum to 7 to 1.

Content type and level	Minimum contrast ratio	WCAG 2.2 success criterion
Normal body text — Level AA	4.5:1	SC 1.4.3
Large text (~18pt, or 14pt bold, and larger) — Level AA	3:1	SC 1.4.3
UI components & meaningful graphical objects — Level AA	3:1	SC 1.4.11
Normal body text — Level AAA	7:1	SC 1.4.3

Why low-contrast design choices are common despite the clear requirement

Light grey text on a white background, or pale colour combinations chosen for a minimalist aesthetic, are a recurring pattern in web design specifically because they look clean and modern to a designer with typical vision viewing a well-lit screen in a controlled setting. The same combination is frequently illegible to a user with low vision, to anyone viewing the screen in bright sunlight, or simply to an older user whose contrast sensitivity has changed with age. The aesthetic appeal and the accessibility failure are the same design choice, viewed from two different situations.

The separate rule: colour alone cannot carry meaning

Beyond the contrast ratio itself, WCAG’s Success Criterion 1.4.1 requires that colour is not the only visual means of conveying information — a form field marked as an error using only a red border, with no icon, text or other indicator, fails this even if the red itself has adequate contrast against its background. This specifically affects colour-blind users, who may perceive the colour distinction poorly or not at all regardless of the underlying contrast ratio. A red-versus-green status indicator with no additional text, icon or pattern is one of the most common failures of this specific rule.

How to actually check colour contrast with a contrast checker

Use a free contrast-checking tool — a contrast checker: enter the hex code of the text (foreground) colour and the background colour, and it returns the calculated ratio directly against the WCAG thresholds. A colour picker built into the same tool is often the fastest way to get the exact hex code off a design file in the first place, rather than reading it manually off a swatch. This is one of the few accessibility checks that a non-technical business owner can perform accurately without specialist tools, because it is purely mathematical rather than a matter of judgement — unlike most WCAG criteria, which need a person’s judgement rather than a calculation, covered on what automated scanners can and cannot find.

AA is the practical floor; AAA exists for sites that want to go further

Everything above states the Level AA thresholds, which is the level this page and most Australian accessibility guidance treats as the practical floor. A stricter Level AAA standard also exists, raising the normal-text minimum to 7:1, and some organisations — particularly government and larger institutions — adopt it deliberately. For most small-business sites, meeting AA reliably across the whole site is a more valuable use of effort than chasing AAA on a handful of pages while other pages remain untested.

Where contrast problems typically hide on an otherwise reasonable site

Placeholder text inside form fields, which is very often styled in a low-contrast grey by default across many web frameworks. Text overlaid on background images, where contrast varies depending on which part of the image sits behind it. Buttons and links using a brand colour that happens to have poor contrast against its background. And disabled-looking form states, which are sometimes styled so faintly they become illegible rather than merely visually distinct from an active state.

What this means for choosing a brand colour palette

A brand’s primary colour, chosen for marketing and visual identity reasons, does not always meet the contrast ratio required when used as text against a common background. Rather than abandoning the brand colour, a workable resolution is usually using it for larger elements, backgrounds or accents where the stricter text-contrast rule doesn’t directly apply, while choosing a sufficiently dark or light variant for any actual body text. This is a design decision to make deliberately at the brand-application stage, not a constraint discovered after launch.

Contrast for non-text elements, a frequently missed category

Beyond text, WCAG 2.2 also sets a contrast requirement for user interface components and meaningful graphical objects — a button’s border, a form field’s outline, an icon conveying information — at a 3:1 ratio against its adjacent background, under Success Criterion 1.4.11 (Non-text Contrast). This category is frequently overlooked because attention naturally focuses on text contrast, leaving interface elements like low-contrast button outlines or barely visible form field borders as a common residual failure even on sites that have otherwise addressed text contrast correctly.

Dark mode, and why it needs its own contrast check

A site offering a dark colour theme in addition to a standard light one needs the same contrast ratios checked independently for the dark theme’s specific colour combinations — a palette that meets the required ratio in light mode does not automatically meet it once colours are inverted or adjusted for a dark background, and each theme needs its own verification rather than assuming compliance transfers automatically between them.

Why contrast requirements don’t conflict with brand consistency in practice

Businesses sometimes worry that accessibility contrast requirements will force a generic, constrained visual palette. In practice, the requirement is a minimum ratio between specific pairs of colours actually used together, not a restriction on the palette as a whole — a rich, distinctive brand palette can meet contrast requirements as long as the specific text-and-background combinations chosen from within it are tested and adjusted where needed, rather than assuming every possible combination within a palette will automatically pass.

What to do next

Check your primary text and background colour combinations against the 4.5:1 (normal text) and 3:1 (large text, and UI components) thresholds using a free contrast-checking tool, and audit anywhere colour alone currently conveys meaning — error states, status indicators — for a non-colour backup signal. Where colour choices sit within the broader visual design of a build, website design services as a purchase covers where this decision fits in a project.