Using sufficient contrast for images that convey information
Status
- New technique
- GitHub Issue
- Email
- [LVTF] Technique volunteers needed Technique volunteers needed - Joshue O Connor
- Re: [LVTF] Technique volunteers needed - Laura Carlson
- WCAG WG Thread: Color Contrast (was RE: Coming to a decision on 2.2 - which has long since been lost in this thread)
- WCAG WG Thread: Icon Fonts and contrast
- SC to set baseline contrast for images & icons that convey information Laura Carlson
- Minutes:
- Accessibility Requirements for Low Vision Users
- April 2016 Survey
- Addressing survey comments to make it a WCAG 2.1 SC: (LVTF SC ISSUE) New Low Vision SC to set baseline contrast for images and icons that convey information
Applicability
This technique relates to any technology that uses images that convey meaning.
WCAG references
New Low Vision SC needed similar to Success Criterion 1.4.3 (Contrast (Minimum).
See New Low Vision SC to set baseline contrast for images & icons that convey information #3
Description
The objective of this technique is to help ensure that when an image is used to convey information or functionality even given a text-based alternative, it has sufficient contrast.
People with low vision often have difficulty perceiving images that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness) difference of 3:1 or greater can make the image more distinguishable when the person does not see a full range of colors and does not use assistive technology.
Examples
- A Web application uses icons to represent concepts. A 3:1 minimum contrast is used for the foreground and background of each icon.
- Colored slices next to each other in a pie chart have a 3:1 minimum contrast as well as differing patterns or text to differentiate them from each other.
Resources
- Contrast Ratio Calculator
- Color Contrast Samples
- Contrast Analyser – Application
- Contrast Ratio Analyser - online service
- Colorable
- ContrastA
- Color Contrast Analyzer for Chrome
Related Techniques
- G14: Ensuring that information conveyed by color differences is also available in text
- G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
- G182: Ensuring that additional visual cues are available when text color differences are used to convey information
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
Tests
Procedure
For each image within the Web page or application that uses color to convey information or functionality:
- Check that each as a contrast ratio of at least 3:1.
Expected Results
- #1 is true.