All articles
WCAGCheck Editorial

WCAG 3 Contrast: What Developers Need to Know (And What You Can Ignore Until 2030)

WCAG 3's new contrast algorithm won't be finalised until 2030. Here's what's changing, what stays the same, and how to handle contrast testing now.

WCAG 3 Contrast: What Developers Need to Know (And What You Can Ignore Until 2030)

Adrian Roselli published an update this week on where WCAG 3's contrast requirements currently stand. The short version: WCAG 3 is still years away from completion—possibly 2030 at the earliest—and the contrast algorithm it will use isn't finalised.

This matters because contrast is one of the most common accessibility issues developers face. The WebAIM Million report consistently finds low contrast text on over 80% of home pages tested. If you're building sites in the UK, you need to meet WCAG 2.1 AA for public sector work, and increasingly for private sector too. So what does WCAG 3 mean for your current projects?

The Current State of Play

Right now, WCAG 2.1 AA requires a contrast ratio of:

  • 4.5:1 for normal text (under 18pt or 14pt bold)
  • 3:1 for large text (18pt+ or 14pt+ bold)
  • 3:1 for UI components and graphical objects

This uses a luminance-based calculation that's been the standard since WCAG 2.0 in 2008. You've probably used tools that calculate this ratio—browser dev tools, Figma plugins, online checkers.

WCAG 3 proposes replacing this with something called APCA (Accessible Perceptual Contrast Algorithm). The idea is that APCA better reflects how humans actually perceive contrast, particularly for different font sizes and weights.

What APCA Does Differently

The current WCAG 2 algorithm treats contrast as symmetrical: white text on dark blue has the same ratio as dark blue text on white. But that's not how we see it. Light text on dark backgrounds appears differently to dark text on light backgrounds.

APCA accounts for this. It also factors in font weight more explicitly, giving you different requirements for thin fonts versus bold ones.

In practice, this means:

  • Some colour combinations that pass WCAG 2 would fail APCA
  • Some combinations that fail WCAG 2 would pass APCA
  • You'd need to check contrast differently depending on whether your text is light-on-dark or dark-on-light

Why This Doesn't Change Your Work Today

Here's the thing: WCAG 3 isn't a standard yet. It's a working draft. The W3C hasn't finalised the contrast algorithm, and they won't for years.

If you're working on a UK public sector project, you're legally required to meet WCAG 2.1 AA under the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018. That means the 4.5:1 and 3:1 ratios.

If you're working on private sector projects, UK courts and the Equality Act 2010 typically reference WCAG 2.1 AA as the benchmark for reasonable adjustments. That's not changing until WCAG 3 is actually published and adopted.

So for any project you're building now, or in the next few years: stick with WCAG 2.1 AA contrast requirements.

Should You Experiment with APCA?

If you want to get ahead of the curve, there's nothing stopping you from testing your designs against APCA as well as WCAG 2. Several tools now support both:

  • The APCA Contrast Calculator at color.a11y.com
  • Polypane browser includes APCA checking
  • Some Figma plugins offer APCA alongside traditional ratios

Roselli suggests two approaches if you want to future-proof:

  1. Meet both standards: Design for WCAG 2.1 AA compliance, then check if it also passes APCA. If it fails APCA, consider whether you can adjust.

  2. Exceed WCAG 2 requirements: Aim for higher contrast than the minimum. If you're hitting 5:1 or 6:1 for body text, you're likely to pass whatever WCAG 3 ends up requiring.

The second approach is simpler. Higher contrast rarely hurts readability (unless you go pure black on pure white, which can cause issues for some users with dyslexia or visual stress).

Practical Contrast Fixes

While we're talking contrast, here are the most common issues we see:

Grey placeholder text: Form placeholders often use light grey that fails contrast. Either darken the grey or use visible labels instead of relying on placeholders.

Light grey on white: Footer text, disabled states, and secondary content often drops below 4.5:1. Check your greys—#767676 is roughly the lightest grey that passes against white.

Coloured text on coloured backgrounds: Brand colours rarely work well together for text. Check every combination, not just your primary text colour.

Text over images: If you're placing text on photographs or gradients, you need sufficient contrast across the entire text area. A semi-transparent overlay often helps.

The Bottom Line

WCAG 3 and APCA are interesting developments, but they're not your problem today. Meet WCAG 2.1 AA contrast requirements on your current projects. If you want to experiment with APCA, treat it as a bonus check, not a replacement.

When WCAG 3 is finalised—likely around 2030—there'll be a transition period. You'll have time to adjust. For now, focus on getting the fundamentals right: 4.5:1 for body text, 3:1 for large text and UI components.

WCAGCheck scans your website for WCAG compliance issues and tells you exactly what to fix. Try it free at wcagcheck.co.uk