Using Color
Purpose of Color Awareness
Color, like images, can add visual appeal to your pages, heighten the level of professionalism, 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.
How to Correctly Use Color
Color Contrast
When possible, use the default 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. Some recommended color contrast tools are:
- WebAim: Color Contrast Checker Links to an external site.
- ACART Communications: Contrast Checker Links to an external site.
If you would like to know more about color, HTMLColorCodes Links to an external site. offers excellent, clear advice for choosing colors for your web pages.
Color Confusion
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 the yellow font:
All green items are due on Mondays, orange on Wednesdays, and red on Fridays.
| 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 providing 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.
| Week 1 | Week 2 | Week 3 | Week 4 | |
| Discussion | ||||
| Quiz | ||||
| Final Project |
Additional Resources
Contrast Rebellion Links to an external site.