Brand Colors: How to Pick Ones That Pass Contrast.

A palette that looks gorgeous in a mood board and fails on the actual website is one of the most common — and most avoidable — brand mistakes small businesses make. Contrast isn't a design nicety; it's whether a human with normal eyesight in direct sunlight can read your menu. Here's how to pick colors that are beautiful and legible, in that order of difficulty but not that order of importance.

What contrast actually measures

Contrast ratio is a mathematical comparison of two colors' luminance, expressed as a number from 1:1 (identical, invisible) to 21:1 (pure black on pure white, maximum). The accessibility standard — WCAG 2.2 AA — requires 4.5:1 for normal text and 3:1 for large text (18pt+ or bold 14pt+). Below that, text doesn't fail dramatically; it fails quietly, for exactly the people most likely to need it clearly: older customers, anyone in bright light, anyone with even mild vision differences, which is a lot more of your customer base than "accessibility" sounds like it means.

The trap: brand colors chosen for vibe, not pairing

A soft sage green and a warm cream look lovely together as swatches. Put sage text on cream background and you might land at 2.8:1 — a clear fail, readable only with effort. The fix isn't abandoning sage; it's choosing a deep sage for text and reserving the soft version for backgrounds and accents, never for words someone has to read. Every color in a brand palette needs at least one usable pairing against both white and black, because real layouts need both.

A working method

• Pick your hue first, then adjust lightness for use. Your brand's true color — crimson, teal, whatever it is — can stay vivid for accents, logos, and buttons. For body text on a light background, darken it until it clears 4.5:1. For dark backgrounds, lighten it the same way. One hue, two or three lightness variants, each doing a different job.
• Check both themes if you support dark mode. A color that passes beautifully on white can fail completely on near-black, and vice versa — darkness and lightness aren't symmetric the way people assume.
• Test with a free tool, not your eyes. WebAIM's contrast checker and the browser's own DevTools both give you an exact ratio in seconds. Eyeballing contrast is like eyeballing a right angle — close enough to feel right, wrong enough to fail.
• Never rely on color alone to carry meaning. A red "error" state needs an icon or text too, for the roughly 1 in 12 men with some form of color vision deficiency who may not reliably distinguish red from green.

What this looks like in a real palette

A good brand system typically ships three depths of its main color: a vivid version for logos and small accents, a mid-depth version for buttons and large text, and a deep version for body text and fine print. That's not a compromise on the brand — it's the brand, engineered to actually work everywhere it needs to appear: the sign, the invoice, the dark-mode toggle, the squinting customer in a parking lot at noon.

The most beautiful palette in the world is a liability if nobody can read what it's printed on.

Fixing a palette you already have

You don't need to rebrand. Most contrast failures are fixable by deepening one or two specific colors for text use while keeping the brighter versions everywhere else — an afternoon's work, not a redesign. Our Brand Kit and every site build run every pairing through measured contrast checks before anything ships, which is also exactly the audit we'll run on your existing palette if you ask.

Testing in real conditions, not just a screen

A contrast ratio calculated on a calibrated monitor in a dim office doesn't always predict how a color pairing reads on a phone screen in direct Texas sun, or printed on matte paper under fluorescent lighting. Where possible, check a printed proof or a phone screen outdoors before finalizing a palette meant to appear on signage or vehicle wraps — the math is the floor, not the full guarantee, and real-world lighting is often harsher than any screen test accounts for.

Where this shows up beyond the website

The same contrast discipline applies to every physical touchpoint — menus, signage, printed materials — not just the screen. A palette tested and approved only in a browser can still fail badly on a printed menu under a restaurant's dim evening lighting, which is why the usage sheet covered in our piece on brand consistency should document approved pairings for both digital and print use explicitly.

There's no shortcut that substitutes for doing the fundamentals consistently — showing up with clear, honest, well-maintained work, month after month, is still what separates businesses that compound their advantage over time from ones that only ever take a single pass at the problem and move on. That holds true regardless of which specific channel, platform, or technical detail is under discussion, and it's the thread connecting everything covered here.

There's no shortcut that substitutes for doing the fundamentals consistently — showing up with clear, honest, well-maintained work, month after month, is still what separates businesses that compound their advantage over time from ones that only ever take a single pass at the problem and move on. That holds true regardless of which specific channel, platform, or technical detail is under discussion, and it's the thread connecting everything covered here.

There's no shortcut that substitutes for doing the fundamentals consistently — showing up with clear, honest, well-maintained work, month after month, is still what separates businesses that compound their advantage over time from ones that only ever take a single pass at the problem and move on. That holds true regardless of which specific channel, platform, or technical detail is under discussion, and it's the thread connecting everything covered here.

There's no shortcut that substitutes for doing the fundamentals consistently — showing up with clear, honest, well-maintained work, month after month, is still what separates businesses that compound their advantage over time from ones that only ever take a single pass at the problem and move on. That holds true regardless of which specific channel, platform, or technical detail is under discussion, and it's the thread connecting everything covered here.

There's no shortcut that substitutes for doing the fundamentals consistently — showing up with clear, honest, well-maintained work, month after month, is still what separates businesses that compound their advantage over time from ones that only ever take a single pass at the problem and move on. That holds true regardless of which specific channel, platform, or technical detail is under discussion, and it's the thread connecting everything covered here.

Watch on YouTube: Branding — color contrast accessibility designCurated search — opens the best current videos on this topic

Written by Rizwan Prasla, Spring Web Designer — the Houston studio behind 100 demo builds with zero repeats. When you’re ready: start a project or get your number in ten seconds.