The RGAA requires a minimum contrast ratio between text and its background. The rule derives from WCAG 2.1 AA: 4.5:1 for normal text, 3:1 for large text (at least 24 px, or 18.5 px bold). Light grey text on a white background isn't an aesthetic stance — it's a measurable non-conformity.

The thresholds, unambiguously

  • →Normal text: ratio ≥ 4.5:1
  • →Large text (≥ 24 px, or ≥ 18.5 px bold): ratio ≥ 3:1
  • →Interface components and informative graphical elements (icons, field borders, focus): ratio ≥ 3:1 — that's criterion 3.2

How to measure

  • →Chrome DevTools: inspect a piece of text, the "Accessibility" pane shows the ratio and flags the failure
  • →WebAIM Contrast Checker (online, free) — to test two colours by hand
  • →Figma: the "Stark" or "A11y - Color Contrast" plugins to check from the mockup stage
  • →axe-core: automatically detects insufficient contrast across a whole page

Official exceptions

The criterion doesn't apply to logos, purely decorative elements, or disabled components (`disabled`, deliberately excluded). Text embedded in a purely illustrative image isn't targeted either — but as soon as that text carries information, it is. Everything else, including the `:hover` and `:focus` states, must meet the ratio.

// Common design mistake

Grey #999 on white reaches 2.85:1 — non-compliant. The minimum acceptable grey-on-white is about #767676 (4.54:1). To stay safe in e-commerce, don't use any grey lighter than #595959 for body text.

The areas that fail most in e-commerce

  1. 01Struck-through prices and "from" mentions in light grey
  2. 02Promo badges: white text on a yellow or pastel background (often below 3:1)
  3. 03Text overlaid on a banner photo (contrast varies pixel by pixel)
  4. 04Form placeholders in very light grey
  5. 05Disabled button states you assume are exempt while they remain clickable

⚠ Text on an image

White text placed on a photo passes contrast in one spot and fails in another depending on the area of the image. The fix: a semi-opaque overlay under the text, or a dark gradient, to guarantee the ratio whatever the visual.

Frequently asked questions

Does contrast apply to icons?

Yes, to informative icons (cart, status, alert) via criterion 3.2: minimum 3:1 ratio with their background. A purely decorative icon paired with text isn't concerned.

What about dark mode?

The ratio must be met in every theme offered. A dark mode with medium grey on dark grey fails just as much as light grey on white. Test both themes separately.

AA or AAA?

The RGAA and the EAA target level AA (4.5:1). Level AAA (7:1) is a comfort target, not required. No need to force it everywhere, but it's a good goal for main body text.

A non-compliant brand colour — what do we do?

Keep the brand colour for fills, backgrounds and non-text elements, and only darken the shade when it serves as text. That's the most common compromise between visual identity and compliance.

Detect every insufficient contrast on your site, page by page:

→ Run an audit