General Information
Don’t shy away from using colors in your websites, documents, presentations etc. but do make sure to use color intelligently. Having a general understanding of color and color contrast is important to help communicate in an accessible manner.
“Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.”
W3C Working Group Notes
Why using colors accessibly is important
- Colors affect the readability of your document and site for all users, not just those with vision impairments.
- The only people for whom the color choices don’t matter are those using screen readers.
- Some people cannot read text if there is not sufficient contrast between the text and background.
- High contrast is required by some people with visual impairments, including many older people who lose contrast sensitivity from ageing.
- While some people need high contrast, for others — including some people with reading disabilities such as dyslexia — bright colors are not readable. They need low luminance.
- The WCAG 2.0 require that color combinations meet clearly defined contrast ratios. In order to meet the guidelines at Level AA, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).
How to use color accessibly
- Don’t use color as the only way to communicate information, always make sure meaning is conveyed in multiple ways.
- Choose colors with sufficient contrast.
- Check the color contrast of your items to make sure they are accessible, this is true for the main text of your document, links in your document and images of text.
- For links, use another identifier such as bold or underline to indicate a link verses using color alone.
- Run your site and documents through color contrast checkers to make sure the contrast ratio is good.
- To meet basic guidelines (Level AA) text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).
- WCAG Contrast Checker is a Firefox browser plug-in.
This plug-in checks the compliance of contrast levels of foreground and background color combinations based on the requirements of WCAG 2.1. - Color Contrast Analyzer is a Chrome browser plug-in.
This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page. - A11Y Color Blindness Empathy Test is a browser add-on to see what a site looks like to people with various types of color blindness and vision loss.
Firefox a11y extension and the Chrome a11y extension
- WCAG Contrast Checker is a Firefox browser plug-in.
NEXT PAGE: Best Practices – Multimedia