My add-to-cart button is a reddish orange. Should the button text be white or black?
Test both rather than trusting your eye. On a #E4572E button, white text gives 3.68:1, which is only enough for large text, while black gives 5.70:1 and passes for normal text. If your button label is normal size, black is the passing option, or darken the button slightly if you want to keep white.
Why white fools you on mid-tone colours
Designers are used to white text on coloured buttons, and on dark colours that works. A reddish orange like #E4572E is a mid-tone, though: not dark enough for white to stand out, not light enough for black to look odd. In that middle band the right answer is often the opposite of what the eye expects.
The tool makes it plain: white on this button is 3.68:1, which passes AA large text and UI components but fails AA normal text at 4.5:1. Black is 5.70:1, passing AA normal text and AAA large text.
Test both options in a minute
- Open the Color contrast checker and put the button colour #E4572E in 'Background color'.
- Type #FFFFFF in 'Text color' and read the ratio and the list of checks.
- Change the text colour to #000000 and compare.
- Look at the live sample: it shows real text at 16 px and 24 px on your actual button colour, in Arabic and English.
If you are set on white text
One detail matters here: suggestions always change the first field, the text colour. If you leave white as the text and ask for 4.5:1, the tool suggests a darker text colour, #1E1E1E, which is not what you want. You need a darker button, not darker text.
- Press 'Swap colors' so #E4572E sits in the text field and white in the background field. The ratio is symmetrical, so it stays 3.68:1.
- Choose the 4.5:1 target, and 'Nearest darker color' shows #CB4D29 at 4.53:1.
- That is your new button colour: white on it passes for normal text, and it sits very close to your original.
A nice extra: black also passes on #CB4D29 at 4.63:1, so the new button works with either. White clears the line by a small margin, though, so do not lighten the button on hover without checking that state as well.
What about the button against the page?
There is a second check many people skip: can the customer see the button itself against the page? Put the button colour against the page colour and read 'UI components and graphics'. #E4572E on a white page gives 3.68:1, above the 3:1 asked for the button shape. This check is about seeing where the button is, not about its label.
If your store colours come from a photo or logo, pull them out first with the Image palette extractor and test each one as a button colour. And remember that a passing ratio only measures the two colours; it says nothing about font size or whether the button label itself is clear.
Common questions
Does black on red look strange?
That is taste. If pure black feels harsh, try a dark colour close to it and check it, or darken the button so it accepts white as in the steps above.
My button text is big and bold. Is 3.68:1 enough?
If the text is at least 24 px, or about 18.66 px and bold, it counts as large and needs 3:1 for AA. Most button labels are smaller than that.
Will the answer change with another button colour?
Yes, which is why you check each colour. Very dark colours suit white, light ones suit black, and mid-tones need both tested.