Choosing colours that everyone can read
By The AsasWeb team 1 min read
WCAG requires a contrast ratio of at least 4.5 to 1 for body text and 3 to 1 for large text and interface elements. The reliable way to meet those targets is to build them into the palette from the start, pick a dark ink and a light surface that pass comfortably, then verify every colour pair with a contrast tool. Never signal anything by colour alone, and check dark mode separately, because a palette that passes on white can fail on near black.
Low-contrast text looks elegant in a design tool and disappears in real life: in sunlight, on a cheap screen, or to anyone with reduced vision. Accessible colour is not about dulling your brand. It is about making sure people can actually read it.
Know the targets
WCAG sets clear minimums. Body text needs a contrast ratio of at least 4.5 to 1 against its background. Large text, from around 24 pixels, and user-interface elements need at least 3 to
- These are floors, not goals, and they are easy to check with any contrast tool.
Build contrast into your palette
The trick is to design the palette around these targets from the start, rather than discovering failures at the end. Pick a dark ink and a light surface that pass comfortably, then choose accent colours that work as both text and fills. On this site, every colour pair is documented with its measured ratio, so nothing slips through.
Do not rely on colour alone
Colour should never be the only way you signal something. A required field, an error, a link in a paragraph: each needs a second cue such as text, an icon, or an underline. People who do not perceive colour differences still need the message.
Mind dark mode
A palette that passes in light mode can fail in dark mode, where a brand colour that looked fine on white may be too dim on a near-black surface. Each theme needs its own checked values.
We treat contrast as a measured number, not a guess. If you are not sure your brand colours pass, start a project and we will audit them and find a palette that is both on-brand and readable.