Low Contrast
Foreground and background colors are too similar, reducing readability for many users.
Try It Yourself
Demo warning
This demo describes low-contrast failures while keeping the on-screen text compliant.
Review the compliant samples and imagine them rendered with lower contrast ratios.
Compliant sample: Your account will be disabled if billing details are not updated by 4:00 PM.
Compliant muted: Your account will be disabled if billing details are not updated by 4:00 PM.
Compliant emphasis: Your account will be disabled if billing details are not updated by 4:00 PM.
This demo keeps contrast compliant while illustrating where low-contrast would appear.
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.