Simulator
Now viewing: Fernhouse sample store (built-in demo)
Compare views · Deuteranopia
These simulations and interactive demonstrations illustrate selected accessibility barriers. They cannot reproduce every individual's experience of disability and are not substitutes for accessibility testing with disabled users or a comprehensive accessibility audit.
Accessibility insights
Deuteranopia
What it involves
Approximates vision with absent or nonfunctional medium-wavelength cones. Reds, greens and oranges converge into similar yellow-brown tones.
Why designs cause difficulty
"In stock" and "Sold out" pills, and red/green chart bars, can look nearly identical.
Common mistakes
- Status shown only by color (red = error, green = success)
- Charts with color-only legends
- Links distinguished from text by color alone
How to improve
- Pair status colors with icons and text labels
- Label chart series directly, or add patterns
- Underline links in body text
- Maintain appropriate contrast between elements
Related WCAG criteria
- 1.4.1 Use of Color (A)
- 1.4.3 Contrast Minimum (AA)
- 1.4.11 Non-text Contrast (AA)
Contrast checker
Large text preview (24px)
Normal body text preview. The quick brown fox jumps over the lazy dog.
Contrast ratio
14.88:1
- AA · normal text needs 4.5:1Pass
- AA · large text needs 3:1Pass
- AAA · normal text needs 7:1Pass
- AAA · large text needs 4.5:1Pass
Calculated with the WCAG 2.x relative luminance formula. Large text means 24px regular or 18.66px bold and up.
Summary
- Screenshot
- Fernhouse sample store (built-in demo)
- Selected mode
- Deuteranopia
- Measured contrast results
- None yet — use “Add this measurement to my summary” above.