WCAG colour contrast requirements, explained

Three success criteria in WCAG 2.2 set contrast ratios. Two are at Level AA, the level the laws we track point to. The third is Level AAA, a stricter goal. None of them changed between WCAG 2.1 and 2.2.

Contrast is the most common problem WebAIM finds. In its 2026 scan of one million home pages, 83.9% had text with low contrast. On a Shopify store, most of it comes from a few theme colour settings, so a handful of changes can fix it on every page.

A contrast ratio compares how bright two colours look. WCAG gives each colour a relative luminance, a number from 0 for black to 1 for white that follows how the eye sees brightness. The ratio is the lighter value plus 0.05, divided by the darker value plus 0.05. Two identical colours give 1:1. Black on white gives 21:1, the highest possible.

Hue does not count, only brightness. Red text on a green background can look strong and still fail, because the two colours can be almost equally bright.

The line is hard. W3C says the computed value should not be rounded, so a pair at 4.499:1 fails. Grey #767676 on white is 4.54:1 and passes. One step lighter, #777777, is 4.47:1 and fails for normal text.

WCAG defines large scale text as at least 18 point, or at least 14 point when bold. W3C converts one point to about 1.333 CSS pixels, which gives these sizes:

Use the size the text really renders at on a phone, not the desktop size. Many themes shrink headings on small screens, so a 28 px heading on desktop may be 20 px on a phone and need 4.5:1 there.

1.4.3 applies to all readable text and to images of text, such as a sale banner with the words baked into the picture. W3C's guidance says it also covers:

• placeholder text inside search and newsletter fields
• text that only appears on hover or keyboard focus, such as a menu link that changes colour
• text over images, measured against the part of the image behind it

There are four exceptions, where no contrast ratio is required:

• Logos and brand names. Text that is part of a logo. If you choose to show your logo faintly, W3C says that choice is not exempt.
• Inactive controls. A disabled button, such as Add to cart before a size is picked.
• Pure decoration. Text nobody needs to read, such as a faint word used as a pattern.
• Text in a busy picture. Words that happen to be in a photo, such as a street sign behind a model.

Sold out labels and sale badges are not exceptions. They are product information, and shoppers need to read them.

1.4.6 is the Level AAA version: 7:1 for normal text and 4.5:1 for large text, with the same exceptions. It helps people with more vision loss. No law we track requires AAA, and W3C does not recommend AAA as a requirement for whole sites.

A sensible approach for a store is to meet 4.5:1 everywhere and reach 7:1 for body text where your brand allows. Near-black text on white usually does both. Grey #595959 on white is 7.00:1, which shows how much room you have for a softer grey before you drop below AAA.

1.4.11 asks for 3:1 between the parts of a control people need to see and the colours right next to it. It also covers the parts of graphics needed to understand them, such as the lines in a size chart graphic. On a store, it means:

• Form fields. If the border is the only thing that shows where to type, the border needs 3:1. A pale grey border on white fails.
• Checkboxes and radio buttons in filters, and the check mark inside them.
• Selected states. The outline that shows which size or colour swatch is picked. A white or cream swatch on a white page also needs a border that reaches 3:1.
• Icons with no text, such as the cart, search and menu icons in the header.
• Focus outlines. The ring that shows where the keyboard is. A light blue or yellow ring on white can fail.

What it does not require:

• A button with clear text does not need a visible border or a fill that stands out from the page. Its text needs 4.5:1, and its focus outline still needs 3:1.
• Disabled controls are exempt, and so are form controls left with the browser's own styling.
• Hover effects are extra, so they do not need 3:1, as long as hovering does not lower the contrast.

These are common colours on store pages. We worked out each ratio with the WCAG formula and cut it to two decimals, the same way our contrast checker does.

The pattern is useful. Bright mid-tones, like pure red, bright blue and orange, rarely pass with white text. Either darken the colour or switch the text to black. Yellow and other light brand colours almost always need dark text.

In most Shopify themes, colours come from theme settings, not from each page. That is good news: fix a colour scheme once and every section that uses it changes. Shopify's help centre puts the settings under Online Store, Edit theme, Theme settings, Colors.

