Once I have picked my brand color, should the text on it be white or black?
The lightness value L in the HSL reading shown with every pick gives a first hint: dark colors usually want white text and light ones want black. The hint alone is not enough, though, so copy the code into the contrast checker to get the actual ratio before you use it for buttons or headings.
Where the hint lives in the picker
Every click in the Image color picker shows the color in three formats, the third looking like hsl(172, 75%, 24%). The last number is lightness: 0% is black and 100% is white. A color at 24% is clearly dark, and white text on it will probably read well. A color at 90% is very light, and black is the natural choice.
The problem: colors in the middle
The hint breaks down near 50% lightness, because the eye does not see every hue as equally bright. Yellow looks much lighter than blue even when their HSL lightness is the same. Compare these:
- Yellow #F0C814, which is hsl(49, 88%, 51%): white on it is only 1.62 to 1, black is 12.98 to 1. Black is the only acceptable choice.
- Blue #3C78C8, which is hsl(214, 56%, 51%): white is 4.46 to 1 and black is 4.71 to 1. Both sit near the line, and white fails the normal-text test, which needs 4.5.
- Teal #0F6B5F, which is hsl(172, 75%, 24%): white is 6.39 to 1 and black 3.29 to 1. Here the hint was right and white is the answer.
The yellow and the blue both have 51% lightness, yet the decision for each is completely different. That is why the lightness number alone cannot be trusted.
The right way, step by step
- Pick your brand color from the logo or a product photo in the Image color picker and note its lightness.
- Copy the HEX value.
- Open the Color contrast checker, set white as the text color and your code as the background, then try black.
- Choose the one that passes the normal-text test. If neither does, text on this color has to be large and bold, or use a darker shade of the color for buttons.
What if your color sits in the borderline zone?
As with the blue #3C78C8, your color may land where white fails and black only just passes, and black text on blue may not suit your look. You have two practical options: use the color itself for large things that carry no small text, such as backgrounds, bands and icons, and use a darker shade of it for buttons. To get that darker shade from the same image, find a shaded part of the logo or product, click it, and check its contrast again.
Common questions
Does the picker suggest a text color automatically?
No, the picker only shows the color and its values. The text color decision comes from the contrast checker.
What ratio do I need for buttons?
Normal text needs at least 4.5 to 1 under WCAG AA, and large text needs 3 to 1.
My brand color is semi-transparent in the logo. Does that matter?
Yes. Values in a semi-transparent pixel can drift slightly and the tool warns you. Take the color from a pixel at 100% opacity.