Color Contrast Isn't Optional: A Practical Guide to Accessible Palettes

The palette that looks great on your monitor might be unreadable on someone else’s

Light grey text on a white background looks elegant in Figma, on a calibrated monitor, in a dim room, with your eyes. It looks like nothing at all on a phone in direct sunlight, or to someone with even mild vision loss, which is a lot more of your audience than you’d guess. Contrast isn’t a nitpicky accessibility checkbox — it’s the difference between text that gets read and text that gets skipped because reading it took effort nobody had time for.

The good news is that fixing contrast rarely means abandoning your aesthetic. It usually means a handful of targeted adjustments, once you know what to check.

The number that actually matters: 4.5 to 1

Web accessibility guidelines set a minimum contrast ratio of 4.5:1 between body text and its background, and 3:1 for larger headline text. You don’t need to memorize the math — free contrast checkers will take two hex codes and tell you the ratio instantly, along with a pass or fail. Run your main text colors against your main backgrounds before you commit to a palette, not after the whole site is built around it.

Where low contrast sneaks in the most

It’s rarely the main body copy — most people get that right instinctively. It’s the supporting details: placeholder text in form fields, timestamps, captions under images, footer links, disabled button states. These get treated as “less important” and styled in a pale grey that quietly fails contrast checks across the board. If it’s important enough to put on the page, it’s important enough to be legible.

Text over images is the riskiest case

A headline sitting on top of a busy photo might read fine over the dark part of the image and vanish over the light part. Add a subtle gradient overlay or a scrim behind the text to guarantee contrast regardless of what’s happening in the photo underneath. This is also just good design practice — it gives your headline a consistent, readable surface no matter which image ends up behind it.

Don’t rely on color alone to communicate

If a form field turns red to show an error, also add an icon or a short message. Around eight percent of men have some form of color vision deficiency, and for them, red-vs-green states can be indistinguishable. Pairing color with a shape, icon, or label costs you almost nothing in design and means the message actually lands for everyone.

Fixing contrast usually means adjusting, not replacing

If your accent color fails contrast as text, you rarely need to throw it out. Darkening it by ten or fifteen percent, or using it as a background with white text instead of as text on white, often solves the problem while keeping the same visual identity. Contrast constraints are a nudge toward better craft, not a threat to your brand colors.

Check it once, then bake it into your styles

The most efficient fix is structural: once your text colors and backgrounds pass contrast checks, save them as reusable color tokens and apply those everywhere instead of picking new shades per section. Check once, reuse forever, and you’ll never have to re-audit contrast across fifty individual elements again.