WCAG 1.4.3 Contrast Minimum — Testing Guide (2026)

WCAG 1.4.3 Contrast (Minimum) is a Level AA criterion that requires text and images of text to have a contrast ratio of at least 4.5:1 against the background, with an exception for large text (3:1). I

WCAG 1.4.3 Contrast (Minimum) is a Level AA criterion that requires text and images of text to have a contrast ratio of at least 4.5:1 against the background, with an exception for large text (3:1). It is one of the most-violated and most-consequential accessibility rules. This guide covers what it means in practice, how to test for it, and how to fix violations at the code level.

What WCAG 1.4.3 requires, in plain English

If you put text on a background, the colors must be different enough that users with low vision can read the text. The specific math: the ratio of the relative luminance of the lighter color to the darker color must be 4.5:1 or higher. Large text (18pt regular, or 14pt bold and up) gets a looser 3:1 threshold.

Exceptions: logos, brand names, and decorative text are exempt. Inactive UI components (disabled buttons) are exempt but should still be distinguishable.

Why it matters

About 2.2 billion people worldwide have some form of visual impairment. Low contrast affects users with age-related macular degeneration, cataracts, reduced color vision, and also users in bright sunlight on a phone screen. In legal terms, WCAG 2.1 AA is the de facto standard cited in ADA lawsuits in the US, EN 301 549 in the EU, and the accessibility regulations of most other regulated jurisdictions.

Common violations

1. Gray-on-gray

The most common. Designers love medium gray text on light gray backgrounds because it feels modern. #999999 on #FFFFFF is 2.84:1 — fails AA. #767676 on #FFFFFF is 4.54:1 — passes.

2. Brand color misuse

The company's bright cyan looks great on the marketing site. It is used for "Learn more" links on a white background. Ratio: 2.1:1. Fails. Fix: darken cyan for text contexts, keep brand cyan for large display elements only.

3. Placeholder text

Input placeholders are often rendered in a very light gray that fails even the 3:1 large-text standard. Since the user needs to read the placeholder to understand the field, this blocks comprehension.

4. Overlay text on images

Hero banners with "Sign up free" on top of a photo. The photo varies in brightness, the text contrast varies too. One photo, perfect ratio. Another, 1.8:1.

5. Disabled states

A disabled button using #D0D0D0 on #FFFFFF is 1.4:1. Users cannot even read that it says "Submit". While disabled components are technically exempt, unreadable disabled components signal a broken UX.

Testing manually

Tools

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) — canonical tool, input two hex codes, get the ratio
• Chrome DevTools — Inspect any element, the computed styles panel shows contrast ratio next to the color value
• Stark plugin (Figma, Sketch, Chrome) — live contrast checking in design tools
• Colour Contrast Analyser (TPGi) — desktop app that samples any pixel on screen

Mobile testing

For Android, Accessibility Scanner from Google catches contrast issues in real runs. Install from Play Store, enable in Settings → Accessibility, run the app, review findings. For iOS, Accessibility Inspector (built into Xcode) does the same.

What to actually test

1. Body text on the primary background — every screen
2. All button labels — default, hover, pressed, disabled
3. Link text — inline and standalone
4. Form labels and placeholder text
5. Error messages and validation hints
6. Icons that convey state (check marks, close x, warning triangles)
7. Data visualization — chart axes, legends, tooltips
8. Text over images / video — sample at multiple points

Automated checks

Web

• axe-core — runs as a Playwright/Cypress plugin, flags contrast violations per element with the measured ratio
• Lighthouse — accessibility audit includes contrast
• Pa11y — command-line, good for CI gating

Android

• Accessibility Scanner — manual run, cannot be automated (runs on device)
• Espresso AccessibilityChecks — AccessibilityChecks.enable().setRunChecksFromRootView(true) flags contrast in instrumented tests
• axe DevTools Mobile — commercial, more thorough than Scanner

iOS

• XCUITest + Accessibility Audit API (Xcode 15+) — audit in tests

Fixing violations

Code-level patterns

Design tokens for accessible colors:

// colors.kt
object AccessibleColors {
    val TextPrimary   = Color(0xFF1F2937)  // 15:1 on white
    val TextSecondary = Color(0xFF4B5563)  // 7.5:1 on white
    val TextTertiary  = Color(0xFF6B7280)  // 4.7:1 on white — AA pass
    val TextDisabled  = Color(0xFF9CA3AF)  // 2.8:1 — still exempt, but
    val LinkDefault   = Color(0xFF0066CC)  // 5.3:1 on white
}

Never use #CCCCCC for text. Ever. Define a minimum text color in your theme and make everything else a derivative.

CSS custom properties for web:

:root {
  --text-primary: #111827;     /* 16:1 */
  --text-secondary: #374151;   /* 9:1 */
  --text-muted: #4b5563;       /* 7.5:1 */
  --link: #1d4ed8;             /* 7:1 */
}

Dark mode requires separate checks. Inverting colors does not preserve contrast ratios. #666666 on #000000 is 4.1:1 — fails by a hair. Test dark mode independently.

Fixing overlay text

• Add a semi-transparent dark overlay (rgba(0,0,0,0.5)) behind the text
• Use a text stroke or text-shadow for readability
• Place text in a color-controlled box rather than floating on an image

How SUSA tests contrast

SUSA runs axe-core for web explorations and the Android accessibility contrast checks for native apps. Violations are reported per-screen with the measured ratio, the failing selector / element, the suggested threshold, and a screenshot highlighting the offending element.

The accessibility_user persona drives the exploration with larger font sizes and TalkBack enabled — revealing contrast issues that only surface at 200% zoom or with the accessibility contrast mode turned on.

susatest-agent test myapp.apk --persona accessibility_user --wcag-level AA

Expected output includes a WCAG scorecard, one row per failed criterion, with severity ranked by user impact. 1.4.3 violations are flagged as high because they affect readability for a large user population.

What passes and what does not

Use this table as a quick sanity check. Anything in the "Fail AA body" column is a violation for body copy. Anything in "Fail AA large" is a violation even for headlines.

Test every screen, every button state, every color combination. The fix is almost always trivial — pick a darker shade. The consequence of not fixing is a lawsuit in some jurisdictions and a worse app for everyone.