From 2ac4857e413259e3ed9f8c6f76b82f54199e6a95 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 16 Mar 2024 06:02:32 +0000 Subject: [PATCH] Make underline blue, expand figure caption (#3747) A small patch to clarify one aspect of https://github.com/w3c/wcag/pull/3717 --- understanding/20/img/textlink.svg | 862 +++++------------------------ understanding/20/use-of-color.html | 2 +- 2 files changed, 136 insertions(+), 728 deletions(-) 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.