Colour Contrast and WCAG: What's the Requirement and How Do You Measure It?

Short answer. WCAG level AA requires a contrast ratio of at least 4.5:1 between text and background for normal text, and 3:1 for large text and graphical elements (icons, input-field borders). Too little contrast is by far the most common accessibility mistake in webshops — and, fortunately, often fixable theme-wide in one go. It's also 100% precisely measurable with software, so there's no room for debate.

Why is contrast so important?

Light-grey text on white looks sleek on your screen, but it's hard to read for people with low vision, for older visitors, and for anyone looking at a phone in bright sunlight. A large share of your customers falls into at least one of those groups. Poor contrast literally costs you readability — and with it, sales.

What are the exact WCAG contrast requirements?

The standard distinguishes by text size and element type. The smaller the letters, the sharper the contrast must be:

• Normal text (smaller than 24px, or 18.66px bold): at least 4.5:1.
• Large text (from 24px, or 18.66px bold — that is, 18pt / 14pt bold): at least 3:1.
• Graphical components (icons, input-field borders, active button borders): at least 3:1 relative to the adjacent colours (WCAG 1.4.11).

Contrast is expressed as a ratio: 1:1 is no contrast, 21:1 is pure black on white. A few common combinations:

How do you measure contrast yourself?

You don't have to guess, and you don't have to work with formulas yourself. There are three reliable methods:

1. An automated scan (recommended). Tools like Seviranta calculate the contrast value of every text element on the page at once and flag the exact line of code of the offenders — including the measured value next to the required one.
2. Your browser's developer tools. In Chrome or Edge, right-click on text → "Inspect"; the colour picker often shows the contrast ratio and WCAG status directly.
3. A manual contrast checker. Enter the two Hex codes and you get the ratio. Handy in the design phase, but time-consuming for an entire live site.

How do you fix contrast errors efficiently?

The beauty of contrast errors: they're almost always controlled centrally. In Shopify, WooCommerce, or Magento, colours are tied to global variables in your theme. Make the text or background colour a shade darker or lighter until the ratio checks out, and you meet the contrast requirement for your entire webshop in one go.

Start with your conversion funnel: the text on the "Add to cart" and "Checkout" buttons, your price labels, menu items, and the warnings at checkout. That's where the biggest gains are. This is, by the way, one of the 10 most common accessibility mistakes.

Why doesn't an accessibility widget fix this?

Many entrepreneurs hope to fix contrast with an overlay widget and its "high-contrast button". That's insufficient both technically and legally: regulators and AI scrapers check the default state of your source code. If your CSS doesn't meet 4.5:1, you don't comply — a temporary JavaScript layer doesn't change that. Why an overlay widget doesn't protect you goes into this in more depth. The only durable route is to adjust the colours in your own theme.

What changes with WCAG 3.0 (APCA)?

In the upcoming WCAG 3.0 guidelines, the current mathematical contrast formula is replaced by APCA (Advanced Perceptual Contrast Algorithm). APCA aligns better with how the human eye actually perceives contrast — it takes typeface, weight, and context into account, rather than purely the luminance of two colours. If you set your site solidly to the 4.5:1 requirement of WCAG 2.1/2.2 now, you'll be well prepared for that transition too.

See where your site stands

Curious which colours on your site don't yet comply? Scan one page for free. You'll see the measured contrast ratio next to the required one for each spot, with the actual colours of your site — in under 60 seconds, no account.