Oregon State University

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.

In the inaccessible example image below, a simple form requires users to fill out at least the information in red.

Personal Info

Required

Using the same simple form, in an accessible example, this form requires users to fill out at least the items marked as required. This would allow everyone the ability to interact with the form.

Personal Info

There are many more ways to create accessible required fields, the example above shows a very simple way to do so accessibly.

Contrast

If the color combinations you use for the text content on your website doesn't have enough contrast, then individuals with low vision can have a hard time being able to read it. Individuals with vision at even a 20/40 rate suffer from 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. This is a mathematically derived number, thankfully, tools exist to check this, so you don't have to learn the math. See the Tools section at the bottom of this page to learn how to check your context for sufficient contrast.

This sentence is an example of poor color contrast. The light blue text does not contrast enough with the white background color at a 3.9:1 ratio.

This sentence is an example of good color contrast. The brown text and white background have sufficient contrast at a 7.7:1 ratio.

This sentence is an example of great color contrast. The black text and white background have the highest contrast that can be achieved at a 21.0:1 ratio.

Resources & Tools

Articles about color

Tools to check color and contrast

Contact Info

Equity and Inclusion
526 Kerr Administration Corvallis, Oregon 97331 Ph: 541-737-3556 Accessibility Email
Copyright ©  2014 Oregon State University
Disclaimer