You have probably squinted at a website before — light gray text on a white background, or red text on a dark blue banner. You might have thought, “That is hard to read,” and moved on. But for millions of people with low vision, color blindness, or aging eyes, “hard to read” means “impossible to use.”

Color contrast is one of the most common accessibility problems on the web, and one of the easiest to fix. You do not need to be a designer or a developer. You just need to understand what makes text readable and have a few free tools in your back pocket.

This guide will teach you everything you need to know about color contrast in plain language, with step-by-step instructions for checking and fixing it on your own website.

What Is Color Contrast (and Why Does It Matter)?

Color contrast is the difference in brightness between your text and the background it sits on. High contrast means the text is easy to read — think black text on a white background. Low contrast means the text blends into the background — think light gray text on a white background.

Who Is Affected?

More people than you might expect:

• 285 million people worldwide have some form of visual impairment, according to the World Health Organization.
• 300 million people have color blindness. About 1 in 12 men and 1 in 200 women are color blind.
• Everyone over age 40 begins to experience some degree of age-related vision decline. By 65, most people need significantly higher contrast to read comfortably.
• Anyone in bright sunlight has effectively reduced contrast on their screen. This includes every person who has ever tried to read their phone outside on a sunny day.

Poor contrast is not just an accessibility issue for a niche group. It affects a large and growing portion of your audience.

The Contrast Ratio: What the Numbers Mean

Accessibility standards measure contrast using a ratio. You will see it written as something like 4.5:1 or 7:1. Here is what those numbers mean in plain language.

The ratio compares the brightness of your text color to the brightness of your background color. A ratio of 1:1 means the text and background are identical — completely invisible. A ratio of 21:1 is the maximum — pure black on pure white (or vice versa).

The Rules You Need to Know

The international accessibility standard (WCAG) sets two levels of contrast requirements:

Level AA (the standard you should meet):

• Normal text (smaller than about 18 pixels or 14 pixels bold): 4.5:1 minimum
• Large text (18 pixels and above, or 14 pixels bold and above): 3:1 minimum

Level AAA (the gold standard):

• Normal text: 7:1 minimum
• Large text: 4.5:1 minimum

For most businesses, Level AA is the target. It is the level required by most accessibility laws around the world, and it ensures your content is readable by the vast majority of people.

Putting the Numbers in Context

