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.
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.
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
- WebAIM article about color contrast and low-vision.
- WebAIM article about colorblindness.
- Jim Thatcher's Web Accessibility Course Section on 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.
- NC State Color Palette Accessibility Evaluator. This tool lets you look at your whole color palette to determine WCAG conforming contrasts.
- Juicy Studio color contrast analyzer. The Juicy Studio Firefox accessibility toolbar add-on also includes a color contrast analyzer.
- Snook color contrast analyzer.
- Colorzilla lets you determine what colors are being used on a page.
- WebAIM's color contrast checker has the ability to lighten or darken colors so you can find WCAG 2.0 compliant combinations.
- Chroma Nope is a color vision deficiency (color-blindness) simulator for the web. It shows you any URL as it would look to three of the most common forms of color-blindness.
- Gray Bit is an online accessibility testing tool designed to convert a full-color web page into a grayscale rendition to help visually test the page’s perceived contrast.
