WCAG 1.4.6 — Contrast (Enhanced)

What this requires

Text and images of text must have a contrast ratio of at least 7:1 against their background. The threshold for large text (18pt or 14pt bold, roughly 24px / 19px bold) drops to 4.5:1. Incidental text, inactive UI components, decoration, and logotypes are exempt.

The 7:1 target is calibrated against the needs of users with moderately severe vision loss (roughly 20/80) — a population large enough that the AAA target is the right default for content-heavy sites, even when only AA compliance is claimed.

How AI coding tools fail this

When asked for "muted secondary text" or "subtle helper copy", AI tools reach for greys that often satisfy 4.5:1 against white but fail 7:1. The most common default — light-grey body text on white — clears AA and breaks AAA.

The second pattern: brand colours used unchecked. A brand palette that defines an accent like #3b82f6 (Tailwind blue-500) works fine as a button background with white text, but when the same colour is used as inline link text against a white background it lands at 4.6:1 — a hair over AA and well under AAA.

The third: text on top of imagery and gradients. AI tools usually ship the image without a contrast guard (a darkening overlay, a shifted gradient stop) and let the text fend for itself. Sometimes it works; often the ratio dips below 7:1 in the centre of the image.

Failing examples

Body text colour that clears AA but not AAA:

<p className="text-gray-500">
  Your changes have been saved automatically.
</p>

(With text-gray-500 on white, the ratio is roughly 4.9:1 — AA pass, AAA fail.)

A brand-accent link colour at 4.6:1:

<a href="/docs" className="text-blue-500 underline">
  Read the documentation
</a>

Passing examples

Use a darker grey that clears 7:1:

<p className="text-gray-700">
  Your changes have been saved automatically.
</p>

A darker accent for inline text that clears 7:1:

<a href="/docs" className="text-blue-800 underline">
  Read the documentation
</a>

Or — when AAA is the target across the design system — work with contrast-checked tokens at design time:

// design-tokens.ts
export const text = {
  primary: "oklch(0.20 0 0)",   // ~12:1 on white
  secondary: "oklch(0.35 0 0)", // ~7.1:1 on white
  muted: "oklch(0.45 0 0)",     // <7:1, large-text only
};

Edge cases

Large text (≥18pt or ≥14pt bold) needs only 4.5:1 at AAA.
Disabled controls are exempt. They are "inactive UI components" by the criterion's wording. Don't manufacture extra contrast for them.
Logotypes are exempt.
Decorative text (a watermark, a stylised background quote) is exempt as long as it carries no meaning.
Text over images must clear the ratio at every point the text overlaps the image. A gradient overlay or a flat background behind the text is the safest pattern.
Tools like the Stark Figma plugin or the Polypane browser check both AA and AAA. Build the check into the design tool, not the QA queue.

How Jeikin handles this

axe-core checks contrast against AA by default. For projects targeting AAA, Jeikin's design-rule layer runs the same check at the 7:1 / 4.5:1 thresholds and flags every text/background pair that falls short. The dashboard maps each finding to the component and the token responsible, so the fix lands in the design system rather than the markup.