Accessible colour contrast without killing your palette
Design · 5 min read
Accessible contrast is often treated as a constraint that fights against good design, something you check at the end and grudgingly fix. It works far better as an input to the palette from the start, because most contrast problems are cheap to solve early and expensive to patch later.
What the contrast guidelines actually require
The Web Content Accessibility Guidelines set a minimum contrast ratio of 4.5 to 1 between normal body text and its background, and a lower minimum of 3 to 1 for large text, generally meaning text at roughly 18 point or larger, or 14 point bold. Non-text elements like icons and form field borders that convey meaning also have a 3 to 1 minimum against adjacent colours.
These ratios are calculated from the relative luminance of the two colours, not simply how different they look at a glance. Two colours that look quite different to the eye can still fail the ratio if they are both mid-tone, which is why a proper check matters more than a visual guess.
Why brand colours often fail contrast checks
Brand palettes are frequently built around a single mid-tone signature colour, chosen for its vibrancy rather than its contrast behaviour. Mid-tone colours are exactly the ones most likely to fail against both white and black backgrounds, because they are not light enough to sit safely on dark text or dark enough to sit safely under light text.
This is not a reason to abandon a brand colour. It is a reason to build a small range of lightness variants of that colour early, so you always have an accessible option available rather than forcing the single brand swatch into every context.
Building a palette with contrast built in
For every core colour in your palette, generate at least one variant dark enough to use as text on a light background, and one light enough to use as text on a dark background. Keeping the hue constant and only adjusting lightness, ideally in a perceptually even space like OKLCH, keeps these variants feeling like the same colour family.
Document the resulting pairs directly, such as 'brand-700 on white passes for body text' and 'brand-100 on brand-900 passes for large text', so designers and developers do not have to re-derive safe combinations every time they use the colour.
Checking contrast without guesswork
Never rely on eyeballing contrast, even from experienced designers, because perceived contrast is affected by surrounding colours, screen brightness and the size of the text sample. Use a dedicated contrast checker or a colour converter that surfaces the contrast ratio alongside the colour values, and check every meaningful text and background pairing before shipping.
It is worth checking contrast at the actual font weight and size that will ship, not a bold heading treatment used as a stand-in for smaller body copy, since the large-text exception genuinely changes the required ratio.
Handling contrast in dark mode separately
Dark mode is not simply an inverted version of light mode, and colours that pass comfortably in light mode often fail once backgrounds turn dark, because the relative luminance relationship changes. Treat dark mode as its own contrast pass rather than assuming a straightforward inversion will carry the guarantees across.
Saturated colours in particular tend to look harsh and can fail contrast more easily on dark backgrounds. Slightly desaturating and lightening brand colours for dark mode usually improves both the contrast ratio and the visual comfort of the palette.
Contrast for non-text elements
Buttons, form field outlines, focus indicators and icons that carry meaning also need to meet the 3 to 1 minimum against their immediate background. This is an easy category to miss because it is not covered by the same review checklist people use for body text and headings.
Focus indicators deserve particular care, since keyboard users rely on them entirely to know where they are on the page. A subtle one-pixel outline in a colour close to the background will often fail contrast even if it looks fine to a sighted mouse user glancing casually at the screen.
Working with clients or stakeholders who resist changes
When a stakeholder is attached to a specific brand colour that fails contrast in a given context, the easiest path is usually not to change the colour itself but to change where it is used. Keep the exact brand swatch for large decorative elements, logos and big headings where the large-text exception or non-text status applies, and use a passing variant specifically for body copy and small text.
Framing this as 'the same colour family, used correctly for different contexts' tends to land better than framing it as a compromise on brand identity, because it genuinely is not one.
Testing beyond the numbers
Passing a contrast ratio is a minimum, not a guarantee of genuine readability. Long paragraphs benefit from contrast noticeably above the 4.5 to 1 minimum, and colour combinations that technically pass can still cause visible strain for some users with low vision or certain forms of colour blindness.
Where practical, view your palette through a colour blindness simulation and read a full paragraph at actual reading distance rather than checking a single word in isolation. Numbers on a checker only tell part of the story.
Keeping the system maintainable
Store your verified accessible pairings as named design tokens, such as 'text-on-light' and 'text-on-dark', rather than leaving each designer to re-check raw colour values individually. This turns a one-time accessibility audit into a system that keeps producing accessible results as the product grows.
Common questions
- What contrast ratio do I need for body text?
- WCAG requires a minimum ratio of 4.5 to 1 between normal body text and its background. Large text, generally around 18 point or larger, or 14 point bold, has a lower minimum of 3 to 1, reflecting the fact that bigger text remains legible at somewhat lower contrast.
- Can I keep my brand colour if it fails contrast?
- Usually yes, by generating a darker or lighter variant of the same hue specifically for text use, while keeping the original swatch for large decorative elements or backgrounds where the stricter text ratio does not apply. This preserves brand identity while meeting accessibility requirements where it actually matters.
- Does dark mode need a separate contrast check?
- Yes. Contrast ratios depend on the actual luminance relationship between text and background, which changes substantially in dark mode, so colours that pass in light mode cannot be assumed to pass once the background is dark. Check dark mode combinations independently.
- Do buttons and icons need to meet the same contrast rules as text?
- Non-text elements that convey meaning, such as button boundaries, form field outlines, and meaningful icons, need a minimum contrast ratio of 3 to 1 against their adjacent background, which is a separate and often overlooked requirement from the text-specific ratios.
- What is the easiest way to check a colour pairing quickly?
- Use a colour converter or contrast checker that displays the contrast ratio alongside the colour values, and test the actual font size and weight that will ship. Avoid relying on visual judgement alone, since perceived contrast is unreliable and varies by screen and surrounding colours.