Tips #5 & 6Color & Contrast

Be sure to checkout all the sections.

Choose colors carefully deliberately

Meet color-contrast standards for 2 or more colors.
Don't use color alone to convey meaning.
Understand color effects on readers
Choose colors purposefully, keeping users with color-blindness and low vision in mind.

Introduction

Designing with Color

Color, like images, can add visual appeal to your pages, and draw attention to- and provide focus for important information. In order for color to work, however, it needs to be perceivable. Poor color choices can affect students with low-vision, or students who are color blind. Cultural influences can also affect color responses. Colors can soothe, but overuse of color can overwhelm.

Be intentional in your color decisions.

Color

Links to an external site.

Color blindness comparison — Varieties of Color Blindness

Purpose of Color Awareness

Color, like images, can add visual appeal to your pages, and draw attention to and provide focus for important information. In order for color to work, however, it needs to be perceivable. Poor color choices can affect students with low-vision, or students who are color blind. Cultural backgrounds can also affect color responses. Colors can soothe, but overuse of color can overwhelm. Be intentional in your color decisions.

Common Mistakes

Using color can interfere with learning when the color contrast--the difference in color between the background and the text or image--is not sufficient. All sighted users suffer when color contrast is not high, but this can be especially difficult for users with low-vision.

Color can also be an issue when it alone is used to convey information. Readers with color blindness or low vision can easily miss information only represented by a color. Because there are many types of color blindness, your color choices must be deliberate and as inclusive as possible.

This chart will give you a sense of what your students may see:

How to Correctly Use Color

How to Correctly Use Color

When possible, use the default Canvas settings for text colors. If you are using custom colors for headings or other textual markers, check the contrast via a free online color contrast tool. In order to test your colors, you will need to know the hex code links to an external site. of the colors, you are using.

Color & Meaning

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

Some recommended color contrast tools are:

WebAIM Color Contrast Checker
ACART Communications: Contrast Checker

If you would like to know more about color, HTML Color Codes offers excellent, clear advice for choosing colors for your web pages.

Links to an external site.

Contrast

A study by G. M. Murch (1987) about readability in human and computer interaction compared various background and foreground text colors for readability; its findings:

Black text on a light green background as the most legible (100%)
Followed by blue text on a white background (94%)
White text on a black or blue background (75%).

Murch Black White Red background grid

Other findings suggest using light grey or pastel background rather than white backgrounds. WCAG 2.0 recommend a contrast ratio of at least 3:1 to meet Level AA and 7:1 to meet Level AAA.

(2021). Retrieved 3 Jun 2021, from Richardson_1214

Color Affects Readers in Different Ways

"Learners without dyslexia tend to prefer color pairs with a higher color and brightness contrast while people with dyslexia read faster when color pairs have lower contrasts.

For instance, the color pair which was the fastest to read was the combination of black & crème. Black text over yellow background presents the largest fixation duration. The effects are similar to using a yellow highlighter on black text." -w3.org*

Whichever text and background colors you select, consider the contrast between the text and the background so that all users can read it easily.

Optimal Colors to Improve Readability for People with Dyslexia - Text Customization for Readability Online Symposium. (2021). Retrieved 3 Jun 2021, from https://www.w3.org/WAI/RD/2012/text-customization/r11

Comparing Color Contrast
Good Contrast	Poor Contrast
It is much easier to achieve sufficient contrast by using dark text on a light background	It is much easier to achieve sufficient contrast by using dark text on a light background
It is much easier to achieve sufficient contrast by using dark text on a light background	It is much easier to achieve sufficient contrast by using dark text on a light background

Tips

It is much easier to achieve sufficient contrast by using dark text rather than light text.
Check contrast using the Color Contrast Analyzer.

WCAG Success Criteria 1.4.3: Contrast

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except incidental text or images and logotypes. Large text (over 18pt or 14 pt bold) has a contrast ratio of at least 3:1.

Try this Color Contrast check tool when checking contrast.

Example Canvas Color Ratios

If you choose to use color, utilize the WebAIM Color Contrast Checker to ensure adequate color contrast and accessibility-friendly colors.

The following are examples of Rich Content Editor Colors Contrast Ratios within Canvas:

Fail: (under 4.5 ratio)

Yellow Text: 1.07:1
Pale Green: Text 1.12:1
Orange Text: 2.14:1
Pink Text: 3.14:1
Red Text: 4:1

Good: (4.5 to 7)

Blue Text: 4.68:1
Dark Green: 5.14:1
Purple Text: 6.95:1

Best: (Over 7)

Burnt Orange: 7.43:1
Very Dark Gray: 12.63:1
Black text: 21:1

Examples

Color choice and contrast are especially important in charts and graphs. Choose colors, patterns, and labels that clarify the data to all users.

Family Pets Contrast Chart

Accessible chart

Watch Videos on Color & Contrast

Color and Contrast for Colorblind-Friendly Design

Color & Contrast (Video-3:20)

Accessible Color in Slides (Video- 2:17)

Accessible Excel Charts (Video-4:12)