Technique dotted-underlines:Using dotted underlines and colors that provides contrast ratio of 3:1 with surrounding text to links
About this Technique
This technique is not referenced from any Understanding document.
This technique applies to pages there are a large number of links in the block of text.
Description
The objective of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color.
Use of Color a relative luminance difference of 3:1 or greater with the text around can be used to identify links and surrounding texts. To meet success criterion 1.4.1: Use of Color, use dotted lines as additional visual cue.
This technique is an alternative to use solid underlines. Solid underlines might be visually distracting for pages there are a large number of links in the block of text. Links are commonly used to indicate words or phrases that are links within a paragraph or other block of text. Even using underlines on hover or keyboard focus only, they might not be used for users with touch devices.
Examples
Example 1: Links with dotted underlines and colors that provides contrast ratio of 3:1 in wiki pages
The links in pages are medium-light blue (#4D6BD5) and the surrounding text is black (#111111). Links have a contrast of 3.9:1 with the surrounding text. Links also have minimal dotted underlines to reduce visually distracting in wiki pages there are a large number of links in the block of text.
body {
color: #111111;
}
a {
color: #4D6BD5;
text-decoration: underline dotted;
}Related Resources
No endorsement implied.
Tests
Procedure
For each instance where color is used to convey information about text:
- Check that the relative luminance of the color of the text differs from the relative luminance of the surrounding text by a contrast ratio of at least 3:1.
- Check that the link has a dotted underline.
Expected Results
- Checks #1 and #2 are true.