Contrast on a Coloured Button

Two requirements, not one

A coloured button has to satisfy two separate contrast checks, and most discussions only mention the first.

The text on the button against the button colour, which is the familiar requirement.

And the button itself against the page behind it, so somebody can tell where the button is.

A pale button with dark text can pass the first and fail the second, which is why a button that reads perfectly well can still be hard to find.

Why brand colours fail

• Chosen for a van, not a screen.
• Mid-range colours fail against both.
• Bright greens and oranges are the worst.
• Chosen years ago with no check.
• Chosen on a good monitor.

The second is the underlying reason. A colour dark enough for white text or light enough for black text passes easily, and a mid-tone fails both, which is exactly where most brand colours sit.

The three options

Which is the practical part, in order of preference.

First, try black text rather than white, which passes on a surprising number of mid-tone colours and requires changing nothing else.

Second, use a darker variant of the same colour for buttons only, keeping the original everywhere else.

Third, keep the brand colour as an outline or an accent and use a plain dark button for the action itself.

All three preserve the brand and none requires a rebrand, which is the objection people expect.

Check each in a contrast checker, which takes a minute per option.

A worked example

A business had a mid-green brand colour with white text on every button.

The combination measured around two and a half to one, which is well below the requirement and visibly difficult outdoors.

Black text on the same green passed comfortably and looked wrong against everything else on the page.

They darkened the green by about thirty per cent for buttons only, kept the original in the logo and headings, and white text then passed.

Nobody noticed the difference and the buttons became legible in sunlight.

The whole change was one colour value in the styling.

A darker variant is not a rebrand

Which is the argument to have ready.

Every established brand uses a family of shades rather than one value, and a darker version for interface use is entirely normal practice.

The logo, the van, and the signage keep the original.

The button, which has to carry text and be found on a screen, uses the darker one.

Nobody perceives those as different brands, and anybody who objects has usually not seen the two side by side.

Frame it as a screen version of the same colour rather than as a change, which is exactly what it is.

Check it against the page too

Since the second requirement gets forgotten.

A pale button on a white page can be almost invisible even where its text reads perfectly.

The threshold for the button shape against the background is lower than for text, and plenty of pale buttons fail it.

The same applies to input fields, whose borders frequently fail entirely, leaving somebody unable to see where to type.

Check the borders on your form fields at the same time as the buttons, since they have exactly the same problem and almost nobody ever looks at them.

Check it outdoors

Which is the test that matters for a trade.

Your customers are frequently standing in a driveway in bright sun looking at a phone.

A combination that passes a checker on a good monitor can still be hard work in that situation, and one that fails is hopeless.

Take your phone outside into direct sunlight and look at your own site, which takes two minutes and settles the question.

That test also finds pale grey body text, which is the other common failure and affects far more of the page.

The numbers, briefly

For anybody who wants them.

Ordinary text needs a ratio of at least four and a half to one against its background.

Large text, meaning roughly twenty-four pixels or eighteen pixels bold, needs three to one.

Buttons, borders, and other non-text elements need three to one against what is behind them.

Free browser tools give you the figure instantly, and you do not need to understand the arithmetic to use one.

Most browsers now show the ratio in their own developer tools when you select a colour, which removes even the need to install anything.

Do not signal anything with colour alone

A related requirement that comes up in the same conversation and is cheaper to fix.

A required field marked only by a red asterisk, a status shown only in green or red, and a link distinguished from body text only by being blue all fail for the same reason.

Somebody who does not perceive that colour difference gets nothing, and there are more of them than most people assume.

Add a second signal: the word required, an icon, an underline on links, or the status written out in words.

That costs nothing visually, since the colour stays, and it makes the meaning available to everybody rather than to most people.

The counter-case

The numbers are a threshold rather than a target.

A combination scraping past four and a half to one is not necessarily comfortable, and one slightly below can be perfectly readable in practice.

Rigidly applying the figure also produces sites that all look the same, which is a real design cost.

And a brand colour used sparingly as an accent rather than behind text has no problem here whatsoever.

Try black text first, then a darker variant for buttons only, and check the button against the page as well as the text on it.

The check

1. Measure your button text contrast.
2. Try black text if white fails.
3. Darken the colour for buttons only.
4. Keep the original everywhere else.
5. Check the button against the page.
6. Check your form field borders.
7. Look at it outdoors.

Step two is worth trying before anything else, since black text on a mid-tone brand colour passes far more often than people expect and costs nothing to test.

The general version is covered in colour contrast without a design background.

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.