Contrast
Contrast
Color contrast is the difference between the background color and foreground color. Your background color is the color that is on the page (e.g., a Google Doc or MS Word document starts with a white background). The foreground color is the color of the text or images that are being put on top of the background (e.g., Google Docs and MS Word start with black text in the foreground).
Color contrast is often expressed as a contrast ratio that ranges from 1 to 21 and is written as 1:1 (white text on white background) and 21:1 (black text on white background). The first number in the ratio refers to the relative luminance of light colors the second number refers to the relative luminance of dark colors.
WCAG 2.0 AA guidelines require a minimum contrast ratio of 4.5:1 for the visual presentation of both text (smaller than 18 points) and images. Large text (18-point font or larger or 14-point if bold) requires a 3:1 contrast ratio.
WCAG 2.0 AAA guidelines require a minimum contrast ratio of 7:1 for the visual presentation of both text (smaller than 18 points) and images. Large text (18-point font or larger or 14-point if bold) requires a 3.5:1 contrast ratio.
Have you ever struggled to match a pair of black and navy blue socks and needed better light to tell the difference? Imagine not being able to get “better light” to tell what color something is. Someone who experiences a form of color blindness may see the world differently from you. Additionally, a student who has low vision may override your document colors to view them in a color combination that works best for them.
The background colors may be perceived differently by users with visual impairments, and those with cognitive differences may have difficulty reading text at certain contrast levels.
When considering contrast, navigating the course content gets a lot more difficult if contrast standards are not met. While many colors may look fine to the average user, they may be impossible for someone who has color blindness. If you ask a student to identify a red bar on a chart, they will not be able to complete the task if they have achromatopsia, deuteranopia, or protanopia (forms of color blindness). This is why color should never be the only indicator used to identify something.
There are several tools that you can use to ensure that you select accessible contrast.
In order to use a contrast tool, you have to understand how color information is presented. You will see colors presented in one of three ways:
Color Identification:
Hexadecimal (Hex Code): A hexadecimal (Hex) format that presents colors as a combination of six letters and numbers. When a color is presented in Hex format, it starts with a hash and is followed by characters.
#003057
RGB (Red, Green, Blue): The amount of red, green, and blue that generates a color. This is presented as a series of three numbers.
0, 48, 87
HSL (Hue, Saturation, Lightness): Hue, Saturation, and Lightness are related to how people perceive colors.
207° 100% 17%
If you need to check if a pre-existing document meets contrast, the Contrast Checker will assess your color information.
Contrast Checker (WebAIM)
Using WebAIM Color Contrast Checker (Google Doc)
When building a document, you should select an accessible color palette before beginning your work.
Using Color Safe (Google Doc)
If you would like to experience the world as someone who has a form of color blindness, there are tools that will allow you to do that.
Colorblindly (Chrome Extension)
It is always easier to build accessibly than it is to have to remediate work for accessibility compliance.
Adobe Color Accessibility Tools (Adobe)
Colorblindly (Chrome Extension)
Color Safe (accessible color palette generator)
Using Color Safe (Google Doc)
Contrast & Color (Carnegie Museums)
Contrast and Color Accessibility (WebAIM)
Contrast Checker (Acart Communications)
Creating Accessible Content: Color (Portland Community College)
Google Chrome Eye Dropper Extension (Google Doc)
How Contrast Ratio Pertains to Website Accessibility (Bureau of Internet Accessibility)
How to Locate a Hex Code (Google Doc)
Mysteries of Accessibility: Using Color and Composing Alt Text (Hawkes Learning YouTube)
Mysteries of Accessibility: Using Color and Composing Alt Text (Google Slides)
Docs Handout: Color and Alt Text (Google Doc)
Slides Handout: Color and Alt Text (Google Slides)
Word Handout: Color and Alt Text (Word Document housed in Google Drive)
PowerPoint Handout: Color and Alt Text (PowerPoint housed in Google Drive)
Rapid Tables RGB to Hex Converter (RapidTables)
Use Accessible Text Color (Microsoft Support)
WCAG 2 Contrast Ratio (WebAIM)
WCAG Non-Text Contrast (W3C)
WebAIM Color Contrast Checker (Utah State University)
Using WebAIM Color Contrast Checker (Google Doc)
What are Required Color Contrasts (WebAIM)