Low Contrast Placeholder Text
Placeholder text uses colors below the minimum contrast threshold, making input instructions difficult to read.
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
- Placeholder text is barely visible or requires squinting.
- Users must zoom significantly to read field instructions.
Done When
- Placeholder text meets 4.5:1 contrast ratio for normal text.
- Field guidance remains readable at standard and zoomed levels.
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
Placeholder text is a critical instructional pattern but often fails contrast requirements.
How to trigger the issue
Review form placeholders at various zoom levels and attempt to read the guidance text quickly.
Placeholder text at approximately 2.1:1 contrast ratio - fails WCAG AA threshold.
Impact
Critical formatting instructions and examples become invisible, especially at higher zoom levels or in bright lighting.
Manual Testing Protocol
Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.
1. Setup
- Open the form demo with empty fields at 100% zoom.
- Test again at 150% zoom and in bright ambient lighting.
2. Reproduction Steps
- Focus each input field and read the placeholder guidance.
- Attempt to distinguish placeholder text from the background.
- Compare readability with properly contrasted label text.
3. Expected Failure Signals
- Placeholder text is barely visible or requires squinting.
- Users must zoom significantly to read field instructions.
- Format hints and examples become effectively invisible.
4. Fix Verification
- Placeholder text meets 4.5:1 contrast ratio for normal text.
- Field guidance remains readable at standard and zoomed levels.
- Contrast is maintained across light and dark theme variants if present.
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 cannot distinguish empty fields from filled ones
- Critical field instructions are missed
- Form completion accuracy drops
Who Gets Hurt
The Broken Code
input::placeholder {
color: #c8c8c8;
opacity: 0.6;
}
/* Placeholder contrast: 2.1:1 - fails WCAG AA */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 - Placeholder text often contains essential formatting hints; weak contrast makes forms harder to complete correctly.
Related High Issues
Explore neighboring failures in the same severity band.