Colour choices and contrast in web design

Colour and contrast are two different jobs, and treating them as one is how a great deal of on-brand, low-contrast website copy keeps getting built and keeps losing readers who never bother to say why they left. Colour sets mood, signals a brand, and creates visual hierarchy. Contrast decides something much blunter: whether the text sitting on top of that colour can physically be read.

A palette can be beautifully chosen and still fail at the second job, and a website that fails at the second job loses readers silently — nobody submits a complaint about hard-to-read grey text on a pale background, they just leave, and the business never learns why.

Why contrast is not an aesthetic preference

Contrast is a measurable relationship between the brightness of text and the brightness of what’s behind it, and it affects real readers under real conditions long before it becomes a legal question. Someone reading on a phone outdoors, someone in their sixties or seventies with reduced contrast sensitivity that is a normal part of ageing vision, and someone with low vision or colour vision deficiency are all affected by the same low-contrast choice, and together they are a meaningful share of any Australian business’s actual customer base — not an edge case being accommodated as a courtesy.

That’s the design argument for contrast, and it stands on its own without reference to any statute: low contrast loses readers, full stop, regardless of whether anyone ever raises it as a rights issue.

Where the legal obligation sits, and where it doesn’t

Contrast also happens to be one of the specific things assessed under WCAG, the technical standard used in Australia to demonstrate whether a website meets the obligations that flow from the Disability Discrimination Act. This page is not the place for that legal detail — website accessibility in Australia covers the Act, the conformance levels, and what an automated scan can and can’t tell you about your own site, and it should be read directly rather than summarised again here.

What belongs on a design page is the practical consequence: contrast is one of the cheapest, most mechanical things to get right during design, and one of the most expensive to retrofit once colours are locked into a brand guideline, a component library and months of published pages.

The palette decisions that actually need thinking through

Text on a coloured background. Any button, banner or callout with coloured text on a coloured fill needs its own contrast check — brand colour pairs that look fine as swatches side by side often fail once one becomes small body text on the other.

Placeholder text in form fields. A very common failure: pale grey placeholder text that looks intentionally subtle in a design mockup and is functionally invisible to a meaningful share of real users once it’s live, especially once it’s the only guidance a field carries.

Links inside body copy. A link that is distinguished from surrounding text only by a slightly different shade of the same colour, with no underline and no weight change, fails for colour-blind readers and for anyone glancing quickly rather than reading closely.

Large text versus small body text. A large heading generally reads acceptably at a slightly lower contrast ratio than the same colours would need for small paragraph text, because bigger letterforms are easier for the eye to resolve — a useful practical rule when a design uses a bold, low-contrast colour for a big statement heading but should not extend that same pairing to a caption or a footnote.

Disabled or “coming soon” states. Deliberately faded text is often the single lowest-contrast element on an entire site, precisely because low contrast is being used on purpose to signal “not available” — worth a specific look rather than an assumption it’s fine because it’s meant to look muted.

A simple way to review a palette before you approve it

Check	How to do it without special tools
Body text on its background	Squint at the page, or view it in greyscale — if the text nearly disappears, contrast is too low
Coloured buttons	Check the exact text-on-fill pairing at the actual button size, not the swatch size
Links in paragraphs	Confirm they’re distinguishable by more than colour alone — underline, weight, or an icon
Placeholder and helper text in forms	Read the form on a phone outdoors before approving it
Any pairing that looks borderline	Run it through a free online contrast checker and read off the actual contrast ratio rather than guessing

None of this requires expensive tooling to catch at review stage; a plain black-on-white or white-on-black pairing is the safe reference point to compare a borderline colour against, and a contrast checker confirms the actual number rather than a visual impression — it requires actually looking at real content in real conditions rather than approving a colour board in isolation.

Colour as brand signal versus colour as reading surface

A brand’s signature colour doesn’t have to double as the colour of every piece of body text on the site. It’s entirely reasonable — and often the better choice — for a brand colour to anchor buttons, headings and accents, while the actual paragraph text sits in a separate colour chosen specifically because it reads well at length. Forcing brand colour to carry both jobs is how a striking logo colour ends up as unreadable pale body text, when a small adjustment would have let the brand keep its identity without punishing anyone trying to read a paragraph.

What to ask before signing off a design

Ask specifically whether contrast was checked on the actual palette, not just assumed because the colours “look fine together.” Ask whether placeholder text and disabled states were included in that check, since they’re the two places contrast failures hide most often. And ask, separately, whether the site’s accessibility position has been reviewed against the Act — a different question, answered on website accessibility in Australia, and one worth asking regardless of how the design conversation goes.

Why contrast problems survive design review so often

Contrast failures are easy to miss in a review meeting because a design is usually reviewed on a well-lit monitor, at close range, by someone who already knows what the text is meant to say. Under those conditions marginal contrast reads as fine, because the reviewer’s brain is filling in the gap the eye is struggling with. The failure only becomes obvious under worse conditions — a cheaper phone screen, bright outdoor light, older eyes, a moment of distraction — which are exactly the conditions a design review rarely replicates. That gap between the review environment and the real one is the specific reason contrast needs a deliberate check rather than a visual impression.

Dark mode and unusual colour contexts deserve the same scrutiny

A site that offers a dark colour scheme, or that places text over photographs and video, needs contrast checked separately in each of those contexts rather than assuming a check performed on the standard light layout covers every situation the same text might appear in. Text overlaid on a photo is a particularly common failure point, because the image behind it varies from light to dark across its own content, and a caption or heading that reads clearly over one part of an image can disappear entirely over another part of the same image.

Colour as the only signal, beyond text and links

Contrast and colour-as-the-only-signal are related but distinct problems worth naming separately. A status shown only through colour — a green dot for “available,” a red dot for “booked out,” with no accompanying label — fails for exactly the same population that low contrast fails, and for the same underlying reason: colour alone is not a reliable channel for everyone. Pairing colour with a label, an icon, or a text description costs little and closes a gap that colour by itself cannot.