Colour contrast explained: what WCAG asks and how to fix brand colours

WCAG 2.2 asks for a contrast ratio of at least 4.5:1 between normal text and its background, and at least 3:1 for large text (success criterion 1.4.3, level AA).¹ A second criterion, 1.4.11 Non-text Contrast, asks for 3:1 for the parts of buttons, form fields, icons, focus indicators and charts that people need to see to use or understand them.² You measure contrast with a free checker by entering two colours, and you fix a failing brand colour by keeping the hue and using a darker or lighter shade where text sits on it.

It is the most common problem on the web. WebAIM's 2026 scan of the top million home pages found low-contrast text on 83.9% of them, with an average of 34 instances per page.⁴ The US Department of Justice lists poor colour contrast first among the barriers that keep people with limited vision from using websites.⁹

What the two criteria ask

A few details catch people out:

• No rounding. W3C says the thresholds are exact: 4.499:1 fails 4.5:1, and 2.999:1 fails 3:1.¹²
• Placeholder text counts. So does text that only appears on hover or focus.¹
• Logos are exempt. Text that is part of a logo or brand name has no contrast requirement, and neither does text in a disabled control or pure decoration. Brand guidelines do not exempt the rest of your text.¹
• Disabled controls are exempt from 1.4.11 too, and so are form controls whose look you have not changed from the browser default.²

Where stores usually fail

• Light grey text for prices, product details, footer links and "was" prices. Grey #999999 on white is 2.85:1, which fails for normal text. #767676 on white is 4.54:1, just over the line.
• White text on a bright brand colour in buttons, sale badges and announcement bars.
• Text over photos in hero banners, where part of the image is as light as the text.
• Faint input borders. W3C's own example: a text field with a #AAA border on white and no other visible edge fails 1.4.11.²
• Soft background colours. A grey that passes on white can fail on cream. #767676 on #F5F0E8 is 4.0:1, which fails for normal text.

The ratios in this post are worked out with the WCAG formula, which compares the relative luminance of the two colours and runs from 1:1 to 21:1.¹

How to measure contrast

With a contrast checker

WebAIM's free Contrast Checker takes a foreground and background colour as hex codes, or from an eyedropper, and shows the ratio with pass or fail results for normal text, large text, and graphical objects and interface components.⁵ It also has a lightness slider, which is the quickest way to find the nearest shade that passes.⁵

In Chrome DevTools

Right-click the text, choose Inspect, and hover over the element in inspect mode: the tooltip shows its contrast ratio. Open the colour picker next to the text colour and expand the Contrast ratio section to see AA and AAA results and a suggested colour. The CSS Overview panel lists every contrast issue on the page.⁶

Measure the colours you set, not the pixels

W3C says to test the colours specified in your CSS, not the anti-aliased edge pixels on screen. If you set a text colour but no background colour, white is assumed, and setting one without the other is a known failure.¹ For text over images, check the lightest part of the image behind the text, or add a solid or semi-opaque panel behind it.

With an automated check

Automated tools are good at contrast, because it is a calculation. Jralo's free check lists every contrast failure it finds, page by page, along with the rest of its WCAG 2.2 results and a note of which countries' accessibility laws are likely relevant to your site. Tools struggle with text over images and gradients, so look at those yourself.

Fixing brand colours without losing the brand

Most contrast fixes do not need a new brand. They need a rule about which shade goes where.

1. Keep the hue, change the lightness. A teal like #2AB3A6 gives 2.59:1 with white text, which fails even for large text. A darker teal from the same family, #1D7F76, gives 4.83:1 and passes for normal text. Customers still see your teal.
2. Switch the text colour instead. An orange such as #E8692C fails with white text at 3.24:1 (it passes only for large text), but black text on the same orange gives 6.49:1.
3. Use the bright colour where contrast rules are lighter. Large headings need 3:1, and decorative shapes, borders that are not needed to identify a control, and backgrounds behind already-labelled sections have no requirement. Keep your brightest shade for those.
4. Write the pairs down. A short table in your brand guide, listing which text colour may sit on which background, stops the problem coming back with the next banner.
5. Do not rely on colour alone. Contrast is separate from 1.4.1 Use of Color: a link in body text must be identifiable without colour vision, for example with an underline, and a form error shown only as a red border fails even if the red has good contrast.³

Where to change colours on Shopify and WordPress

Shopify

In Shopify admin, go to Online Store, choose Edit theme, open Theme settings and then Colors. Depending on the theme, you edit colour schemes (a group of colours such as background, text and button, applied to sections) or, in newer themes, a colour palette. The cart drawer has its own scheme setting.⁷ Shopify's help page does not mention a contrast warning in the editor, so check every scheme you use with a checker, including the ones only applied to a single section.

Checkout is styled separately, under Settings, then Checkout, then Edit on the configuration. Shopify's own guidance there is to choose colours with high contrast and to make sure text stays readable against the main and order summary backgrounds, especially if input fields are set to transparent.⁸

WordPress and WooCommerce

In a block theme, go to Appearance, then Editor, and open Styles. Under Colors you can edit the palette and the default colours for the background, text, links, headings and buttons across the whole site, including the link hover colour.¹⁰ Classic themes keep colours in their own settings, which vary by theme. Wherever they live, test the pairs your theme actually uses: button text on button background, sale badges, WooCommerce notices and the footer. CSS added in Styles survives a theme update but is cleared if you switch themes, so keep a copy.¹⁰

A short checklist

• Body text, prices, labels and links meet 4.5:1 against their background.
• Large headings meet 3:1.
• Button text meets 4.5:1 on the button colour (or 3:1 if it is large).
• Input borders, checkboxes, icons that act as buttons and the focus indicator meet 3:1 against what is next to them.
• Placeholder text, hover text and sale badges have been checked too.
• Links in body text are underlined or otherwise visible without colour.

Contrast is one of the easiest problems to find and one of the quickest to fix, so it is a good first job. For the wider first pass, see how to check your website in 15 minutes, and for what a tool can and cannot catch, why automated testing finds some problems but not all.