Detecting Color Contrast Failures for Links with Surrounding Text

The goal is to detect links with surrounding text that are distinguished from the text solely by their color. These types of links must have sufficient color contrast to be easily distinguishable from surrounding text.

Out of Scope

Links without surrounding text and those that differ from the text by styles other than just color are out of scope.

Determining if a link has surrounding text

To determine if a link has surrounding text, the following steps are followed:

1. The parent of the link in the DOM is determined (parent)
2. If the link text or parent text is empty, or if parent.text <= link.text --> False
3. From the parent's HTML, all text before and after the link is extracted
4. If any of the above texts has a length greater than 3, the link is considered to have surrounding text --> True
5. Otherwise --> False

Determining if a link has additional styles

Once it is determined that the link has surrounding text, the styles of the parent and the link are compared with the following checks:

1. if parent.text-decoration != link.text-decoration. Only the first part is compared (underlined, etc.)
2. if |parent.font-weight - link.font-weight| >= 100. If the difference in font weight is perceptible
3. if parent.font-style != link.font-style
4. if |parent.font-size - link.font-size| / parent.font-size >= 0.1. If the relative font size difference is at least 10%.
5. if parent.cursor != link.cursor.
6. If none of the above are met, it is determined that the link is differentiated only by color.

CC check for links within scope

Once the link passes all filters, we have the surrounding text and the link text. Only a color contrast check is applied between both text colors, and a failure is reported if the minimum established ratio of 3.0:1 is not met.