Website Color Contrast That Every Visitor Can Read

Pale grey text on a white background looks elegant in a design mockup. On a customer's phone, outdoors at lunchtime, it can be almost invisible, and people do not squint for long before they leave.

Website color contrast is one of the cheapest fixes on a small business site, and one of the most often ignored. It affects older visitors, people with low vision or color blindness, and anyone reading on a dim screen in bright light, which covers most of your customers at some point in the day. I design sites for local businesses, and contrast is the first thing I check on every audit. This guide explains the numbers that matter, the mistakes I see every week, and how to fix them without throwing away your brand colors.

What website color contrast actually measures

Contrast is measured as a ratio between the relative brightness of two colors, from 1:1 (identical colors) up to 21:1 (pure black on pure white). The Web Content Accessibility Guidelines, known as WCAG, set the targets most designers and many legal standards use.

One practical note: these ratios apply to the colors as rendered, so a thin font weight at 14 pixels can feel weaker than its number suggests. If your body font is light, either step up the weight or aim higher than the minimum. For a small business site, aim for AA everywhere and AAA on long blocks of body text where you can. That keeps the site readable for almost everyone without boxing in the design.

The contrast mistakes I see on small business sites

These come up on most of the audits I run, and they are easy to spot once you know them.

Light grey body text

Many templates ship with grey text to look softer. A mid grey like #999999 on white comes out at only 2.85:1, well under the 4.5:1 minimum. Even #777777, which looks fairly dark, scores 4.48:1 and fails by a hair. Moving to #767676 passes at 4.54:1, and #595959 reaches 7:1. The visual difference is small. The readability difference is not.

White text on a bright brand color

A cheerful orange such as #F58220 with white text measures about 2.6:1. That fails even the 3:1 large text minimum. A bright green like #4CAF50 behind white text sits around 2.8:1. These combinations often show up on the most important button on the page, which is the worst place to lose readers. Our guide to call to action placement on a small business website explains where those buttons should sit. Contrast decides whether anyone can read them once they get there.

Text over photos

Headlines laid over a hero photo can pass in one spot and fail a few pixels away where the image turns light. If you use a photo behind text, add a dark overlay at 40 to 60 percent opacity, or move the text onto a solid panel. The layouts in hero section design for small business websites show both approaches.

Placeholder text as labels

Light grey placeholder text inside form fields often fails contrast and disappears as soon as someone starts typing. Use a visible label above each field in full-strength text.

How to fix contrast without losing your brand

Owners worry that accessibility means abandoning colors they paid a designer to choose. It rarely does. Here is the process I follow.

1. List every text and background pair. Body text, headings, links, buttons, footer text, form labels and any banner. A typical small site has eight to twelve pairs.
2. Test each pair. Use a contrast checker in your browser's developer tools, or one of the many free checkers. Note the ratio beside each pair.
3. Darken, do not replace. Keep the hue and lower the lightness. That orange #F58220 can become #C25E00 for buttons, which reaches about 4.3:1 with white text, enough for large button labels. It still reads as your orange.
4. Use the bright version for decoration. Borders, icons, illustration accents and large shapes can stay in the original brand color, as long as they are not the only way information is shown.
5. Write the rules down. Add the accessible versions to your style guide, with notes such as "orange text only on dark backgrounds." When we help clients choose logo colors for a small business, we now plan a darker web version of each color from the start.

Why pure black on pure white is not the answer either

The common reaction to contrast problems is to swing to the extreme: black text, white background, done. It passes every test at 21:1, so it must be best.

In practice, maximum contrast is not the same as maximum comfort. Some readers, including many with dyslexia or astigmatism, report that pure black on bright white creates a slight glare or shimmer on long passages. On large modern screens set to high brightness, that harshness adds up over a few minutes of reading.

A very dark grey such as #1A1A1A or #333333 on white still scores between about 12.6:1 and 17.4:1, comfortably above AAA. It looks calmer and keeps the page readable. The goal is clear, comfortable reading, not the highest number a checker can show.

Contrast beyond text

• Do not rely on color alone. A form error shown only in red text fails for many color blind visitors. Add an icon or a short message such as "Please enter a phone number."
• Underline links in body text. Color alone is a weak signal when a link sits inside a paragraph.
• Check focus outlines. Visitors using a keyboard need a visible outline with at least 3:1 contrast against the background.
• Test dark mode if your site offers it. Colors that pass on white can fail on dark grey.
• Recheck after every redesign. New themes, plugins and seasonal banners quietly bring back low contrast pairs. A ten minute check each quarter catches them before customers do.

Frequently asked questions

What is a good color contrast ratio for a website?

Body text should be at least 4.5:1 against its background, and large text at least 3:1. Those are the WCAG AA levels most businesses aim for. For long paragraphs, 7:1 or higher reads comfortably for almost everyone.

How do I check the color contrast of my website?

Open your site in Chrome or Firefox, right click some text and choose Inspect. The developer tools show the contrast ratio when you select a color value. Free online contrast checkers also let you paste two hex codes and see the ratio instantly.

Does website color contrast affect SEO?

Contrast is not a direct ranking factor. It affects how long people stay, whether they can use your forms and whether the site meets accessibility rules. Those outcomes matter for leads and sales far more than any single ranking signal.