Accessible Colour Contrast Without Ruining Your Brand Palette
By ABD Web Tools Editorial · 2026-02-26 · 7 min read
Colour contrast is the difference in perceived brightness between text and its background, expressed as a ratio from 1:1 to 21:1. It matters because a meaningful share of your readers have reduced contrast sensitivity, and because everybody reads phones outdoors. The good news is that the rules constrain a small number of decisions and leave your palette largely intact.
The thresholds you need to remember
There are only a few, and they depend on text size and purpose.
- 4.5:1 for normal body text at AA.
- 3:1 for large text — roughly 24px, or 19px bold.
- 3:1 for meaningful interface components and focus indicators.
- 7:1 for body text if you are targeting AAA.
- No requirement for purely decorative graphics or disabled controls.
Where brands usually fail
Three patterns account for most failures: light grey placeholder and helper text, brand-coloured buttons where white label text sits on a mid-tone fill, and text placed over photographs where the ratio changes across the image.
None of these require abandoning the brand colour. They require a second, darker variant of it reserved for text and small interface elements.
Advertisement
Keeping the palette and passing anyway
Build a small ramp of each brand colour — five to nine steps from light to dark — and assign roles rather than picking freely. Large fills and decorative surfaces use the mid-tones you love; text and icons use the darkest steps. The brand still reads as itself because hue is preserved, while luminance does the accessibility work.
For text over images, add a gradient scrim behind the text rather than lightening the image, so the ratio is guaranteed regardless of which photo is used.
Do not rely on colour alone
Contrast is only half of it. Error states need an icon or text label as well as red; links inside body copy need underlines, not just a different hue; charts need patterns or direct labels so two similar series remain distinguishable in greyscale.
Checking it as part of the workflow
Test the combinations once when you define the design tokens, not page by page afterwards. Record every approved pairing in the style guide, and re-check the whole set after any palette change or dark-mode addition, since dark themes usually need different steps of the ramp.
Frequently asked questions
Does contrast apply to logos?
No. Logotypes and purely decorative imagery are exempt, though a logo used as functional navigation should still be clearly visible.
Is pure black on pure white ideal?
It passes easily but can feel harsh on bright screens. A very dark grey on an off-white background is comfortable and still well above the threshold.
How do I handle dark mode?
Recalculate every pairing. Colours that pass on white often fail on a dark surface, and light text on saturated colour usually needs a different step of the ramp.
Do placeholder texts need to pass?
Yes, if they carry information. The safer pattern is a persistent visible label with the placeholder used only for example formatting.
Advertisement
