Color contrast

Moderate effort

Found on 43% of audited stores.

Increase the contrast ratio between your text color and its background color to at least 4.5:1 so all users — including those with low vision — can read your content.

What it is

Color contrast is the difference in brightness between the color of your text and the color of the background behind it. Web accessibility guidelines (WCAG 2.1 Success Criterion 1.4.3) require that normal-sized text achieve a contrast ratio of at least 4.5:1, and large text (18pt/24px or 14pt/18.67px bold) at least 3:1. A ratio of 4.38:1 — like a medium blue (#007fbf) on white (#ffffff) — falls just short of the normal-text threshold. The fix is simply choosing a slightly darker (or lighter) version of the color so the ratio clears 4.5:1.

Why it matters

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and millions more have low vision or read in poor lighting conditions. Text that fails the contrast threshold is genuinely hard to read for these shoppers, directly reducing conversions and increasing bounce rates. Legally, WCAG 2.1 Level AA is the standard referenced in ADA, Section 508 (US), EN 301 549 (EU), and equivalent laws worldwide — failing it exposes your store to demand letters, complaints, and lawsuits. Search engines also reward accessible, readable pages, so fixing contrast can have a small positive effect on rankings.

How to fix it

Identify the exact foreground and background color values flagged (e.g. text: #007fbf, background: #ffffff).
Use a free contrast checker tool (such as WebAIM Contrast Checker or the browser DevTools accessibility panel) to test alternative shades and find one that reaches ≥ 4.5:1 for normal text (or ≥ 3:1 for large/bold text).
Choose the darkest (or lightest) variant of your brand color that passes — for example, darkening #007fbf to #006699 or #005f8e typically clears 4.5:1 on white.
Update the CSS rule, theme color variable, or design token that controls that text color. Prefer editing a CSS custom property (variable) so the change propagates everywhere the color is used.
Check every instance where that color is used — buttons, links, body copy, form labels, navigation — and verify each one passes at its specific font size and weight.
Re-test with an automated scanner or the browser's accessibility audit (Lighthouse, axe DevTools) to confirm zero remaining failures for this color pair.

/* BEFORE — fails WCAG 4.5:1 on white background */
a, .link-color {
  color: #007fbf; /* contrast ratio ~4.38:1 on #ffffff */
}

/* AFTER — passes WCAG 4.5:1 on white background */
a, .link-color {
  color: #006699; /* contrast ratio ~5.06:1 on #ffffff ✓ */
}

/* Tip: use a CSS custom property so one change fixes every instance */
:root {
  --color-link: #006699;
}
a, .link-color {
  color: var(--color-link);
}

Fix it on your platform

Pick your platform for the exact steps.

How to fix color contrast on Shopify

Go to Online Store → Themes → click Customize on your active theme.
Open Theme settings (the paint-palette icon) → Colors. Most Shopify themes expose global color pickers here — adjust the relevant swatch (e.g. 'Body text', 'Link color', 'Accent') to a darker shade that passes 4.5:1.
If the color isn't exposed as a theme setting, go to Online Store → Themes → ⋯ (Actions) → Edit code, open assets/base.css (or theme.css / application.css), find the CSS rule containing the failing hex value, and replace it with a passing shade.
For themes that use CSS custom properties, search for the hex value in theme.css and update the --color-* variable so the change applies globally.
Save and preview; run Lighthouse (Chrome DevTools → Lighthouse → Accessibility) to confirm the issue is resolved.

Full Shopify guide →Official Shopify docs ↗

How to fix color contrast on WooCommerce

In WordPress admin go to Appearance → Customize → Colors (or your theme's color section). If your theme provides a color picker for body text or link color, update it there.
If your theme does not expose the specific color, go to Appearance → Customize → Additional CSS and add an override rule, e.g.: `a { color: #005f8e; }` using a shade that passes 4.5:1.
For block themes (Full Site Editing), go to Appearance → Editor → Styles → Edit Styles → Colors and update the global palette entry for the failing color.
If you use a page builder (Elementor, Divi, etc.), open its Global Settings / Theme Builder and update the color token in the global color palette.
Save, then use Chrome DevTools (F12) → Lighthouse → Accessibility to verify no contrast failures remain.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix color contrast on BigCommerce

Go to Storefront → Themes → click Customize on your active theme to open Page Builder.
In Theme Styles (gear icon) look for Typography or Colors sections. Adjust the relevant color swatch (e.g. link color, button text) to a shade with ≥ 4.5:1 contrast.
If the color isn't in Theme Styles, click Advanced → Edit Theme Files, navigate to assets/scss/settings/ or assets/scss/theme.scss, find the failing color variable (e.g. $color-primary), and change it to a darker passing value.
Save and publish, then re-run an accessibility audit to confirm.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix color contrast on Wix

Open the Wix Editor, click on the element with the failing text color.
In the design panel (paintbrush icon) click Text color or Link color and choose or enter a hex value with sufficient contrast. Use Wix's built-in color picker; note the hex as you adjust and verify it in an external contrast checker.
For site-wide link colors, go to Site Design (the site icon in the left panel) → Colors & Fonts and update the relevant palette color to a passing shade — this will cascade to all elements using that palette slot.
Save and publish, then re-audit with Chrome Lighthouse.

Full Wix guide →Official Wix docs ↗

How to fix color contrast on Squarespace

In the Pages panel, open Website → Website Tools → Custom CSS, or go to Design → Custom CSS.
Add a targeted override for the failing element, e.g.: `a, .your-class { color: #005f8e !important; }` — choose the exact selector and a value that passes 4.5:1.
Alternatively, go to Design → Fonts & Colors (some templates) and adjust the global color palette slot used by that element.
Save and preview; test with Lighthouse Accessibility audit.

Full Squarespace guide →Official Squarespace docs ↗

How to fix color contrast on Webflow

Open the Webflow Designer and select the element with the failing text color.
In the right-side Style panel, locate the Color property under Typography and click the color swatch. Enter a hex value that passes 4.5:1 (e.g. darken your blue until it passes).
If the color comes from a Webflow Global Swatch (Style Guide → Color Swatches), update the swatch directly — the change will propagate to every element using it.
Publish and re-test with an axe DevTools browser extension or Lighthouse.

Full Webflow guide →Official Webflow docs ↗

How to fix color contrast on Adobe Commerce (Magento)

Identify the failing CSS rule by inspecting the element in browser DevTools (F12) — note the stylesheet filename and rule selector.
In your custom theme directory, locate or create the corresponding LESS/CSS file under app/design/frontend/<Vendor>/<theme>/web/css/.
Override or add the rule with the passing color value, e.g.: `a { color: #005f8e; }`. Avoid editing core or vendor files directly.
Run `bin/magento setup:static-content:deploy` and clear the cache (`bin/magento cache:clean`) to apply the changes.
Verify with Lighthouse or axe DevTools in the browser.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find color contrast — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Color contrast?

Why does color contrast matter?

How do I fix color contrast?