border_blue and gold.png

What is color contrast?

Page Content

What is color contrast?
Why are we doing this?
How to check color contrast
List of 5
Next Steps

Color contrast is the degree of difference in color between text (or graphic elements) and the background. Everyone struggles when there is poor color contrast (such as in the examples below) and this is especially true for students with low vision or color blindness.

Color in text

You can use color as long as the contrast between the text and the background is sufficient. Light text on a light background? Bad. Dark text on a light background? Good.

Bad: I really love using color! If you love using color you should use it all of the time!
Good: Using color is great! As long as there is enough contrast between the text and the background !

Also, with contrast, size matters. A color that fails the contrast check at a smaller size might work fine when enlarged (or bolded).

Bad: I wish we could use all of the colors.
Good: We can use many colors, as long as we use appropriate contrast at the appropriate size.

Color in Images

It is just as important to use appropriate color contrast in images. The image below is an example of poor color contrast.

Top of Page

Why are we doing this?

Poor use of color makes content difficult or impossible to read. Users can experience this in a number of different ways.

Users with visual impairments might not be able to see a full range of colors or be able to distinguish colors that are similar in hue or intensity.
Different devices might not display color in the same way, making yellow and white distinguishable on one, for example, but not on another.
Users who use technology that alters the appearance of their screen (color overlays, high contrast) might have a hard time reading content or distinguishing meaning.

Top of Page

How to check color contrast

Check color contrast of text

There are a number of tools to use when checking the color contrast of text. The Canvas Accessibility Checker does a decent job of this. There is also a Chrome extension from WCAG that does a very good job of checking color contrast on web pages. The two tables below show where contrast is sufficient when using some common text and highlight colors. You can use this as a contrast "cheat sheet" when designing your own Canvas pages.

**Color Contrast Review of Font Colors (darkest options - insufficient contrast marked with "Fail" and red cell borders)**
Color	12 pt	12 pt bold	14 pt	14 pt bold	Heading 2	Heading 3	Heading 4
Black	Black	Black	Black	Black	Black	Black	Black
Green	Green (Fail)	Green (Fail)	Green (Fail)	Green (Fail)	Green	Green	Green (Fail)
Orange	Orange (Fail)	Orange (Fail)	Orange (Fail)	Orange (Fail)	Orange (Fail)	Orange (Fail)	Orange (Fail)
Red	Red	Red	Red	Red	Red	Red	Red
Purple	Purple	Purple	Purple	Purple	Purple	Purple	Purple
Blue	Blue	Blue	Blue	Blue	Blue	Blue	Blue
Dark Gray	Dark Gray	Dark Gray	Dark Gray	Dark Gray	Dark Gray	Dark Gray	Dark Gray
IC Blue Font	IC Blue Font	IC Blue Font	IC Blue Font	IC Blue Font	IC Blue Font	IC Blue Font	IC Blue Font

**Color Contrast Review of Highlight Colors (lightest options - all pass the contrast check)**
Color	12 pt	12 pt bold	14 pt	14 pt bold	Heading 2	Heading 3	Heading 4
Black & green	Black & green	Black & green	Black & green	Black & green	Black & green	Black & green	Black & green
IC Blue & green	IC Blue & green	IC Blue & green	IC Blue & green	IC Blue & green	IC Blue & green	IC Blue & green	IC Blue & green
Black & yellow	Black & yellow	Black & yellow	Black & yellow	Black & yellow	Black & yellow	Black & yellow	Black & yellow
IC Blue & yellow	IC Blue & yellow	IC Blue & yellow	IC Blue & yellow	IC Blue & yellow	IC Blue & yellow	IC Blue & yellow	IC Blue & yellow
Black & red	Black & red	Black & red	Black & red	Black & red	Black & red	Black & red	Black & red
IC Blue & red	IC Blue & red	IC Blue & red	IC Blue & red	IC Blue & red	IC Blue & red	IC Blue & red	IC Blue & red
Black & purple	Black & purple	Black & purple	Black & purple	Black & purple	Black & purple	Black & purple	Black & purple
IC Blue & purple	IC Blue & purple	IC Blue & purple	IC Blue & purple	IC Blue & purple	IC Blue & purple	IC Blue & purple	IC Blue & purple
Black & blue	Black & blue	Black & blue	Black & blue	Black & blue	Black & blue	Black & blue	Black & blue
IC Blue & blue	IC Blue & blue	IC Blue & blue	IC Blue & blue	IC Blue & blue	IC Blue & blue	IC Blue & blue	IC Blue & blue

Checking contrast in images

If you are creating your own image from scratch, you might be able to use built-in color checking tools. You can also use a color picker to get the appropriate "hex" codes and use a contrast checker such as the WebAIM contrast checker.

If you are not sure whether text within a pre-made image has an appropriate level of contrast, you can check using the WCAG Contrast Checker. Once you have uploaded the image, you can check the contrast between different colors by selecting a foreground and background color. The contrast checker will let you know whether there is sufficient contrast using six different criteria. You know there is good contrast if all six criteria turn green. In the image showing IC tuition (above), the contrast between the blue bars and blue text only passes one of the six criteria - and only if the font is viewable as 18pt.

Top of Page

List of 5

Having sufficient color contrast ensures that a user can perceive the difference between the font color and the background color.
When evaluating color contrast, both size and font weight matter. Text colors that do not have sufficient contrast in a small font size might have sufficient contrast when viewed at a larger size or as bold text.
It is just as important to evaluate color contrast for text in images or graphics as it is to evaluate contrast for text on a page.
The Canvas Accessibility Checker does a decent job of checking text contrast but cannot evaluate contrast in images.
There are many excelent tools for checking color contrast for both text and images. Links to thse are available in the "Dig Deeper" section, below.

Top of Page

Next Steps

Your Turn

Use the Canvas Accessibility Checker to see if there are any areas on your page that do not have sufficient color contrast. If you add images to your page that include text, try using the WCAG Contrast Checker to evaluate contrast levels.

Dig Deeper

WebAIM Article: Contrast and Color Accessibility
Color Contrast Checkers
- WCAG Color Contrast Checker (Chrome Extension)
- WebAIM Color Contrast Checker
- Colour Contrast Analyser (free desktop application for Win/mac OS)
- WCAG Contrast Checker (works well for both text and images)
- Accessible Web Color Contrast Checker
Color in Data
- Data Color Picker (color for data tables
- ColorBrewer (color for cartography)
Simulators
- Color Blindness Simulator