Accessible Color and Contrast
Basics
- Never use sensory cues alone to visually convey important information.
- Make sure colors on the page and in images, graphs and charts have a strong contrast.
In depth
Many people have difficulty distinguishing certain colors or colors with low contrast. Users with low vision, color blindness, monochrome screens, screen rendering problems, light interference, and other issues rely on secondary, non-color cues. RIchard Morton of gov.uk gives a revealing example:
If you can see the number 74 in the main image above, you may have normal colour vision...and if you can see 21 like me, you may have a red-green colour vision deficiency.
As many as 1 in 8 men and 1 in 200 women have the common form of red-green color blindness (NEI).
Don't use sensory cues alone to convey important information
Add secondary cues
Never use color alone to visually convey important information. If color transmits something meaningful on a page (such as a link, required field or active state), provide a secondary method to communicate the information: underline, bold, text additions or other non-color visual cues.
| Color should not be the sole visual cue. | Use a secondary cue for users who are color bind. |
| What if I can't see the color red very well? | Underlining links helps users detect linked text. |
Add clear directions and labels
Instructions should not rely solely on color. For instance, "red button" would be confusing to users who are blind. If you use such sensory indicators, also include a label in the directions ("red submit button") and ensure the element referred to is properly labeled.
| Confusing for blind or colorblind users | Add labels to directions to help users. |
| Click on the green arrow. | Click on the green "Next" arrow in the lower right. |
Sufficient contrast
For people with color blindness or other vision problems, high contrast makes text much more legible. Make sure colors on the page and in images, graphs and charts have a strong contrast. Try to achieve these visual color contrast ratios:
- Between text and background: 4.5:1
- Between link and non-link text: 3:1
| Insufficient contrast | Sufficient contrast |
| Low-contrast font colors make it extremely difficult for users with low or color vision deficiencies to read your content. | Low-contrast font colors make it extremely difficult for users with low or color vision deficiencies to read your content. |
How to test
Manually evaluate several pages (the homepage, a representative internal page and any pages that contain unique elements). If color visually conveys important information, ensure that an alternative method of conveying that information is present, including secondary cues and textual directions or labels.
A quick way to evaluate contrast is to take a screenshot of a page and change it to black and white. If elements are difficult to distinguish, increase the contrast ratio.
Contrast checkers
- WebAIM's color contrast checker
- Color Contrast Analyser (Windows and Mac)
- Color Contrast Analyzer (Chrome)
- WCAG Contrast Checker (Firefox)
Relevant W3C WAI documents
- WCAG 2.1 Guideline 1.3.3 Sensory Characteristics: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
- How to Meet WCAG 2.1 Guideline 1.3.3
- WCAG 2.1 Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
- How to Meet WCAG 2.1 Guideline 1.4.1
- WCAG 2.1 Guideline 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
- How to Meet WCAG 2.1 Guideline 1.4.3
Get help with web accessibility!
- Connect with us on the #accessibility Slack channel at asu-community.slack.com.
- Subscribe to the ITACCESS mailing list.
- Book an appointment at the Access Clinic, held online every Wednesday from 1-5 p.m.