Table of Contents
| 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.
...
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.
...
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
...
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
...
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)