diff --git a/techniques/css/dotted-underlines.html b/techniques/css/dotted-underlines.html new file mode 100644 index 0000000000..8e0bc68275 --- /dev/null +++ b/techniques/css/dotted-underlines.html @@ -0,0 +1,72 @@ + + + + Using dotted underlines and colors that provides contrast ratio of 3:1 with surrounding text to links + + + +

Using dotted underlines and colors that provides contrast ratio of 3:1 with surrounding text to links

+
+

Metadata

+

1.4.1

+

sufficient

+
+
+

Applicability

+

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

+
+

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;
+}
+

Working example of dotted underline link

+
+
+
+

Tests

+
+

Procedure

+

For each instance where color is used to convey information about text:

+
    +
  1. 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.
    2. +
  2. Check that the link has a dotted underline.
    3. +
+
+
+

Expected Results

+ +
+
+ +
+

Resources

+ +
+ + diff --git a/working-examples/css-dotted-underline-link/index.html b/working-examples/css-dotted-underline-link/index.html new file mode 100644 index 0000000000..ed3a4a4196 --- /dev/null +++ b/working-examples/css-dotted-underline-link/index.html @@ -0,0 +1,55 @@ + + + + + Links with dotted underlines and colors that provides contrast ratio of 3:1 in wiki pages + + + + +

Links with dotted underlines and colors that provides contrast ratio of 3:1 in wiki pages

+ +

+ 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. +

+ +
+

If the links on this page are changed to solid underline...

+ +

+ 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. +

+
+ +