Color

Introduction

There are two main concepts to consider with the use of color; conveying information and sufficient contrast. More information can be found in Resources & Tools links.

The most widely accepted statistics say that 8% of men and 0.5% of women are colorblind. However, individuals who are colorblind are not the only ones affected by the use of color, so are individuals who are low-vision. These individuals are much more affected by color contrast issues.

WCAG 2.0 States

1.4.1. Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for [exceptions]. (Level AA)

Conveying Information

Don't rely on color alone to convey the meaning of content. Individuals who are blind, low-vision, or colorblind will not be able to differentiate between the content you are trying to emphasize or highlight. Some examples of where using color only can affect accessibility include; required fields in forms, identifying that items of a certain color are key concepts to learn, using a pie chart with color but not identifying the sections in another way.

Contrast

If the color combinations you use for the text on your website doesn't have enough contrast with the background, individuals with low vision can have a hard time reading it. Individuals with vision at even a 20/40 rate have a loss of contrast sensitivity. Contrast sensitivity is an issue that affects everyone as they age.

WCAG 2.0 AA, the level required by OSU policy, recommends contrast of at least 4.5:1. See the Tools section at the bottom of this page to learn how to check your context for sufficient contrast.

Resources & Tools

The Oregon State Brand has an official color palette with a set of primary and secondary colors. While the primary colors can be used interchangeably and still be accessible for people with certain disabilities, combinations of primary and secondary colors do not have enough contrast to be accessible. To ensure accessibility when using secondary colors as text, or background for text, please use this OSU color palette accessibility chart (PDF) to determine what colors can be used together and what color combinations to avoid.

Articles about color

Tools to check color and contrast

  • Vischeck has a really cool tool that uses your images to simulate colorblindness.
  • The Paciello Group contrast analyzer is a really cool tool that will do the math for you. Available for free for PC and Mac users. This tool lets you use an eyedropper, similar to Photoshop, to pick colors on a website to analyze. Very user friendly in determining current color combinations.
  • WebAIM's color contrast checker has the ability to lighten or darken colors so you can find WCAG 2.0 compliant combinations.