Skip to content
Colorado State University

Information Technology

IT Services

  • IT Services Overview
  • Purchasing & Surplus
  • Software
  • Computer & Device Support
  • Computer Replacement Program
  • Security
  • Guides

Web Services

  • Web Services Overview
  • Design Process
  • Site Managers
  • Site Manager Introduction
  • Web Governance
  • Guides
  • Forms

Remote Resources

Resources for remote teaching and working.

Remote Resources

Guides

Search our self-help guides.

Self-Help Guides

Support

Reach out to us to get support.

Request Support

A College of Liberal Arts Division

Accessibility: Colors

Home » Accessibility » Accessibility: Colors
Last UpdatedSeptember 09, 2021
Table of Contents
  1. Summary
  2. Using Colors
    1. Foreground and Background
    2. Color and Meaning
  3. Color Contrast Charts
    1. CLA 2015 VBL
    2. CLA 2020 VBL

Summary

Color is used in a variety of ways in web design and content layout, from creating contrast to providing context and additional meaning. While it's a great tool, that should be leveraged, there are some additional considerations that must be considered in regards to those with limited vision or color blindness.

Using Colors

Foreground and Background

One of the most prevalent web accessibility issues is the level of contrast between the foreground (text) and the background (image or color). To certain degree you need to use your own judgement when evaluating specifics, such as text with shadows or text on top of images, but in most cases you can use the Accessibility Checker and follow the guidelines below.

  • There must be a contrast ratio of 4.5:1 for normal text and 3:1 for large text, according to WCAG 2.0 Level AA. For a visual example of the passing color combinations, see the diagram below.
  • If the contrast issue is for content that is using the default website styles (no custom colors were applied), then please submit a web support request and we will make the necessary adjustments to the default styles.

Color and Meaning

Color can be used to provide context and meaning, however due to color blindness we must follow a few guidelines:

  • Don't rely solely on color to convey meaning or context. This applies to things such as graphics or interactive elements where there should be supporting content (text) which provides additional details. An example is a key for a map or graph, using texture or pattern in conjunction with color is necessary.
  • When describing an image do not rely on color to describe the content. For example, the man in the red shirt is not a sufficient description.
  • Avoid using red and green as contrasting colors.

Color Contrast Charts

CLA 2015 VBL

cla-vbl-2015-color-accessibility
Full Size 2015 Color Contrast Chart

CLA 2020 VBL

cla-vbl-color-accessibility
Full Size 2020 Color Contrast Chart
Related Articles
  • Accessibility
  • Accessibility: Audio & Video
  • Accessibility: Checklist
  • Accessibility: Colors
  • Accessibility: Example Page
  • Accessibility: Headings
  • Accessibility: Images
  • Accessibility: Links
Categories
  • Accessibility8
  • Web20
Tags
  • Accessibility7
  • Background1
  • Colors3
  • Foreground1
  • Meaning1
Share on facebookShare on linkedin Post on x

Post Navigation

Previous

WordPress: Media

Next

Accessibility: Example Page

  • Liberal Arts
  • FSAS Login
  • CLA Brand
  • CLAHub
  • CLA Help Desk
  • Apply to CSU
  • Careers
  • Equal Opportunity
  • Privacy Statement
  • Accessibility Statement
  • Disclaimer
  • Login
Colorado State University
© 2025 Colorado State University - College of Liberal Arts, Fort Collins, Colorado 80523 USA