Color and contrast has a profound impact on the usability of digital materials. Used improperly, color can cause a worksheet, website, or video captions to be unusable. If you have ever had to read a website that had a black background and red or blue text, you probably know what this feels like!
Relevant ALLY Issues:
- "The image has contrast issues"
- "The HTML documents has contrast issues"
- "PDF has contrast issues"
- "Document has text with insufficient contrast"
Text and Background Colors
WCAG 2.1 guidelines for accessibility state that color contrast between text and the background are as follows:
The following example shows samples of passing text and background color combinations. The lefthand column of colors and text are the true, original colors. The righthand column are the same colors and text, but without any saturation to their color:
WCAG 2.1 (AA) Compliant Color Combinations
The next example shows some color combinations that do not pass the guidelines:
WCAG 2.1 (AA) Non-Compliant Color Combinations
Graphical Objects
Graphical Objects are any non-text element that contributes to the understanding of content. This can include the color of icons, charts and graphs, buttons, outlines, etc. WCAG 2.1 states that contrast between graphical objects should be 3:1 or greater against adjacent colors.
Compliant Graphical Object
The example below is compliant. Although there is no border on the form field, the white form field against a dark blue background creates sufficient contrast for the user to distinguish the field.
The next example shows a color combination between the background of the page, and the inner color of the form field, that is not compliant. However, because there is a solid black border around the form field, the user can still distinguish where to fill in text.
Non-Compliant Graphical Object
The final example shows a color combination that is not compliant. There is no border between the background of the page and the inner color of the form field. The contrast ratio between the form field and the background color is not sufficient enough for a user to distinguish where to fill in the text.
Portraying Information Using Color
When creating graphics, color should never be used to portray information alone. A common example of this is a pie chart with no text to explain what each section of the chart is.
Color Only
Providing color as the only means to interpret results can make the image accessible for those who are color blind, as well as anyone who doesn’t have access to a color printer! Here is the same chart in Black and White. Notice that two middle, left wedges are indiscernible from one another.
Color and Text: More Accessible
This next example is an option for displaying content with both color and text. The pie chart is more accessible than before, but notice how cramped the text is, and how depending on the color of the pie chart section, the contrast is bad:
Color, Text, and Placement: Most Accessible
The best way to portray this pie chart would be to have the labels outside of the section, in an area where contrast is sufficient.
Moving Images/Flashing
Moving images, especially flashes, can make accessing content difficult, or even trigger seizures. Moving images include videos, .gif images, color changes or color-changing text, moving backgrounds, etc. If you must include moving images, follow these guidelines to ensure a user's safety:
- Avoid flashing objects. Flashing objects are defined as any opposing images transitioning more than 3 times per second.
- Avoid red flashes. This involves ANY opposing transitions that includes a saturated red.
- Allow a way for users to disable movement. For example, some sites do not play .gif images until a user clicks on them.
- Provide alternative text for moving images, as you would any other image.
- If an image has potentially harmful flashing, post a warning!
How to check Contrast
WebAIM provides an in-browser contrast checker where you can compare any two colors to see if they pass W.C.A.G. guidelines. You can enter colors by hexidecimal or RGB value, or you can use sliders or an eyedropper tool to match the color you are using.