Use of Color [SC1-4-1-a]

Test info

Test for Success Criterion 1.4.1

About

Checked Elements: earl:automatic

This test checks if links within text are visually evident before they receive focus or are activated or the mouse is hovered over the link.

Short Description

The objective of this failure is to avoid situations in which people who cannot perceive color differences cannot identify links (when people with color vision can identify links). Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision). While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link.

WCAG 2.0

Principle 1: Perceivable

Information and user interface components must be presentable to users in ways they can perceive.
WCAG 2.0: Principle 1

Guideline 1.4: Distinguishable:

Make it easier for users to see and hear content including separating foreground from background.
Understanding Guideline 1.4

Success Criterion 1.4.1: Use of Color (Level A)

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Understanding: Success Criterion 1.4.1

Techniques

Possible Results

The link is not sufficiently distinguishable from the surrounding text when focus is given to it: The link is not sufficiently distinguishable from the surrounding text when focus is given to it
The link is not sufficiently distinguishable from the surrounding text: Determine color and background-color of link and surrounding text and compute. C1 = contrast difference of surrounding text color and link color. C2 = contrast difference surrounding text background color and link background color. The value of C1 or C2 should not be less than 3:1
Link sufficiently distinguishable from the surrounding text when the focus is given to it: Link sufficiently distinguishable from the surrounding text when the focus is given to it
Suitable difference between the attributes of link and the surrounding text.: There is a suitable difference between the background, font-weight, font-style, border, or text-decoration in computed style for the link and the surrounding text.