• Black text on white background: 21:1 (maximum contrast, always passes)
• Dark gray (#333) on white: 12.6:1 (excellent, passes AA and AAA)
• Medium gray (#767676) on white: 4.5:1 (just passes AA for normal text)
• Light gray (#999) on white: 2.8:1 (fails AA — this is where many websites fall short)
• White text on yellow background: 1.1:1 (nearly invisible, catastrophic failure)

If you take away one thing from this section, let it be this: that pleasant, “modern” light gray text you see on so many websites often fails accessibility standards. Looking sleek and being readable are two different things.

How to Check Your Color Contrast (Free Tools)

You do not need to calculate ratios by hand. Several free tools will do it for you in seconds.

Tool 1: WebAIM Contrast Checker (Easiest)

This is the tool I recommend starting with. It is free, web-based, and requires no installation.

1. Go to webaim.org/resources/contrastchecker
2. Enter your foreground color (the text color) in the first field. You can use the color picker or type a hex code like #333333.
3. Enter your background color in the second field.
4. The tool instantly shows the contrast ratio and tells you whether it passes or fails Level AA and Level AAA for both normal and large text.

How do you find your color codes? Right-click on any text on your website, select “Inspect” or “Inspect Element,” and look for properties called color (for text) and background-color (for the background). The values will look like #333333 or rgb(51, 51, 51). Copy either format into the WebAIM tool.

Tool 2: Colour Contrast Analyser (Desktop App)

If you prefer a desktop application, the Colour Contrast Analyser by The Paciello Group is free and available for Windows and Mac.

1. Download it from tpgi.com/color-contrast-checker
2. Open the app and use the built-in eyedropper tool to pick colors directly from your screen — no need to find hex codes manually.
3. The app shows the contrast ratio and pass/fail results in real time.

This tool is especially helpful if you want to quickly check multiple color combinations across your site without digging through code.

Tool 3: Browser Extensions

For ongoing monitoring, consider installing a free browser extension:

• WAVE (Web Accessibility Evaluation Tool): Available for Chrome, Firefox, and Edge. It highlights contrast errors directly on your page with visual markers. Go to wave.webaim.org/extension to install.
• axe DevTools: Available for Chrome and Firefox. It runs a broader accessibility check that includes contrast issues. Go to deque.com/axe/browser-extensions to install.

Both are free and give you results in seconds.

Common Contrast Problems (and How to Fix Them)

Here are the contrast issues I see most often on business websites, along with practical fixes.

Problem 1: Light Gray Text on White Backgrounds

This is the single most common contrast failure on the web. Designers love it because it looks clean and modern. Users struggle with it because it is hard to read.

The fix: Darken your body text color. Switch from light gray (#999 or #aaa) to a dark gray (#333 or #444). This gives you a clean, modern look without sacrificing readability. The difference in appearance is subtle, but the difference in usability is enormous.

Problem 2: White Text on Bright Colored Backgrounds

Bright blue, green, orange, and red backgrounds with white text often fail contrast checks. The colors feel vibrant to you, but the brightness of both the text and background are too similar.

The fix: Either darken the background color or add a semi-transparent dark overlay behind the text. For example, if you have white text on a bright blue (#3498db) background (contrast ratio 2.8:1, fails), darken the blue to #1a5276 (contrast ratio 8.2:1, passes comfortably).

Problem 3: Text Over Images

When text sits on top of a photograph or pattern, contrast varies across the image. The text might be readable over the dark part of the photo but invisible over the light part.

The fix: Add a solid or semi-transparent overlay between the image and the text. A dark overlay with white text or a light overlay with dark text ensures consistent contrast regardless of the image behind it. Most website builders (Shopify, WordPress, Squarespace) have built-in options for this in their hero banner and image overlay settings.

Problem 4: Placeholder Text in Forms

The light gray placeholder text inside form fields (the text that says “Enter your email” before you type) almost always fails contrast requirements. Default placeholder styling in most browsers is too light.

The fix: If the placeholder text conveys important instructions, darken it. In many website builders, you can adjust placeholder text color in the form styling settings. Alternatively, use visible labels above or beside the form field instead of relying on placeholder text alone — this is better for both accessibility and usability.

Problem 5: Links That Are Not Distinguishable

If your links are the same color as your regular text, or if the only difference is color (no underline), people with color blindness may not be able to identify them as links.

The fix: Make sure links have at least a 3:1 contrast ratio against the surrounding body text AND use an additional visual cue like an underline. The underline is the most universally understood indicator that text is clickable.

How to Fix Contrast on Popular Platforms

Shopify

1. From your Shopify admin, go to Online Store, Themes.
2. Click Customize on your active theme.
3. Open Theme Settings (the gear icon).
4. Look for Colors or Typography settings.
5. Adjust your text colors and background colors here. Use the WebAIM tool to verify your choices meet the 4.5:1 ratio.

WordPress

1. Go to Appearance, Customize in your dashboard.
2. Look for Colors or Additional CSS in your theme’s customizer.
3. Adjust your color settings. If your theme does not expose text color options, you may need to add custom CSS or switch to a theme with better contrast defaults.
4. Many modern WordPress themes (like Flavor, flavor, flavor etc.) include accessibility-ready contrast settings out of the box. Look for themes tagged “accessibility-ready” in the theme directory.

Squarespace

1. Go to Design, Site Styles in your Squarespace dashboard.
2. Adjust font colors and background colors in the style editor.
3. Squarespace lets you customize colors for individual sections, so check each section of your page separately.

Wix

1. Open the Wix Editor for your site.
2. Click on any text element to change its color.
3. For global changes, go to Site Design, Color and Text Themes to update your site-wide color palette.

Building a Contrast-Friendly Color Palette

If you are choosing brand colors or redesigning your site, build contrast into your palette from the start. Here are practical guidelines:

Start With Your Text

Choose your body text color first. Dark gray (#333 or #2d2d2d) on a white or very light background is the safest starting point. Pure black (#000) on pure white (#fff) has maximum contrast but can feel harsh on screens — dark gray is easier on the eyes while still passing all standards.

Test Every Color Combination

Before finalizing your palette, test every combination of text and background that will appear on your site. This includes:

• Body text on page background
• Heading text on page background
• Navigation text on header background
• Button text on button background
• Footer text on footer background
• Link text against surrounding body text
• Error message text on form backgrounds

Use a Palette Generator

Accessible Color Palette Builder at toolness.github.io/accessible-color-matrix lets you enter multiple colors and see which combinations pass AA and AAA at a glance. This is incredibly useful when you are setting up a brand palette.

The Three-Color Safety Net

When in doubt, this simple approach works reliably:

1. Very dark text (near-black) for body copy
2. White or very light background for content areas
3. A bold accent color (tested against both dark and light) for buttons, links, and highlights

This combination will not win design awards for creativity, but it will be readable by virtually everyone. You can always add visual interest through layout, imagery, and typography rather than relying on low-contrast color tricks.

Common Myths About Color Contrast

”Our brand colors are untouchable.”

Your brand colors can absolutely be maintained — you just need to use them wisely. A bright brand color that fails contrast as body text might work perfectly as a large heading, a button color, or a background accent. The key is pairing colors thoughtfully rather than abandoning your brand.

”People can just zoom in.”

Zooming in increases the size of text, not the contrast ratio. Light gray text at 200% zoom is just bigger light gray text. It is still hard to read for people with low contrast sensitivity.

”This looks fine on my screen.”

Your monitor settings, room lighting, and personal vision are not representative of your entire audience. Test with tools and numbers, not with your eyes alone.

”Dark mode fixes everything.”

Dark mode helps some users but creates new contrast challenges. White text on a dark background needs just as much contrast attention as dark text on a light background. And if your dark mode is auto-generated, it may introduce contrast failures that your light mode did not have.

A Simple Contrast Checklist

Run through this list every time you publish a new page or update your design:

• Body text meets 4.5:1 contrast against its background
• Heading text meets 3:1 contrast against its background (assuming it is large enough to qualify as “large text”)
• Button text meets 4.5:1 contrast against the button background
• Link text is visually distinct from surrounding text (color + underline or other indicator)
• Text over images has a consistent overlay ensuring minimum contrast
• Form labels and placeholder text meet 4.5:1 contrast
• Error and success messages meet 4.5:1 contrast

If every item on this list passes, your color contrast is in good shape.

Keep Going

Color contrast is one piece of the accessibility puzzle, but it is a big one. It is also one of the most measurable — you either meet the ratio or you do not. There is no ambiguity.

Start by checking your homepage and your highest-traffic pages. Fix the worst offenders first. Then work your way through the rest of the site over time. Every improvement makes your content readable by more people, which is good for your users, good for your reputation, and good for your bottom line.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.