WCAG 1.4.3 — Contrast (Minimum)

What this requires

Every text element must meet a minimum contrast ratio against its background: 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold). The same rule applies to text inside images. Logos and decorative text are exempt. The standard is measured by the WCAG 2 contrast formula, which compares relative luminance — what the eye perceives, not what the pixel value is.

How AI coding tools fail this

When an AI assistant generates a colour palette or a "muted" text variant, it tends to pick visually pleasant mid-grey tones — #888, #999, text-gray-400, text-slate-500. These look modern in a Figma mockup but routinely measure 3.5:1 or 4:1 against a white background. They pass an "it looks subtle" eye test and fail an "it meets WCAG" measurement. Named project tokens like text-muted or text-secondary may or may not meet contrast depending on how each project tunes them — measure, don't assume.

The same trap shows up with placeholder text, disabled-state text, and "helper" text under form fields. Designers and AI tools both treat these as visually de-emphasised, so contrast quietly drops below the threshold. Screen-reader users are unaffected; everyone else who depends on visual reading suffers.

Failing examples

Light-grey body text that measures around 2.5:1:

<p className="text-gray-400">
  Your invoice will arrive within 24 hours.
</p>

Placeholder used as the only label, mid-grey by default:

<input type="email" placeholder="Email address" />

Passing examples

Body text using a token that meets 7:1 (also satisfies AAA):

<p className="text-foreground">
  Your invoice will arrive within 24 hours.
</p>

Visible label paired with the input, no contrast trap:

<label htmlFor="email">Email address</label>
<input id="email" type="email" />

Edge cases

Large text (18pt regular, or 14pt bold and up) only needs 3:1, but err toward 4.5:1 — the threshold was set when most screens were better.
Text inside images is held to the same standard. Banner overlays, screenshots with captions, and "image of text" patterns all count.
Disabled controls are exempt under WCAG 2, but if the disabled state isn't obvious the user can't tell it's disabled — design with both a contrast change AND a state cue.
Placeholder text is text. If it's the only visible label, it must meet contrast and persist visibly — moving the label into a <label> element is almost always the fix.
Hover and focus states must also meet contrast in their visible state, including the focus ring against its surrounding background.

How Jeikin handles this

Jeikin's CLI scanner detects ad-hoc colour values in component files and flags them when they don't resolve to AAA-tuned design tokens. The MCP server, when called by an AI assistant, returns the actual measured ratio for the foreground/background pair so the assistant has data to reason with rather than guessing.

The dashboard tracks each contrast finding to resolution with the measured ratio recorded — useful evidence when a regulator or auditor asks how the team validated colour decisions.