#Color
Can people actually read your brand colors?
Some brand color pairs look great and can't be read. What contrast ratio means, the WCAG numbers to aim for, and how a brand guide settles it.
A palette can look lovely on a mood board and still fail the first time someone sets a sentence in it. Soft blush text on cream, white on a sunny yellow, sage on a slightly darker sage. The colors belong together. You just can't read them.
What is color contrast?
Contrast is how different two colors are in lightness. It's measured as a ratio. Black text on white is 21 to 1, the most you can get. The same color on itself is 1 to 1, which means invisible.
Hue doesn't count for much here. A red and a green of the same lightness can look loud together and still be hard to read, and that pair is the one most people with color blindness can't separate at all.
How much contrast is enough?
The Web Content Accessibility Guidelines, WCAG, set the numbers most designers work to:
| Text | Level AA | Level AAA |
|---|---|---|
| Regular text | 4.5 : 1 | 7 : 1 |
| Large text (about 24px, or 19px bold) | 3 : 1 | 4.5 : 1 |
| Icons and graphic parts | 3 : 1 | No higher level |
AA is the usual target. It's the level most accessibility laws point to, and a sensible floor for anything with words on it.
Why does this matter off the web?
The guidelines were written for websites, but the problem is the same everywhere. A post gets read on a phone at half brightness on a bus. A flyer gets read from across a room. A slide gets projected onto a washed-out screen. Every one of those drops the contrast you designed with, so a pair that barely passed on your monitor won't pass there.
Then there's the audience. Plenty of people read with low vision, color blindness or just tired eyes, and none of them tell you they skipped the post.
Which color pairs fail most often?
- Pastel on white. Blush, mint and lavender text on a white ground rarely reach 3:1.
- White on bright yellow or light orange. Yellow is very light even when it's saturated.
- Two mid-tones. A medium teal on a medium coral looks bold and reads badly.
- Gray body text. Light gray paragraphs look neat and fail quickly.
None of this means the brand can't use pale colors. It means pale colors go behind dark text rather than into the text itself.
How does a brand guide handle this?
In the guides I make, every text-on-color pair in the palette is checked against WCAG AA. The guide prints the approved pairs next to the failing ones, so nobody has to remember which is which. When a palette has light and dark tints of each color, the dark ones usually carry text and the light ones become grounds.
A four-color palette might end up with eight approved pairings: each color as a background under two of the others. That's the whole list, and anyone making a post can pick from it without running a checker.
What if my favorite color fails?
Keep it, and give it a different job. It can be a background, a band across a photo, an icon fill or a highlight behind a word. Darken it slightly to make a text version that passes, and list both in the guide. How many brand colors you need covers how tints like that fit into a palette.
Questions people also ask
What contrast ratio do I need for text?
WCAG level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text, which is roughly 24px regular or 19px bold and up. Level AAA asks for 7 to 1 and 4.5 to 1.
Does accessibility matter for social media posts and flyers?
Yes. The guidelines were written for the web, but anyone squinting at a post on a phone in the sun, or reading a flyer from across a room, benefits from the same contrast.
How do I check the contrast between two colors?
Paste both HEX codes into a free contrast checker, such as WebAIM's. It returns the ratio and whether it passes AA and AAA for normal and large text.
Can a light brand color still carry text?
Usually, as a background with dark text on top. The pair to avoid is light text on light color, or light color text on white.
