When we discussed tips to ensure your site is accessible to visitors using screen readers, we looked at using heading tags, alt text, and meaningful link text to ensure your content is accessible to everyone. However, screen readers aren’t the only accessibility feature to consider when making your site visible to everyone. Colorblindness may affect many visitors to your site, as studies show it affects 8% of men and 0.5% of women worldwide. With this in mind, two additional considerations should be made to ensure your site is accessible to colorblind visitors and doesn’t prevent them from seeing your content.
High color differentials
Perhaps the most important consideration for people with vision issues viewing your site is choosing colors that are different for your site’s foreground and background. When colors are too similar, colorblindness and other vision issues can make it difficult for a visitor to distinguish the difference. Use one of the following tools to test your site’s color scheme:
- ContrastChecker.com — This handy website allows you to enter a background and foreground color and runs six tests on the color combination. Find out if your site is WCAG 2.0 Level AA (looser requirements) and AAA (stricter requirements) compliant, see how the combination converts to grayscale, and see if it tests well for colorblindness.
- Chrome Canary browser — This “bleeding edge” development browser is less stable than a regular browser but has extra features. Among those features are development tools to test for contrast.
- WordPress Gutenberg Project — Gutenberg, the new backend editor for WordPress, will include built-in contrast tests. When WordPress 5.0 releases, likely in April 2018, these tests will be built into the WordPress editor itself.
Link visibility
While it’s important to use meaningful link text to make your links easier to differentiate for screen readers, it’s also important to make them clearly visible. In addition to testing the color contrast of your website’s foreground and background, it’s also important to test your regular link text color and your link color. If the colors are too similar, you’ll want to underline your links in order to make them more clearly visible.
Charts and other visuals
If you include other visuals in your site like charts, be sure the visuals can be differentiated without using color. For example, if you include a line graph on your site, can a user tell which line is which if all lines are the same color? Consider using different styles of dots (circle, square, diamond, etc.) on the line graph so that even someone who can’t tell the colors apart can still tell which line is which. Similarly, label individual bars on a bar graph instead of putting all labels at the bottom of a graph so users can tell the bars apart if the colors cannot be distinguished.
This goes for any other visuals you use on your site as well. If the visual is essential to understanding your content, ensure that differentiating colors isn’t necessary to grasp the concept you’re presenting.
For more information on assisting your users with visibly accessible content, see our other article on the subject, Visually accessible content: Can everyone read your site?
