Color

• Step 1: What purpose do the colors serve?
• Step 2: Microsoft Word tutorial 
• Sources

Step 1: What purpose do the colors serve?

C​ontrast is the difference between two colors. To create accessible content, use high contrast between text and its background color:

• If your text is dark, your background should be light, and vice versa.
• Black text on a white background is recommended for paragraphs of text.

This sentence is easy to read.

This sentence is not as easy to read. 

This sentence is difficult for most and impossible for some to read.

Color can be used for emphasis, but it's best to use color sparingly and one that has enough color contrast against a white page. 

Images that contain text can have color contrast issues between the colored text and the varied-colored background. 

 

Using darker colored text can sometimes help, but not always. 

It may help to add a lighter colored transparent background behind the text to assist with readability. 

When the importance of information is communicated using color alone, then that importance is not conveyed to people who are blind or color blind students and cannot see the color of the text. A common example of this issue is using the color red to indicate important information.

Red-green color blindness is the most common form of color blindness.

Red text also has a low contrast level between the text and most backgrounds. If red text is used on a white background, be sure to use a dark red to ensure proper color contrast.

Avoid using color as the sole means of providing information. For instance, the following chart may not be accessible to a user who is color blind, and the color contrast is not high enough for all of the colored text:

All green items are due on Mondays, orange on Wednesdays, and red on Fridays.

Assignment Due Dates

Week 1	Week 2	Week 3	Week 4
Discussion	Discussion	Discussion	Discussion
	Quiz		Quiz
			Final Project

Color, when used wisely, can add to the learning experience, but color contrast should always be kept in mind, and color should never be used as the sole medium for conveying information. Instead, use redundant channels for providing information, such as both shape and color:

Items marked with a green triangle are due on Mondays, with a blue circle are due on Wednesdays, and a red square due on Fridays.

Assignment Due Dates

	Week 1	Week 2	Week 3	Week 4
Discussion
Quiz
Final Project

All California Community Colleges follow WCAG 2.1 AA Conformance Links to an external site.. WCAG 2.1 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid-range), and AAA (highest).

Some color contrast accessibility tools will provide a Fail or Pass indication for AA and AAA. Be sure to verify color accessibility based on Level AA Conformance. 

 

Self-Check

Step 2: Microsoft Word tutorial 

Tools to Check Your Contrast 

WebAIM Color Contrast Checker

WebAIM provides a color contrast checker Links to an external site. which allows you to enter the hexadecimal code for any web color.

Colour Contrast Analyser

There is a free tool from The Paciello Group that has become the standard for checking color contrast. It installs locally on your machine and enables you to check the color contrast in any program on your computer.

The Colour Contrast Analyzer Links to an external site. allows you to use your mouse to point and click on the colors in your text or background, which enables you to check images for color contrast in addition to digital text.

Once you have installed the Colour Contrast Analyzer on your local machine you can use it to check the contrast of any color combinations visible on your computer screen.

Instructions for Using the Colour Contrast Analyzer

The following instructions explain how to use the Colour Contrast Analyzer:

1. Use the eye-dropper tool to select colors for the foreground and background (or enter hexadecimal values).
2. The tool will automatically assess the color combination and generate a report that includes your WCAG 2.0 status for AA and AAA.
3. Include contrast results for color blindness to show contrast values for different types of color blindness.

To create accessible graphics that have text, consider using a free color contrast tool.

Below are some free recommended color contrast tools that require the desired color hex code:

• WebAim: Color Contrast Checker Links to an external site. (No download required)
• ACART Communications: Contrast Checker Links to an external site. (No download required)
• Paciello Colour Contrast Analyser (Download required)

1. Assuming your chosen graphic design platform such as Canva (commonly used in the CCC system) provides color hex codes, locate your desired: 
   Foreground Color: Text color
   Background Color: Background color behind text
   
   
   
   
2. Use any of the recommended contrast checkers. Copy and paste hex codes for Foreground Color and Background Color.
   
   Review the WCAG AA results based on your text size:
   Normal Text: Paragraph Style 
   Large Text: (Header 2/Header 3) 18pt and larger or 14pt (Header 4) and larger if it is bold  
   

 

Sources

"Accessible Contrast, Colors and Backgrounds" Links to an external site. by Dallas College is licensed under CC BY 4.0 Links to an external site.

"CANVAS ACCESSIBILITY" Links to an external site. by Santa Rosa Junior College is licensed under CC BY 4.0 Links to an external site.

"Hexadecimal Colors" Links to an external site. by Math is Fun is licensed under CC BY 4.0 Links to an external site.