Practice & Presence
People, practice & public presencePeople · Websites · Communication
Website guides

Website text contrast: check the quiet details too

Pale captions, form hints and text over photographs can undermine an otherwise readable site. Here is a practical way to review them.

Dark metal Celine lettering against a textured pale stone wall.
Shop lettering on Collins Street, Melbourne, photographed in 2019. An illustration of letters against a background, not a WCAG assessment of the sign or brand. Unsplash License.Photography by Mitchell Luo · Original collection ↗

Look beyond the headline

A website can have a bold, readable title and still be difficult to use. The weak points are often the small details: pale image credits, a form hint, an inactive-looking link or text placed over a changing photograph. These elements tend to escape review because they appear visually secondary.

Start with an inventory of text styles on a real page. Include body copy, navigation, buttons, captions, form labels, placeholder text and validation messages. Review the combinations actually displayed, not only the colours listed in the brand guide.

Source: W3C: understanding minimum text contrast.

Use a measured contrast check

The W3C explanation of WCAG’s minimum contrast criterion specifies at least 4.5:1 for ordinary text and 3:1 for qualifying large text. Large text means at least 18 point, or 14 point when bold; a heading is not automatically large merely because it is a heading.

Use a contrast checker with the foreground and background colours. Keep the full result rather than rounding a near miss into a pass. A brand colour used in body copy is still body copy: the exception for a logotype does not extend to every sentence written in the brand palette.

Be careful with photographs and overlays

Text over a photograph needs a reliable background wherever the letters sit. A dark patch behind the first word does not help the final word if it crosses a bright window. Test the mobile crop too, because the image may shift beneath the text.

A solid panel, a stronger overlay or moving the text beside the photograph may solve the problem with less visual fuss. Keep the image visible where it tells the story, but do not make the reader decode essential instructions from a busy surface.

Review states, not just a static screenshot

Check links and controls when focused, hovered, selected and showing an error. Read the smallest text at normal size on a phone. Ask whether the intended hierarchy remains clear after improving contrast; readable secondary information can still be visually restrained.

Passing this contrast check addresses one part of accessibility. It does not verify keyboard access, form behaviour, meaningful structure or every other requirement. Record the colours and components reviewed, then make those combinations the default so the same problem does not return with the next page.

Project & further reading

W3C: understanding minimum text contrast ↗

More stories

The journal ↗