User Tools

Site Tools


accessibility:common_issues:color

This is an old revision of the document!


Colors

Insufficient color contrast is another of the most common accessibility problems. Text and interactive elements should have a color contrast ratio of at least 4.5:1. Non-interactive objects should have a contrast ratio of 3:1 (Use the _third _test in the WebAIM Contrast Checker, Graphical Objects and User Interface Components). Note that disabled items and logo images are exempt from color contrast requirements.

This requirement for low-vision users is sometimes in direct contradiction to the needs of people with cognitive disorders and sensory processing issues, who need lower contrasts and less bright colors.

Link colors have an additional contrast requirement: they must be easily distinguished from the surrounding text. Test link colors using the WebAIM Link Contrast Checker to make sure your proposed link color has sufficient contrast with the body text color as well as the page background.

For some people with autism, ADHD, dyslexia, or other sensory processing issues, designs that feature dense information with high-contrast borders and brightly colored buttons may trigger discomfort or even panic attacks. Unlike people with low vision, this group may want to reduce color contrast. The use of red, orange, and yellow background colors in large blocks can cause problems for some people in this group (see "High-Alert Colors" in Beyond WCAG: Losing Spoons Online).

In maps and charts, neighboring regions need to be distinguished by something other than color. Using one hue at different shades of lightness is one solution. The Visa Chart Components library uses subtle background patterns in addition to color gradients.

Color in OPAC Branding

In addition to basic color contrast requirements, your OPAC design should avoid using bright red, orange, or yellow as background colors for large areas of the screen. In Beyond WCAG: Losing Spoons Online, Lē McNamara describes panic attacks triggered by high alert colors (red, orange, and yellow), which are so distressing to people affected by sensory disorders that the article’s examples are hidden in disclosures.

Guidance about these colors will be included in the next major version of WCAG, but we should begin to evaluate our use of them now, and avoid using bright red, orange, or yellow as background colors.

accessibility/common_issues/color.1701363083.txt.gz · Last modified: 2023/11/30 11:51 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.