Colour contrast for designers, the Australian guide

Colour contrast is the most-failed WCAG criterion across audits we run, and it is also the most fixable. Most failures are decisions made in a Figma file at the start of a brand refresh, then propagated unchanged through the build. This guide covers what the ratios actually mean, how to measure them, and how to keep a brand identity intact while passing AA.

The two ratios you need to know

WCAG 1.4.3 Contrast (Minimum) at AA requires:

4.5 to 1 for normal-size text (under 18 point regular, or under 14 point bold).
3 to 1 for large text (18 point regular and above, or 14 point bold and above) and for non-text user-interface components such as buttons, form borders, focus indicators and icons that convey meaning.

WCAG 1.4.6 Contrast (Enhanced) at AAA raises these to 7:1 and 4.5:1 respectively. Most public services target AA; sites for audiences with high low-vision rates (aged-care, disability advocacy) often target AAA.

What contrast ratio actually measures

The ratio is calculated from the relative luminance of two colours, where luminance is a weighted sum of the gamma-corrected red, green and blue channels. Pure black on pure white scores 21:1. Identical colours score 1:1. The ratio is symmetric: light text on dark background and dark text on light background give the same number.

Measuring contrast on real screens

The Figma plugin "Stark" or "A11y Color Contrast" gives you ratios inside design files. The Chrome DevTools Colour Picker shows ratios live on a deployed site. Mac built-in Digital Color Meter plus a manual ratio calculator works for video and PDF.

The trap: the value shown in your design tool is calculated from the source colour values, not from what actually renders on screen. On low-end laptops, colour temperature shifts, non-sRGB displays, and OS dark-mode invert filters can shift effective contrast by 10 to 15 percent. Always validate on at least one secondary device.

Keeping brand identity intact at AA

Most "we cannot pass AA without ruining the brand" objections fail under inspection. The real constraints are usually three colours: a brand primary used as a button background, a brand secondary used for muted text, and a brand accent used for icons.

Brand primary as button background

If your brand primary is a mid-tone colour (most are), pair it with white text. Most mid-tone brand colours pass 4.5:1 against white. If your primary is yellow, pale green, light blue or anything with high luminance, pair it with dark text instead.

Brand secondary as muted body text

This is where most sites fail. A "muted grey" set at #999999 on white gives 2.85:1, which fails. Adjust to #767676 for 4.54:1 or #6e6e6e for 5:1. The visual difference at body-text size is barely perceptible; the contrast difference is large.

Brand accent on coloured backgrounds

Icons that convey meaning (success ticks, warning triangles, error crosses) need 3:1 against their background. A pale-pink error on white scores under 3:1; a deep-red error scores well above. Deeper accent colours generally pass without redesign work.

Working pattern, brand-safe

Establish two derived shades for every brand colour: one with at least 4.5:1 against white, one with at least 4.5:1 against your darkest brand background. Use the original brand colour for decorative use only (large illustrations, hero panels, brand marks above 18 point), and use the derived shades anywhere text or interactive components meet that colour.

Three patterns that pass AA without compromise

Inverse text on saturated brand

White text on a saturated brand button works for almost any mid-tone hue. Confirm 4.5:1 with a checker, but most blues, greens, purples and reds pass.

Dark text on tint backgrounds

Use a 5 percent or 10 percent tint of your brand colour as a panel background. With your standard body-text dark grey on top, contrast usually exceeds 7:1 and the brand identity is still present.

Outline rather than fill

Where a brand colour is too light to host text at AA, use it as a 2-pixel border or outline rather than a fill. The control reads as branded; the text inside sits on white at full contrast.

Common failure cases on Australian sites

Pale-grey placeholder text in form fields. Default browser placeholders typically render at 1.6:1 to 2:1.
Light-grey "ghost" buttons used for secondary actions. Often 2:1 to 2.5:1.
Disabled-state buttons using brand colour at 40 percent opacity. Disabled controls are exempt from contrast at WCAG 2.1, but reasonable contrast supports cognitive accessibility for users with limited vision.
Footer text in dark grey on charcoal background. Usually fails by 0.3 to 0.5 ratio points; small adjustment fixes it.