- Success Criterion 1.3.3
- Conformance level A
Instruction That Tells Users to Click ‘the Green Button’
1.3.3 — Sensory Characteristics
Scenario
Setting
A pharmacy app's prescription-refill form
What’s wrong
"Click the green button to continue" — color-only reference (also 1.4.1).
Example
<p>Click the green button to continue.</p>
<button style="background:#2e7d32; color:#fff;">Continue</button>Why it matters
A colorblind user or screen reader user cannot identify "the green button" among several buttons, and may click the wrong one while refilling a prescription.
How to test
Read the instruction alone: 'click the green button' relies on seeing color — check whether the button also has a stated name ('click Submit').
How to fix
Reference the button's visible label text, and keep color as a bonus visual cue, never the only identifier.
<p>Click "Continue" to proceed with your refill.</p>
<button style="background:#2e7d32; color:#fff;">Continue</button>Outcome
A color-blind user reads "Continue" and clicks the right button without guessing by color.
Who is affected
Color-blind users and blind screen reader users cannot distinguish buttons described only by color.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Instructions That Identify Something Only by Shape or Position
- Instruction Given Only Through an Icon, With No Text Meaning
- Instruction That Says ‘See the Sidebar’ With No Other Locator
- Instruction That Identifies a Button Only by Its Size
- Instruction That Relies on an Audio Cue With No Visual Backup
- Instruction That Relies on a Swipe Direction With No Named Alternative