It’s important to always consider color contrast when creating a document, presentation, or another resource. When text is hard to read, individuals often bypass sections of a resource or simply become unable to understand the resource itself. Always consider that many individuals may have visual difficulties including color blindness and low vision, causing possible difficulties in seeing a resource.
As a general rule of thumb, consider that if it’s hard to view for the person creating the resource, then it’s hard to view for someone viewing the resource.
Color contrast standards
Under the Web Content Accessibility Guidelines 2.0, Level AA, which apply to the web documents, there are two color ratios to know:
- A ratio of 4.5 to 1 for normal sized text, sized at less than 14 points. This rule also is applicable to text that is less than 18 points and has no bold style applied.
- A ratio of 3 to 1 for large-sized text, sized at 18 points for more. Text that is 14 points and bolded is also considered to be large sized with the 3:1 ratio being applicable.
For example, text that is red on blue has a contrast ratio of 1.5:1, and would not be viewable to many people. Adjusting it to yellow on blue instead holds a ratio of 5.8:1 and is viewable to most people.
Tools to check color contrast
There are several tools that can easily help in checking color contrast for documents, presentations, images, the web, and other resources.
- The Colour Contrast Analyser, by the Paciello Group, is a free tool for Windows and macOS to aid in determining proper color ratios. The tool has multiple aspects, including selecting a foreground and background color as a quick check, plus a tool to analyze a portion of the screen against different visual difficulties.
- The Color Contrast Analyzer, by NC State University, is an extension for Google Chrome. It covers many of the same items at the Analyser by the Paciello Group but focuses specifically on the web.
- The Chromatic Vision Simulator, by Kazunori Asada, is a free mobile app for Android and iOS. It uses the camera of a mobile device to simulate various color vision deficiencies. This allows for looking at items in the world at large and having an example of how color is perceived by different people.
Questions? We can help!
Check out our upcoming calendar of accessibility workshops!
Want to know more about accessibility? Contact us.