Why do my brand colors fail contrast on the web?

Brand colors are usually chosen for print or logos, not for legible text. A mid-tone that looks fine as a fill can fall well below the 4.5 to 1 ratio body text needs, so it has to be darkened or paired with a different text color.

What contrast ratio should I aim for?

WCAG AA wants 4.5 to 1 for normal text and 3 to 1 for large text. AAA is stricter at 7 to 1. For most sites, clearing AA on body text is the practical target.

Build an accessible color palette from your logo

4 steps About 10 minutes

Your logo holds your brand colors, but raw values often fail contrast. Extract, test, then build around what passes.

A logo already contains your brand colors, but dropping those raw values straight into a website often fails accessibility checks the moment you put text on them. The work is to pull the palette out accurately, test it against real contrast rules, then build the supporting shades around the colors that hold up. That way the accessible version is still recognizably your brand, not a watered-down guess.

Extract the colors from the logo

Upload the logo and pull out its dominant colors. This gives you the true hex values instead of guessing them by eye.

Open Palette

Test each one against your text

Check every color against the text color you plan to pair it with. Aim for a ratio of at least 4.5 to 1 for body text to clear WCAG AA.

Open Contrast

Build tints and shades

Generate lighter and darker steps around the colors that passed, so you have options for backgrounds, borders and hover states.

Open Palette

Add a gradient (optional)

Blend two brand colors into a CSS gradient for headers or buttons, if your design calls for one.

Open Gradient

Frequently asked questions

Why do my brand colors fail contrast on the web?: Brand colors are usually chosen for print or logos, not for legible text. A mid-tone that looks fine as a fill can fall well below the 4.5 to 1 ratio body text needs, so it has to be darkened or paired with a different text color.
What contrast ratio should I aim for?: WCAG AA wants 4.5 to 1 for normal text and 3 to 1 for large text. AAA is stricter at 7 to 1. For most sites, clearing AA on body text is the practical target.

Building something bigger?

Hivly is made by CodingEagles, a software studio that ships production web apps. If you have a real project, get in touch.

See what CodingEagles does →