diff --git a/understanding/20/img/textlink.svg b/understanding/20/img/textlink.svg index 62dc40eef4..6b55b9d34e 100644 --- a/understanding/20/img/textlink.svg +++ b/understanding/20/img/textlink.svg @@ -1,731 +1,139 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index a1450d2252..3587910767 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -172,7 +172,7 @@

Focus on links

A block of text contains a non-underlined blue hyperlink that has a contrast of 3:1 to the surrounding text. When receiving keyboard focus, the link's text color changes to a darker blue. The contrast difference between the link color in the focused and the unfocused state is only 2:1. In addition, when focused the contrast difference between the link's text color and the surrounding text falls well below a 3:1 ratio. However, to further emphasize the focused state the link is provided an additional underline. Due to the additional underline, color is not used as the only visual indicator of the focused hyperlink, so it passes Success Criterion 1.4.1 Use of Color. Without the underline, the hyperlink would have failed this Success Criterion.

Two instances of the same paragraph of text containing a hyperlink. The first instance shows the unfocused hyperlink with blue colored text with no underline. The second instance shows the same hyperlink in the focused state, now with darker blue text and an underline -
In the default state, the blue hyperlink has a contrast of 5.5:1 to the white background. When focused the hyperlink's darker blue text color has a contrast of 10.8:1 to the background. However, the difference of contrast to the link color in unfocused state is only 2.0:1 (i.e., below 3:1).
+
In the default state, the blue hyperlink has a contrast of 5.5:1 to the white background, and just under 4:1 against the surrounding black text. When focused the hyperlink's darker blue text color has a contrast of 10.8:1 to the background. However, the difference of contrast to the link color in its unfocused state is only 2.0:1 (below 3:1, so counts as just a change in color). Further, the dark blue now only has a contrast ratio of just under 2.1:0 against the black text. For this reason, it needs the underline as an additional visual indicator.