Accessible Colour Contrast: A Practical Guide
An accessible colour palette is a set of tested relationships between foregrounds and backgrounds. A green can work well as a surface and still be unsuitable for small text on a different surface. Begin with the combinations a reader will actually encounter, rather than approving each swatch on its own.
WCAG 2.1 Success Criterion 1.4.3 sets an AA minimum of 4.5:1 for normal text and 3:1 for large text. Large text means at least 18 point, or 14 point when bold. There are exceptions, including logotypes and some incidental text. A passing result for a logo does not make nearby navigation or body copy exempt.
Start a palette audit by listing five roles: page background, main text, secondary text, links, and action buttons. For every role, record the actual background, the font size, and the measured contrast ratio. Treat a button label as a text/background pair of its own. Checking only the page's dominant heading misses the places where people often struggle.
Next, examine real states. A link may be clear before it is visited and faint afterwards. A secondary label may disappear when a card is placed on a tinted panel. A background image may change the contrast beneath a caption. Use the colours as implemented in the interface, and test representative content rather than an isolated palette document.
If a combination fails, adjust the relationship before expanding the palette. Darken the text, lighten the background, or use a stronger colour for small labels. Do not assume that increasing saturation will solve a lightness problem. Decorative accents can stay expressive while reading surfaces remain calm and dependable.
Finally, give each approved combination a name and an example. A token such as text-secondary-on-paper is more useful than a colour name that says nothing about its role. Include an example of incorrect use as well. The goal is a small system that makes the readable choice easy to repeat, not a one-time score on a checker.
Common questions
What contrast ratio does normal text need?
WCAG 2.1 SC 1.4.3 requires at least 4.5:1 for normal text, with defined exceptions. Large text requires at least 3:1.
Does an accessible palette guarantee an accessible website?
No. Contrast is one requirement. Keyboard access, labels, focus visibility, structure, and alternative text need their own checks.
Comments (0)
- No comments yet. Start the conversation.
Font Pairing for Websites: Start with Roles
A practical way to combine headline, body, and interface type without turning every page into a different visual system.
What Should a Small Business Brand Guide Include?
Build a useful brand guide around logo usage, accessible colours, type roles, image direction, and the decisions your team makes every week.
Design System vs Style Guide: What Is the Difference?
Understand the difference between visual rules, reusable components, and the processes that keep a digital product consistent.