Colors and Accessibility Issues

Color is used in web design for many reasons. Often it is used to distinguish one piece of text from another (required fields on a form, for example), for grouping related items, or denoting hyperlinked text. Often we see Color used in specific sections of a site to thematically group the pages and provide clues/reminders to the person viewing the site that they are in a certain section. It is not the use of Color that is an issue in terms of accessibility - rather, it is the use of Color as the only means to convey information that poses potential problems.

Best Practice: Color must not be the only means of conveying information.

Consider a form that indicates "all required fields are marked in red," a page that states "click the green button to continue," or a web-based report that shows status icons for transactions that differ only in their Color. In each of these cases, someone that may not be able to distinctly recognize certain Colors because of their monitor settings, because of colorblindness, or because he/she is using a device that doesn't display Colors would experience difficulty getting the information or completing the task at hand. It is important to ensure that all information that is conveyed with Color is also conveyed by another means. For example, including text with Color-coded icons will help to clarify the function of the icon. Marking required form fields in another way (perhaps by using an icon before the field, or using the word "required" after the form-field label) or using appropriate headers and contextual navigation in each distinct section of the web site will help to alleviate these Color-reliant issues.

Best Practice: Colors must be declared in the style sheet and done so in pairs to ensure that a foreground color always has an accompanying background color.

Modern web development techniques lay a foundation of semantically coded HTML that is progressively enhanced by the use of Cascading Style Sheets. This allows developers to keep the presentational aspects of a web site separate from its content and functional components. In addition to being a "modern technique", this separation is also good for work flow in environments where there are many people involved in the final production of a web site. At the very least, it is useful to have one person or group that sets and manages a base style sheet for the site. Content creators then need not worry about the way that their pages look - they only have to worry about what their pages say.

Using style sheets for presentation is not without pitfalls, though. Because there are so many interacting style rules that are required to create a full web site, Colors must be "paired" when they are declared in a style sheet. This ensures that there are always contrasting Colors when the style sheet is applied to a document and, when the style sheet is not there or is overridden, that both foreground and background are affected. Design errors occur when text Color is determined by the style sheet while the background Color is declared directly in the HTML. As an example, when Cascading Style Sheets are turned off (via the user's browser settings) or not supported (alternative browser), this could result in default blue-Colored links laid out on a dark-Colored background, making the links impossible to read.

Thus, all Colors should be declared in pairs in style sheets. Such a declaration may look like this:

a { color: red; background-color: transparent; }

Best Practice: Foreground and background Color pairs must have sufficient contrast so as to be clearly distinct.

Roughly 1 in 20 people have some sort of Color vision deficiency. Most of these deficiencies fall into the red/green (deoteranope and protanope) deficit category, but other deficits, such as a blue/yellow deficit (tritanope) can also present challenges to web users and designers.

Color Contrast

Ensuring that there is enough contrast between the Colors used in your stylesheet(s) is fairly straightforward. When selecting Colors for foreground and background, check the Color contrast to be sure there will be enough contrast for people with some visual color deficiency or a monochrome monitor.

The W3C suggests that two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range, and further provide the following alogrythm for determining sufficient contrast.

Color brightness is determined by the following formula:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

Color difference is determined by the following formula:

(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

The range for color brightness difference is 125. The range for color difference is 500.

Thankfully, there are many free and easy-to-use tools available on the web that assess Color contrast and simulate Color deficiencies:

Stanford Online Accessibility Program

Colors and Accessibility Issues

Color Contrast

Further Reading

Contact Details