SC1-4-1-a

This test belongs to 1.4.1 Use of Color.

Status

Description

SC1-4-1-a checks if <a> elements meet 1.4.1 Use of Color.

This test checks if links within text are visually evident before they receive focus, in which case the test passes. If not, the test checks if the links have a significant contrast difference with the surrounding text. If this is the case, and if the link becomes visually evident when it receives focus and when it is hovered by a cursor, it also passes.

Background

• F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
• G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
• C15: Using CSS to change the presentation of a user interface component when it receives focus
• Color contrast (WCAG 2.0 definition)

Assumptions

• This test assumes that the 3:1 contrast difference between text is minimal to what would be sufficient to meet WCAG 2.0. This value is part of G183 technique, but is not specified in the 1.4.1 success criterion.
• This tests assumes that one of the following shorthand CSS-properties (or the related expanded properties) is used to make the link visually evident: background, border, color, font, or text-decoration.
• This test assumes that any use of border will make links sufficiently distinguishable
• This test assumes that the different font is presented to the user.

Test properties

Note: Tools only able to process HTML + CSS can implement the first two step and ignore step 3 through 4, returning 'cantTell' instead. A tool could ask the user to perform step 3 and 4 manually, in which case the test would be semi-automatic instead.

Test procedure

Selector

Select each element that matches a[href] that meets the following requirements:

• link.textContent is non-empty text
• Its nearest block-like ancestor has:
  • A different text color then the text color of the link
  • One or more child nodes of type text or containing text before or after the selected link

An element is considered 'block-like' when it's display style is set to one of the following: block, list-item, table, flex, grid, or any display value that starts with 'table-'.

Step 1

Determine computed style for the link and of the surrounding text. The background must be determined by finding the closest ancestor element with the css background property set, either containing an image or a color with a transparency great than 0.

• Step 1a: If the border is visible (border-with is greater than 0, and border-style is not none, and border-color is not transparent) or the background-image is set, return true
• Step 1b: Compare the style properties font-family, font-weight, font-style, text-decoration of the link, to that of the surrounding text. If any of the properties have a different value for the link as for the surrounding text, return true

If Step 1a or Step 1b was true, return:

Else continue to #Step 2

Step 2

Determine color and background-color of the link and the 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

If C1 or C2 is more than 3:1, continue to #Step 3

Else return

Step 3

Give focus to the link.

(As in step 1:) Determine computed style for the link and the surrounding text. The background must be determined by finding the closest ancestor element with its background set.

• Step 3a: If the border is visible (border-with is greater than 0, and border-style is not none, and border-color is not transparent) or the background-image is set, return true
• Step 3b: Compare the style properties font-family, font-weight, font-style, text-decoration of the link, to that of the surrounding text. If any of the properties have a different value for the link as for the surrounding text, return true

If Step 3a or Step 3b was true: Continue to #Step 4

Else return:

Step 4

Remove the focus from the link.

Move the mouse pointer to the center of the link.

(As in step 1:) Determine computed style for the link and the surrounding text. The background must be determined by finding the closest ancestor element with its background set.

• Step 4a: If the border is visible (border-with is greater than 0, and border-style is not none, and border-color is not transparent) or the background-image is set, return true
• Step 4b: Compare the style properties font-family, font-weight, font-style, text-decoration of the link, to that of the surrounding text. If any of the properties have a different value for the link as for the surrounding text, return true

If Step 4a or Step 4b was true, return:

Else return: