Careful use of color is important for accessibility. There are two primary rules for color to meet Web Content Accessibility Guidelines (WCAG) 2.0:
- Do not use color as the only way to convey information. (In other words, do not use a green “X” for “yes” and a red “X” for “no.” It would be better to use the word “yes” in green and the word “no” in red.)
- Choose colors that have adequate contrast (4.5:1 or better for normal-sized text).
But how easy is it to accomplish the second rule? One day it occurred to me that many of the default theme colors in Microsoft Word do not meet the color contrast standard when used with a white background. Then, because I was curious, I started checking all of the colors. What I found surprised me. There are 60 “theme colors” and 10 “standard colors” on the default color palette. Of those, 25 meet the 4.5:1 ratio, and 45 do not! That is a failure rate of 64%.
Google Docs has similar results. There are 80 colors in the Google Doc palette. Only 30 of those meet the 4.5:1 ratio, for a failure rate of 62.5%.
What Can You Do?
Use the colors that meet the WCAG 2.0 guidelines. For your convenience, I have created a document with tables that shows all of the colors in the standard palette for both Word and Google Docs, and the ratio with white. Print the document in color and hang it near your computer. It will help you choose colors that work.
You are not limited to the default theme. Word has other themes you might want to check out to see if they have colors you prefer that are also accessible. You can also choose custom colors. To change the theme colors on either Mac or Windows, click on the “Design” tab, and then click the arrow under “Colors.” Choose a color palette from the list. For Google Docs there is only one palette, but you can create custom colors by clicking the word “Custom” at the bottom of the color palette.
I recommend several resources to help you check your colors for accessibility:
- Colour Contrast Analyser – This downloadable app allows you to check contrast between two colors on any document.
- Tanaguru Contrast Finder – If you have colors that almost meet standard, this online tool can make suggestions for replacement colors.
- WebAIM Color Contrast Checker – Enter or pick two colors to get the contrast ratio. It will tell you whether the ratio passes.
With these resources and the chart, you can use color with confidence!
This article was contributed by Cindy Jouper, CPWA, for the Accessibility Blog. Subscribe to her blog for monthly articles, tips, and professional development opportunities delivered to your inbox.