Low Contrast
Foreground and background colors are too similar, reducing readability for many users.
Try It Yourself
This simulator is intentionally broken. Recreate the failure path, capture evidence, and validate the fix with the same sequence.
Scenario
In a high-pressure workflow, Low-vision users try to complete a core task and hit this failure pattern.
Watch For
- Content is visually present but difficult to parse quickly.
- Important terms are missed due to weak foreground/background separation.
Done When
- Body text meets minimum WCAG contrast threshold for its size.
- Critical messaging uses stronger contrast than decorative copy.
Scenario
A person in this audience group is trying to complete a core task quickly and encounters this failure pattern.
Guided Run Progress
0 / 5 steps marked
Track setup, action, and failure signals as you run the simulation.
Quick Run Checklist
Demo warning
This demo describes low-contrast failures while keeping the on-screen text compliant.
How to trigger the issue
Review the compliant samples and imagine them rendered with lower contrast ratios.
Low contrast billing alert: Your account will be disabled if billing details are not updated by 4:00 PM.
Low contrast account warning: Your account will be disabled if billing details are not updated by 4:00 PM.
Low contrast confirmation note: Your account will be disabled if billing details are not updated by 4:00 PM.
Manual Testing Protocol
Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.
1. Setup
- View the demo at normal zoom and then at 125% zoom.
- If possible, test in bright ambient light to simulate glare.
2. Reproduction Steps
- Read each sample line from top to bottom.
- Identify key instruction details (dates, limits, warnings).
- Compare effort required against higher-contrast text.
3. Expected Failure Signals
- Content is visually present but difficult to parse quickly.
- Important terms are missed due to weak foreground/background separation.
- Reading fatigue increases over longer paragraphs.
4. Fix Verification
- Body text meets minimum WCAG contrast threshold for its size.
- Critical messaging uses stronger contrast than decorative copy.
- Contrast remains compliant across hover, disabled, and error states.
Evidence Capture Checklist
- Record the exact user goal that fails (for example: submit form, complete checkout, navigate menu).
- Capture screen recording + keyboard path from first interaction to failure state.
- Map failure to WCAG 1.4.3 (Level AA) and affected user groups.
- Document business impact: conversion loss, support burden, legal/compliance risk, or trust damage.
The Impact
What Happens
- Users miss instructions and critical messaging
- Reading requires high effort and magnification
- Long-form tasks become unsustainable
Who Gets Hurt
The Broken Code
.muted-copy {
color: #b9b4ae;
background: #fffbf7;
font-size: 14px;
}WCAG 1.4.3: Reference
"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1."
Level AA - Readable typography is a baseline usability requirement, not a visual enhancement.
Related High Issues
Explore neighboring failures in the same severity band.
Missing Form Labels
Inputs have no accessible names
Keyboard-Inaccessible Select
Custom dropdown works only with mouse
Low Contrast Placeholder Text
Form placeholders have insufficient contrast