Document Accessibility Guide: Color Contrast
It is important to have sufficient contrast between text and background colors so people can easily read your document. Many people struggle with telling colors apart, especially problem colors like red and green. This includes older adults and people with color blindness. Pale colors on light backgrounds are difficult to see for many people. The two colors that offer the best contrast together are black and white. However, if you need to use more varied colors, there are three ratios to keep in mind depending on the type of content:
- Regular text (below 18-point text): 4.5:1 contrast ratio
- Large Text (above 18-point text or 14-point bold text): 3:1 contrast ratio
- Non-text contrast (graphics, icons, charts): 3:1 contrast ratio
Bar charts, maps, and other information graphics often use color to convey information. When deciding on colors for these graphics, use a color contrast tool to check your ratio before publishing. It is best to use patterns and textures to distinguish between items like bar charts. There is more detail on this in the Sensory-Based Information section of this guide.
Here are links to helpful color contrast tools that are simple to use:
The Tanaguru Contrast Finder – this website lets you compare colors, displays the minimum ratio, and can suggest similar colors to those that you are currently using
The WCAG Color Contrast Checker – this is a Firefox browser add-on that checks the color contrast of web pages and electronic documents. There is also a Chrome version of the add-on.
The Color Contrast Analyzer – this is a Chrome add-on that is useful for checking the contrast levels of text over image backgrounds.
Accessible Brand Colors – this tool can show you how your colors work together in different combinations.
You can use these tools to test your existing documents, or you can use them to choose accessible color combinations for future projects.
Document authors are responsible for choosing colors with sufficient contrast. The Graphics team is available to assist you. If you are confused about how to choose appropriate colors, contact Graphics right away. Don’t wait until the end of the process. Be proactive about color accessibility.