How do I choose brand colors that are readable on my website?
Text needs enough contrast with its background. The accessibility standard asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.
Your brand colors make your website feel like you. But a color that looks great in a logo can be hard to read as text. Light gray on white, yellow on white, or dark blue on black can disappear for many visitors, especially on a phone in sunlight or for people with weaker eyesight. The fix is contrast: enough difference in lightness between the text and what is behind it.
The rule of thumb
The web's accessibility guidelines (WCAG) measure contrast as a ratio. At level AA, the level most businesses aim for:
| Text | Minimum contrast |
|---|---|
| Normal body text | 4.5 to 1 |
| Large text (about 18 point, or 14 point bold, and bigger) | 3 to 1 |
Black on white is 21 to 1, the highest possible. Many soft, trendy color pairs fall below 4.5 to 1.
How to use your brand colors well
- Use your boldest brand color for accents, like buttons, icons, lines and headings, not for long paragraphs.
- Keep body text dark on light, or light on dark. Near-black and near-white are safe choices.
- Check text on photos. Words placed over a busy photo often need a dark overlay behind them.
- Do not rely on color alone. A red word meaning "sold out" should also say "sold out." Some visitors cannot tell red from green.
- Have a darker and a lighter version of each brand color. Designers use these for text, hover effects and backgrounds.
What you need to give us
- Your brand colors as hex codes, like
#1A73E8, if you have them - Any color rules from your brand kit
- Which color matters most to you
Our team can check the color pairs on your site and suggest a darker or lighter shade when one is too faint to read.
We can do this for you. If any text on your site is hard to read, open a request in your client portal with the page address and a screenshot. Our team will adjust the colors.
Common problems
- If your logo color fails the contrast check, it can still be used for the logo itself. Logos are not held to the text rule.
- If a button's text is hard to read, the button color usually needs to be darker, or the text needs to be white instead of a light color.
- If text looks fine on your computer but faint on your phone, your phone's brightness is lower. Your customers see it that way too.
This is general information about accessibility guidelines, not legal advice.
Related articles
More in Your website
Still need help?
Ask our team