Color and Color Contrast
- Christina Lutz-Hatfield
Â
Table of Contents
Overview
Color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Ensure that all sighted users can access information that is conveyed by color differences, that is, by the use of color where each color has a meaning assigned to it. If the information is conveyed through color differences in an image (or other non-text format), the color may not be seen by users with color deficiencies. In this case, providing the information conveyed with color through another visual means ensures users who cannot see color can still perceive the information.
Color is an important asset in the design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.
Provide sufficient contrast:
Between text and its background, so that it can be read by people with moderately low vision or impaired contrast perception, without the use of contrast-enhancing assistive technology.
Between link text and background color.
Between link text and surrounding body text.
Sufficient contrast must also be provided to non-text content such as keyboard focus indicators for menu items, buttons, links, and form elements
Color Contrast Between Text and Background Color
Provide sufficient color contrast between foreground and background, text and background color. Â
The contrast ratio between text and background, using regular body text, should be at least 4.5:1.
Large-scale text (24 pixels or 18 pixels bolded) should have a contrast ratio of at least 3:1.
How to Test Color Contrast
Test your contrast level between text and background using this color contrast checker for WCAG Level AA compliance.
Color contrast checker for WCAG compliance
Color Contrast Related to Links
There should be a contrast ratio of at least 4.5.1 between link text and background color. This applies to regular body text (or 3:1 for large text) . Â
There must be a 3.1 contrast ratio between link text and the surrounding text.Â
How to Test Color Contrast
Test your contrast level related to links using this color contrast checker for WCAG Level AA compliance.
Color contrast checker for links
Color Blindness
When designing for color blindness, make sure that colors are not your only method of conveying important information.
If the purpose of posting the content is to communicate something about the colors in that image or web page, then it is important to provide some other way of understanding the information.
Challenges | Solutions |
Reds and greens are often indistinguishable | This is not normally a problem except in cases where the colors convey important information. Under these circumstances you will need to either change the content or graphic or provide an additional means of obtaining the same information. For example, provide an explanation in the text itself. |
Use this filter to test web pages for color blindness.
https://www.toptal.com/designers/colorfilter/
Color and Messaging
Don’t rely on color to convey critical information such as alerts, error and status messaging.
Please see more information about this under the Alert/Error Messaging section.
Contrast and Non-Text Content
Ensure that active user interface components and controls and meaningful graphics are distinguishable by people with moderately low vision.
Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the webpage then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.
The visual presentation of the following should have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
Example as It Relates to Keyboard Focus Indicators
A keyboard user typically uses the Tab key to navigate through interactive elements on a web page—links, buttons, fields for inputting text, etc. When an item has keyboard "focus", it can be activated or manipulated with the keyboard.Â
A sighted keyboard user must be provided with a visual indicator of the element that currently has keyboard focus. For example a border or outline.
Browsers will by default provide a visual border around these elements when they are in focus. Usually a blue border or dotted outline. However the default style may not provide enough color contrast between foreground and background. In other cases the outline may not be visible as the element may have already been styled with a specific border or outline or made invisible.  Â
Apply a keyboard focus outline that has sufficient color contrast against the background by using the following CSS attribute,Â
A:focus
The contrast ratio must be at least 4:5 against the background and 3:1 against adjacent colors.
Please see more detailed information on how to comply with this guideline.
Color Should Not Be Used as The Only Way to Convey Information
Ensure that all sighted users can access information that is conveyed by color differences, that is, by the use of color where each color has a meaning assigned to it.
If the information is conveyed through color differences in an image (or other non-text format), the color may not be seen by users with color deficiencies. In this case, providing the information conveyed with color through another visual means ensures users who cannot see color can still perceive the information.
Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color.
People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.
This benefits:
Users with partial sight often experience limited color vision.
Some older users may not be able to see color well.
Users who have color-blindness benefit when information conveyed by color is available in other visual ways.
People using limited color monochrome displays may be unable to access color-dependent information.
Users who have problems distinguishing between colors can look or listen for text cues.
Please see more detailed information on how to comply with this guideline.
WCAG Related Guidelines
1.3.3 Sensory Characteristics (Level A)
1.4.3 Contrast Minimum (Level AA)
1.4.11 Non-Text Content (Level AA)
Â