Colour Contrast Without a Design Background

The requirement with a number

Most accessibility guidance requires judgement. Is this description useful, is this structure sensible, is this process navigable.

Contrast is different. There is a formula, it produces a figure, and the figure either clears a threshold or does not.

That makes it the best place to start for anybody without a design background, because you are not being asked for an opinion.

It also makes it the one requirement that ends a disagreement, since a designer's view that text looks fine and a measurement of two point one to one are not competing opinions.

The thresholds

• Body text: at least four and a half to one.
• Large text: at least three to one.
• Buttons and form borders: at least three to one.
• Icons carrying meaning: at least three to one.
• Higher standard, where it applies: seven to one for body text.

Large means roughly eighteen point or fourteen point bold, which is bigger than most headings on a small business site actually are.

The third and fourth are the ones people miss, because contrast is discussed as a text issue and a button border nobody can see is the same problem.

Checking it in your browser

The fastest route and it needs nothing installed.

Open the developer tools on any page, find the auditing or accessibility panel, and run a check.

It reports every element failing contrast, with the ratio it measured and the element it applies to, in a list you can work through.

Modern browsers also show a contrast figure when you inspect a piece of text directly, with an indication of whether it passes, which is useful when testing a single change.

For checking two colours before using them, free online checkers give the ratio instantly from two colour codes.

Where sites usually fail

The pattern repeats across almost every site that has this problem.

Body text set in a mid or light grey because black felt harsh, which is the single most common failure and usually lands around three to one.

Placeholder text in form fields, which is deliberately faint and frequently unreadable.

Text over photographs, where it passes on the dark part of the image and fails on the bright part.

A brand colour used for links or buttons, chosen for a logo on white card rather than for small text on screen.

And disabled or secondary buttons, greyed until they are effectively invisible.

The brand colour problem

The one that produces genuine tension, because it is not a mistake so much as a conflict.

A brand colour chosen years ago for print may simply not have enough contrast against white for body text or small buttons.

The instinct is to conclude that accessibility and brand are opposed, which is usually not true.

The resolution is that the brand colour does not have to be the text colour. Keep it for large headings, backgrounds, borders, and decorative use where the threshold is lower or does not apply, and use a darker version of the same hue for text.

A darkened variant is still recognisably your colour, and most brand guidelines already contain one or can accommodate it without anybody feeling the identity has been compromised.

A worked example

A firm had body text in a light grey and a brand blue used for all links and buttons.

The browser audit reported forty-one failing elements across the homepage, which sounded like a redesign.

Grouped, it was two colour values used repeatedly.

They darkened the body text from a light grey to a dark one, taking it from about three to one to over twelve, and introduced a darker variant of the brand blue for text and small elements while keeping the original for large headings and background panels.

Two values changed in the stylesheet.

The audit came back with two failing elements, both in a third-party widget.

Nobody outside the business noticed the design had changed, and several people mentioned the site had become easier to read without knowing why.

Never rely on colour alone

A separate requirement that sits alongside contrast and is easy to fail while passing every ratio.

A required field marked only by red text, a chart where the lines are distinguished only by hue, a status shown only as a green or red dot, or a link identified only by being a different colour from the surrounding text.

Each of those is invisible to a substantial number of people, including many who would not describe themselves as having a vision impairment.

The fix is to add a second signal: an asterisk and the word required, labels on the chart, an icon beside the status, and underlines on links within body text.

Underlined links in particular were removed from a great many sites on aesthetic grounds, and putting them back inside paragraphs is one of the cheapest improvements available.

Check it on a phone, outdoors

The measurement is a laboratory figure and real conditions are worse than the laboratory.

A ratio that passes at four point six to one on a bright monitor in an office can be genuinely hard to read on a dimmed phone screen in daylight.

The thresholds are minimums rather than targets, and there is no penalty for exceeding them comfortably.

Where you have a choice between just passing and clearly passing, take the second, because the people who benefit are not only the ones the requirement was written for.

The counter-case

Maximum contrast everywhere is not the goal and can be worse.

Pure black on pure white at high brightness is uncomfortable for some readers, particularly people with dyslexia or light sensitivity, and a very dark grey on an off-white background is easier on the eye while still clearing the threshold comfortably.

There is also a category of element the requirement does not apply to: purely decorative text, logos, and inactive controls are treated differently, and chasing a ratio on those is effort spent for nothing.

The target is comfortable legibility rather than the highest possible number, and the threshold is a floor to clear rather than a score to maximise.

The check

1. Run the browser audit on your homepage.
2. Group the failures by colour value, not by element.
3. Darken body text first, which fixes most of them.
4. Add a darker variant of your brand colour for text.
5. Check buttons and form borders, not only text.
6. Add a second signal anywhere colour carries meaning.
7. Look at it on a phone outdoors before finishing.

Step two is what turns an alarming report into two stylesheet changes.

Colour carrying meaning is covered in colour that carries meaning on its own.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.