Color contrast
Quick winFound on 80% of audited stores.
Increase the contrast ratio between your text color and its background color to meet the WCAG 4.5:1 minimum, so all users — including those with low vision — can read your content clearly.
What it is
Color contrast is the difference in brightness between text and the background behind it. WCAG (Web Content Accessibility Guidelines) Success Criterion 1.4.3 requires that normal-sized text (below 18pt / 24px regular, or 14pt / ~18.5px bold) has a contrast ratio of at least 4.5:1 against its background. A ratio like 4.47:1 — for example, #777777 grey text on a white #ffffff background — falls just short of that threshold and is therefore a measurable accessibility failure. The ratio is a simple math score: higher numbers mean more contrast and easier reading.
Why it matters
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and many more users struggle with low contrast in bright sunlight or on older screens. Failing WCAG 1.4.3 exposes your store to legal risk in the US (ADA), UK (Equality Act), EU (EAA 2025), and other jurisdictions that reference WCAG as the accessibility standard for commercial websites. Beyond legal compliance, hard-to-read text directly hurts conversions: shoppers who can't comfortably read product descriptions, prices, or call-to-action buttons abandon faster. Google also uses accessibility signals as part of its Core Web Vitals and overall quality assessment, so fixing contrast issues can have a positive downstream effect on organic rankings.
How to fix it
- Identify the exact failing element: note the foreground (text) color hex code, the background color hex code, the font size, and font weight reported by the scanner.
- Use a free contrast checker (e.g. the WebAIM Contrast Checker or browser DevTools accessibility panel) to test alternative color values until you achieve a ratio of at least 4.5:1 for normal text, or 3:1 for large text (18pt+ regular or 14pt+ bold).
- Choose a new text color that meets the threshold while staying on-brand — typically this means darkening the foreground color (e.g. changing #777777 to #595959 or darker), or darkening/lightening the background to increase separation.
- Locate where the failing color is defined in your theme or custom CSS — it may be a global body/paragraph style, a utility class (e.g. .text-muted, .secondary-text), or an inline style on a specific component.
- Update the CSS rule with your new accessible color value and save/publish the change.
- Re-test with a contrast checker or re-run your accessibility scanner to confirm the ratio now meets or exceeds 4.5:1.
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 (bottom-left gear icon) → Typography or Colors section — many themes expose body text color as a color picker here. Change it to an accessible value (e.g. #595959 instead of #777777) and Save.
- If the failing color is not exposed in the visual editor, go back to Themes → click the '…' menu → Edit code.
- Open assets/base.css (or theme.css / global.css — the name varies by theme). Search for the failing hex value (e.g. #777777) and replace it with your accessible color.
- Click Save and verify with a contrast checker.
How to fix color contrast on Shopify Plus
- Same steps as Shopify above. Additionally, if you use a custom Checkout UI extension, open the checkout editor (Settings → Checkout → Customize) and update text/label color tokens there.
- For headless Shopify Plus storefronts, update the CSS or design-token file in your frontend repository and redeploy.
How to fix color contrast on WooCommerce
- In WordPress admin go to Appearance → Customize → Additional CSS.
- Add a targeted override rule (see code snippet below) that sets the failing element's color to your accessible value. This avoids editing theme files directly.
- Alternatively, if your theme has a Colors panel inside the Customizer, update the body text or secondary text color picker there.
- For block-based (FSE) themes, go to Appearance → Editor → Styles (palette icon) → Typography or Colors and change the value.
- Click Publish and re-test contrast.
How to fix color contrast on BigCommerce
- Go to Storefront → Themes → click Customize on your active theme.
- In the Style panel, find Typography or Colors. Look for 'Body text color' or 'Secondary text color' and update it to an accessible hex value.
- If the color is not exposed there, click Advanced → Edit Theme Files (or use the Stencil CLI locally).
- Open assets/scss/settings/ — look for _color.scss or a variables file. Search for the failing color and replace it.
- Commit/push changes (Stencil CLI) or Save in the file editor, then publish the theme.
How to fix color contrast on Wix
- Open the Wix Editor and click on the text element with low contrast.
- In the text toolbar, click the font color icon and select a darker accessible color (use the hex input to enter your chosen value, e.g. #595959).
- For site-wide secondary/body text, go to Design → Theme Manager (or Site Design → Text Themes) and update the relevant text preset color.
- Click Publish when done.
How to fix color contrast on Wix Studio
- In Wix Studio editor, click the text element → Text Settings → change the color using the hex picker to an accessible value.
- To change globally, open the Design panel → Color Palette and update the relevant palette swatch to a darker accessible color — this updates all text using that swatch site-wide.
- Publish the site.
How to fix color contrast on Squarespace
- Go to Website → Pages → click Edit on the relevant page, then click on the failing text element and use the inline toolbar to change the text color.
- For global changes, go to Design → Styles (or the 'paintbrush' icon in the editor) and find the Body Text or Secondary Text color. Update it to an accessible value.
- In Squarespace 7.1 you can also go to Design → Custom CSS and add an override rule (see snippet below).
- Save and preview.
How to fix color contrast on Webflow
- Open the Webflow Designer and select the element with the low-contrast text.
- In the Style panel on the right, find Typography → Color. Click the color swatch and enter your accessible hex value.
- If the color is set via a global class (e.g. '.body-text'), updating it on the class will fix all instances site-wide — confirm in the Class dropdown that you're editing the shared class.
- Publish the site and re-test.
How to fix color contrast on Adobe Commerce (Magento)
- Identify the failing CSS rule: use browser DevTools → Inspect the element → find the CSS file and rule responsible for the color.
- In your custom theme directory (app/design/frontend/<Vendor>/<theme>/), locate or create web/css/source/_overrides.less (or .css).
- Add a rule overriding the failing color to an accessible value (see snippet below).
- Run 'php bin/magento setup:static-content:deploy' and clear cache ('php bin/magento cache:clean').
- Verify the change in the browser and re-test contrast.
How to fix color contrast on Magento Open Source
- Same process as Adobe Commerce above — locate your custom theme's CSS source files under app/design/frontend/<Vendor>/<theme>/web/css/ and override the failing color rule.
- Deploy static content and clear cache to see changes.
How to fix color contrast on Headless / Custom (I build in code)
- Use browser DevTools to find the CSS class or variable controlling the failing text color.
- Open your design-token or variables file (e.g. _variables.scss, tokens.css, tailwind.config.js) and update the color value to one that passes 4.5:1.
- If using a utility-class framework like Tailwind, swap the class (e.g. replace 'text-gray-500' with 'text-gray-700') — verify the new class passes contrast.
- Commit, build, and deploy. Re-run your accessibility scanner to confirm.
How to fix color contrast on WordPress.org
- Go to Appearance → Customize → Additional CSS and add a targeted CSS override (see snippet below) — this is the safest method and survives theme updates.
- Alternatively, if you use a page builder (Elementor, Divi, Bricks), select the text widget/element → Style tab → Typography → Color and enter the accessible hex value directly.
- For block editor (Gutenberg) sites, check Appearance → Editor → Styles → Colors and update the relevant color role.
How to fix color contrast on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → Theme Configurator (if available) and look for text color settings.
- Otherwise, use FTP/file manager to open your active theme folder (themes/<your-theme>/assets/css/) and find the relevant CSS file. Search for the failing hex value and replace it.
- Clear the PrestaShop cache under Advanced Parameters → Performance → Clear Cache.
How to fix color contrast on OpenCart
- Navigate to catalog/view/theme/<your-theme>/stylesheet/stylesheet.css (via FTP or the admin file editor under Extensions → File Manager if available).
- Search for the failing color hex and replace it with your accessible value.
- Clear the site cache and verify the change.
Does your site have this issue?
Run a free SEOLZ scan to find color contrast — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Color contrast?
Color contrast is the difference in brightness between text and the background behind it. WCAG (Web Content Accessibility Guidelines) Success Criterion 1.4.3 requires that normal-sized text (below 18pt / 24px regular, or 14pt / ~18.5px bold) has a contrast ratio of at least 4.5:1 against its background. A ratio like 4.47:1 — for example, #777777 grey text on a white #ffffff background — falls just short of that threshold and is therefore a measurable accessibility failure. The ratio is a simple math score: higher numbers mean more contrast and easier reading.
Why does color contrast matter?
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and many more users struggle with low contrast in bright sunlight or on older screens. Failing WCAG 1.4.3 exposes your store to legal risk in the US (ADA), UK (Equality Act), EU (EAA 2025), and other jurisdictions that reference WCAG as the accessibility standard for commercial websites. Beyond legal compliance, hard-to-read text directly hurts conversions: shoppers who can't comfortably read product descriptions, prices, or call-to-action buttons abandon faster. Google also uses accessibility signals as part of its Core Web Vitals and overall quality assessment, so fixing contrast issues can have a positive downstream effect on organic rankings.
How do I fix color contrast?
Increase the contrast ratio between your text color and its background color to meet the WCAG 4.5:1 minimum, so all users — including those with low vision — can read your content clearly.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Color contrast & accessibility — MDN