September 22, 2020 · reala11y team

Meeting WCAG 1.4.3 colour contrast without ruining your design

How to hit WCAG 1.4.3 contrast ratios (4.5:1 and 3:1) on WordPress without wrecking your brand — the numbers, the tools, and the mistakes to skip.

Colour contrast is the WCAG criterion almost everyone trips on, and the one people most often “fix” by quietly degrading their design. It does not have to be that trade-off. WCAG 1.4.3 (Contrast Minimum, Level AA) asks for measurable ratios, and once you understand what is actually being measured, you can hit those numbers while keeping a brand that still looks like yours.

The two ratios you actually need

WCAG 1.4.3 sets two thresholds for text against its background:

• 4.5:1 for normal text.
• 3:1 for large text — defined as 18.66px (14pt) bold, or 24px (18pt) and up at any weight.

A “ratio” here is the relative luminance of the lighter colour over the darker one, on a scale from 1:1 (identical) to 21:1 (pure black on pure white). It is not about hue — two colours can look very different and still fail, because the formula only cares about perceived lightness.

A few things people miss:

• Logos and purely decorative text are exempt. Brand wordmarks do not have to pass 1.4.3.
• Disabled controls (a greyed-out button) are exempt too.
• Placeholder text inside inputs is not exempt. If users read it, it counts.
• 1.4.11 (Non-text Contrast) is a separate criterion covering UI component borders, icons, and focus indicators at 3:1. Passing text contrast does not cover those.

Frequent mistakes that quietly fail

Most contrast failures are not bold design choices — they are small defaults nobody re-checks:

• Grey-on-white body text. #999 on #fff is roughly 2.85:1 — a fail. The classic “subtle, elegant” light grey is the single most common 1.4.3 miss on WordPress sites.
• Text over a photo or gradient. The ratio changes pixel by pixel. A hero caption can pass over the dark part of an image and fail over the sky.
• Semi-transparent text. rgba(0,0,0,0.6) composites against whatever sits behind it, so the effective colour — not the value you typed — is what gets measured.
• Link colour against body colour, not the background. Links must contrast with their background like any text, but if colour is the only thing distinguishing a link from surrounding text, that link also needs a 3:1 contrast against that text (or another cue such as an underline).
• Theme and plugin defaults. A page builder’s default muted caption colour often ships below 4.5:1 out of the box.

Hitting the ratio without ruining the design

You rarely need to jump to pure black. Small, deliberate moves usually get you across the line:

• Darken the text one or two steps, not all the way. #595959 on white is ~7:1 and still reads as a soft grey, not harsh black.
• Adjust the background instead of the text. Dropping a section background from #fff to a slightly deeper tone can rescue light text without touching your type colour.
• Add weight or size to cross into “large text.” Bumping a 16px label to 24px lets it pass at 3:1 instead of 4.5:1 — sometimes easier than recolouring.
• For text over imagery, add a scrim (a semi-opaque overlay) or a text shadow, or place text on a solid panel. Measure against the darkest region the text can land on.
• Keep an accessible accent. Pick one brand-adjacent colour that clears 4.5:1 on your background and reserve the off-spec original for large headings or non-text use.

Tools that measure it for you

Do not eyeball contrast — measure it:

• Browser DevTools. Chrome and Firefox show a contrast ratio (and a pass/fail tick) right in the colour picker when you inspect a text element.
• WebAIM Contrast Checker and the TPGi Colour Contrast Analyser for spot-checking specific pairs.
• axe DevTools or Lighthouse to sweep a whole rendered page.

In WordPress specifically, the catch is that the failing colour usually lives in theme or page-builder CSS, not in your post content — so a content-only check can miss it. reala11y’s scanner flags low-contrast text against its computed background as part of a broader WCAG 2.2 AA pass; see how it works for what it inspects and changes, and the WCAG 2.2 guide for where 1.4.3 sits among the other criteria.

An honest takeaway

Contrast is one of the most automatable parts of WCAG — a tool can measure a ratio far more reliably than your eye can — and it is worth fixing first, because low contrast affects every sighted user in bright light, not only people with low vision. But automated checks still only catch a slice of the picture (automated tooling detects roughly 30–40% of WCAG issues by criteria), and contrast over real photographic backgrounds often needs a human to judge the worst-case pixel. So measure ruthlessly, fix the easy wins, and pair the scan with manual review. reala11y helps your site move toward WCAG 2.2 AA conformance by fixing code-level issues at the source — we never describe a fixed page as “WCAG compliant,” and no tool can honestly call a site fully accessible on automated checks alone.