• Dawn and similar free themes use colour schemes. Each scheme sets Background, Text, Solid button background, Solid button label, Outline button and Shadow. Each section picks a scheme, so one failing scheme can show up on many sections. You can have up to 21 schemes.
• Horizon 4.0 and later use a colour palette instead. Shopify announced palettes on June 17, 2026. A section or block can override a palette colour, so check overrides too.
• Badges. In Dawn, sale and sold out badges have their own schemes, under Theme settings, Badges.

Text faded with opacity. Dawn draws some text as a see-through version of your text colour. Crossed-out compare-at prices, for example, use 75% of the text colour. With Dawn's default near-black #121212 on white that is 8.45:1, which is fine. But a grey text colour of #666666 passes at 5.74:1 and drops to 3.36:1 at 75%, so the compare-at price fails even though the scheme's hex codes pass. This was raised on Dawn's GitHub in 2022. Test the colour the page really shows.

Input borders. Dawn sets field borders as a percentage of the text colour under Theme settings, Inputs, Border, Opacity. The default, 55%, gives 4.11:1 on white and passes 3:1. Lower it to 30% and it drops to 1.98:1 and fails. If your theme has no setting for this, a short rule in Theme settings, Custom CSS usually fixes it. Shopify allows up to 1,500 characters there.

Text over banner images. No setting can know what is in your photo. Dawn's Image banner section has an Overlay opacity setting that darkens the image behind the text. Raise it until the lightest part of the image behind the words passes, or turn on its Container setting, which puts the text on a solid panel on desktop. Check the phone layout too, where the text often moves over a brighter part of the image.

A focus outline that is hard to see is a 1.4.11 problem, not a text one. If your theme outline is pale, this rule gives every focusable item a clear one:

• White text on a bright brand colour in the announcement bar or on the main button.
• Light grey for secondary text: compare-at prices, review counts, shipping notes and “tax included” lines.
• Placeholder text as the only label in the newsletter or search field, in pale grey.
• Testing only the desktop banner. Many themes crop the image differently on phones, so the text lands on a different part of it.
• Testing only the hex codes in settings. Opacity, overlays and gradients change the colour the shopper actually sees.
• Showing meaning by colour alone, such as a sale price only in red or a sold out swatch only faded. Colour cannot be the only signal (WCAG 1.4.1), even when the contrast passes.
• Adding a contrast toggle instead. A widget button that turns on high contrast does not fix the colours most shoppers see first. Fix the theme colours.

We saw these on real themes too. In our automated scan of 22 free Shopify theme demo stores, axe found low-contrast text on 12 of them. Much of it came from the demo's colour choices, which you can change in settings.

1. Write down the text, background, button and border colours from each scheme, then test each pair in the free contrast checker. It shows the ratio, the AA and AAA result, and the nearest colour that passes.
2. Run the free accessibility checker on your home page, a collection and a product page. It flags low-contrast text on the rendered page, including text faded with opacity.
3. For text over images, open Chrome DevTools, inspect the text and open the colour picker. It shows the contrast ratio. Or take a screenshot and pick the lightest colour behind the letters.
4. Tab through the page and check that you can always see the focus outline against each background.
5. Look at your store on a phone outdoors, with the screen at half brightness. Whatever is hard to read there is a good list of what to test first.

Automated tools cannot judge every case. Text over images, gradients and focus outlines usually need a person to look.

The main laws for online stores in the US, Canada and the EU do not write a contrast ratio into their own text. They point to WCAG instead. In the US, the Justice Department's web guidance names poor colour contrast as an example of a barrier and points to WCAG, and its 2024 rule for state and local governments uses WCAG 2.1 Level AA. Ontario's AODA uses WCAG 2.0 AA. The European Accessibility Act works through the standard EN 301 549, which includes the same rules. 1.4.3 is in every one of those versions. 1.4.11 arrived in WCAG 2.1, so it is in 2.1 and 2.2 but not 2.0.

Meeting the contrast rules is one part of WCAG 2.2 AA, not the whole of it. For the rest, see WCAG 2.2 AA explained for online stores, and for what changed in the latest version, the differences between WCAG 2.1 and 2.2.