Color Use and Contrast

Introduction

Contrast and color use are vital to the accessibility of digital content. All users must be able to perceive content on the page, including those with visual disabilities such as low vision and color blindness. The following information will guide you on how to evaluate and understand the use of color and contrast in your digital content.

Defining Colors

Colors can be defined in a few ways.

• rgb (0, 0, 255): The rgb values are the amount of red, green, and blue that form a color and are presented as a number between 0 and 255. 
• #0000E1: This is a "hexadecimal" format where the red/green/blue values are presented as a combination of six letters and numbers. This is typically referred to as the "Hex" value.
• hsl (240, 100%, 44%): These values represent hue, saturation, and lightness, which map more closely to the way people perceive colors. Changing the "lightness" of a color will change its contrast ratio to another color.

NOTE: RGB and Hex values are most often used with contrast checkers.

Contrast Ratio

According to the Web Content Accessibility Guidelines (WCAG) 2.1, contrast is a measure of the difference in perceived "luminance" or brightness between two colors, the foreground and background. This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white text on a white background) to 21:1 (e.g., black text on a white background). 

To ensure that text is legible, make certain that there is high contrast between the foreground and background colors. The standard contrast minimum follows WCAG 2.1 Level AA requirements, which reads: The visual presentation of text (below 18 point) and images of text has a contrast ratio of at least 4.5:1, except for the following:

• Large Text:  Large-scale text (18 point and larger or 14 point and larger if it is bold) and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no contrast requirement.

See the examples below:

• Meets standards: Blue text (#000FFF) has a contrast ratio of 8.6:1.
• Meets standards for large text (14pt & bold): Red text (#FF0000) has a contrast ratio of 4:1.
• Does not meet standards: Green text (#00FF00) has a contrast ratio of 1.4:1.

Evaluating Contrast

There are many tools online that can help you evaluate contrast. There is not one that is better than the other. It's up to the content creator to choose which tool works best for them.

WebAIM Contrast Checker

WebAIM hosts a contrast checker that uses hex values to evaluate contrast of foreground and background color. You can also select the color box next to the hex value where you are able to also input RGB and HSL values. You can also use the lightness slider to adjust a selected color in order to meet a passing contrast ratio. This tool will display a "Pass" or "Fail" for Level AA and Level AAA for both normal text and large text, as well as Level AA for non-text requirements. Remember, the level we are conforming to is Level AA.

Resource: WebAIM Contrast Checker

WebAIM Link Contrast Checker

WCAG requires a 3:1 contrast ratio between the link text and surrounding body text if a link is only identified by a color difference (typically meaning that it is not underlined).This is in addition to the 4.5:1 contrast of the link text to the background, and the body text to the background. The WebAIM Link Contrast Checker allows you to test these three contrast requirements at once. There are three color fields:

• Link Color
• Body Text Color
• Background Color

The tool will indicate if these colors pass or fail each of the three contrast requirements. 

Resource: WebAIM Link Contrast Checker

Color Contrast Analyser (Desktop app)

The color contrast analyser, or CCA,  helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators. This is a desktop app that can be used on any application that is open on your desktop. Features include:

• WCAG 2.1 compliance indicators
• Several ways to set colors: raw text entry (accepts any valid CSS color format), RGB sliders, color picker (eyedropper)
• Support for alpha transparency on foreground colors
• Color blindness simulator

You can type in the RGB values, select the dropdown and choose another color value such as HEX, or use the eyedropper to select the text or color of the foreground and background.

To see the color blindness simulation, select View and then Color Blindness Simulation.

The color blindness simulation will show you what that color combination will look like with different types of colorblindness, along with the contrast ratio for each.

Download: Color Contrast Analyser

You can explore other contrast checkers and find the one that best suits your needs.

• Level Access: Color Contrast Checker
• ACART Communications: Contrast Checker

Microsoft Office 365 Accessibility Checker

MS Office has a new feature available in the accessibility checker that identifies low-contrast text. This is available in Word, PowerPoint, and Excel. NOTE: This feature is currently only available in Office 365 for Windows.

In the Accessibility Checker, you will see a warning labeled "Hard-to-read text contrast". You can click on the result to jump directly to that issue within the document. You can also click the dropdown arrow and change the font or page color right within the accessibility checker.

Use of Color

Using color is not prohibited, in fact, it can increase accessibility for some users. However, WCAG 2.1 prohibits using color alone to present or convey important content or instructions. It reads: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. It is also important to remember that some users may print their content but not have access to a color printer. 

For example, in this table of activities, the only indication of the type of activity is by the background color. This is inaccessible to someone who is blind and might be confusing or inaccessible to someone who is colorblind or that overrides page colors, or even for someone who prints this page in greyscale.

Discussions are in blue, readings are in yellow, and assignments are in red.

Resources

• WebAIM: Understanding WCAG 2 Contrast and Color Requirements
• WebAIM: Evaluating Contrast and Color Use