From 3ac151682728a0de2a1cdb6b70ec202b32ea0a28 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 14:29:54 +0100 Subject: [PATCH 01/22] Update use-of-color.html Adding two examples for using color in focusing elements, one for links that have an additional underline and one for buttons where the background color changes and focused ansd unfocused background habve a contrast difference equal or better than 3:1. --- understanding/20/use-of-color.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 398159db4e..ead204c2f8 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -167,8 +167,12 @@

Examples of Use of Color

element. A legend shows the color and number for each type of element. Sighted users who cannot perceive all the color differences can still understand the image by relying on the numbers. +
Focus on links
+
A page has links in blue. When they receive keyboard focus, the links are shown in a darker color. In addition, they are underlined, so the change of color is not the only indicator of focus.
+ +
Focus on buttons
+
A page has buttons with white text on a medium blue background. When the buttons receive keyboard focus, their background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that the change of color is not the only indicator of focus.
-
From 84c9393f42850ab9502d2f81f8ee018d87eda1e0 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 14:32:51 +0100 Subject: [PATCH 02/22] Update use-of-color.html --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index ead204c2f8..ee8e2c1ebe 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -168,7 +168,7 @@

Examples of Use of Color

cannot perceive all the color differences can still understand the image by relying on the numbers.
Focus on links
-
A page has links in blue. When they receive keyboard focus, the links are shown in a darker color. In addition, they are underlined, so the change of color is not the only indicator of focus.
+
A page has text links in blue that have a contrast of 3:1 to the surrounding text. When these links receive keyboard focus, they are shown in a darker color. In addition, they are underlined, so the change of color is not the only indicator of focus.
Focus on buttons
A page has buttons with white text on a medium blue background. When the buttons receive keyboard focus, their background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that the change of color is not the only indicator of focus.
From 331aedb6e589c6bf94317dc3720ce0e5829a45a9 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 18:31:26 +0100 Subject: [PATCH 03/22] Add files via upload --- understanding/20/img/buttons.svg | 291 ++++++++++++ understanding/20/img/textlink.svg | 740 ++++++++++++++++++++++++++++++ 2 files changed, 1031 insertions(+) create mode 100644 understanding/20/img/buttons.svg create mode 100644 understanding/20/img/textlink.svg diff --git a/understanding/20/img/buttons.svg b/understanding/20/img/buttons.svg new file mode 100644 index 0000000000..0da253692e --- /dev/null +++ b/understanding/20/img/buttons.svg @@ -0,0 +1,291 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/understanding/20/img/textlink.svg b/understanding/20/img/textlink.svg new file mode 100644 index 0000000000..f436bf73d0 --- /dev/null +++ b/understanding/20/img/textlink.svg @@ -0,0 +1,740 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 605caf0972c820869b2fbb07827f491b7e30bd38 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 18:49:06 +0100 Subject: [PATCH 04/22] Update use-of-color.html --- understanding/20/use-of-color.html | 35 +++++++++++++++++++----------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index ee8e2c1ebe..071f965c26 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -154,25 +154,34 @@

Benefits of Use of Color

Examples of Use of Color

-
-
A form that uses color and text to indicate required fields
-
A form contains both required and optional fields. Instructions at the top of the +

A form that uses color and text to indicate required fields

+

A form contains both required and optional fields. Instructions at the top of the form explain that required fields are labeled with red text and also with an icon. Users who cannot perceive the difference between the optional field labels and the red labels for the required fields will still be able to see the icon next to the - red labels.

-
An examination
-
Students view an SVG image of a chemical compound and identify the chemical elements + red labels.

+ +

An examination

+

Students view an SVG image of a chemical compound and identify the chemical elements present based both on the colors used, as well as numbers next to each element. A legend shows the color and number for each type of element. Sighted users who cannot perceive all the color differences can still understand the image by relying on - the numbers.

-
Focus on links
-
A page has text links in blue that have a contrast of 3:1 to the surrounding text. When these links receive keyboard focus, they are shown in a darker color. In addition, they are underlined, so the change of color is not the only indicator of focus.
-
-
Focus on buttons
-
A page has buttons with white text on a medium blue background. When the buttons receive keyboard focus, their background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that the change of color is not the only indicator of focus.
- + the numbers.

+ +

Focus on links

+

A page has text links in blue that have a contrast of 3:1 to the surrounding text. When these links receive keyboard focus, they are shown in a darker color. In addition, they are underlined, so the change of color is not the only indicator of focus.

+
+ A blue inline text link in a block of black text, before and after receiving keyboard focus +
The blue inline text link has a contrast of 5.5:1 to the white background. It gets darker when receiving keyboard focus and then has a contrast of 10.8:1 to the background. However, the difference of contrast to the unfocused state is only 2.0:1 (i.e., below 3:1).
+
+
+ +

Focus on buttons

+

A page has buttons with white text on a medium blue background. When the buttons receive keyboard focus, their background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that the change of color is not the only indicator of focus.

+
+ A blue inline text link in a block of black text, before and after receiving keyboard focus +
The button has white text with a contrast of 5:1 on a mid-blue background. When receiving keyboard focus the background turns black. The difference of contrast to the baxkground in the unfocused state is only 4.2:1 (i.e., above 3:1).
+
From ebd49c5cb5146927fc09e45d72ce7044403e2ad0 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 18:53:07 +0100 Subject: [PATCH 05/22] Update use-of-color.html --- understanding/20/use-of-color.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 071f965c26..65f9d7043b 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -171,15 +171,15 @@

An examination

Focus on links

A page has text links in blue that have a contrast of 3:1 to the surrounding text. When these links receive keyboard focus, they are shown in a darker color. In addition, they are underlined, so the change of color is not the only indicator of focus.

- A blue inline text link in a block of black text, before and after receiving keyboard focus + A blue inline text link in a block of black text, before and after receiving keyboard focus
The blue inline text link has a contrast of 5.5:1 to the white background. It gets darker when receiving keyboard focus and then has a contrast of 10.8:1 to the background. However, the difference of contrast to the unfocused state is only 2.0:1 (i.e., below 3:1).

Focus on buttons

A page has buttons with white text on a medium blue background. When the buttons receive keyboard focus, their background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that the change of color is not the only indicator of focus.

-
- A blue inline text link in a block of black text, before and after receiving keyboard focus +
+ A button with white text on a blue background turning black after receiving keyboard focus
The button has white text with a contrast of 5:1 on a mid-blue background. When receiving keyboard focus the background turns black. The difference of contrast to the baxkground in the unfocused state is only 4.2:1 (i.e., above 3:1).
From 46c5030c04334ca70b74b8c4e1338cddf008e2a6 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 18:56:59 +0100 Subject: [PATCH 06/22] Update use-of-color.html --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 65f9d7043b..54e7e3b9bc 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -180,7 +180,7 @@

Focus on buttons

A page has buttons with white text on a medium blue background. When the buttons receive keyboard focus, their background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that the change of color is not the only indicator of focus.

A button with white text on a blue background turning black after receiving keyboard focus -
The button has white text with a contrast of 5:1 on a mid-blue background. When receiving keyboard focus the background turns black. The difference of contrast to the baxkground in the unfocused state is only 4.2:1 (i.e., above 3:1).
+
The button has white text with a contrast of 5:1 on a mid-blue background. When receiving keyboard focus the background turns black. The difference of contrast between the focused and the unfocused state of the background is 4.2:1.
From d63b5d346be72750041590986f8317b9153e38eb Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 18:58:40 +0100 Subject: [PATCH 07/22] Update use-of-color.html --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 54e7e3b9bc..8d1cfd7b15 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -179,7 +179,7 @@

Focus on links

Focus on buttons

A page has buttons with white text on a medium blue background. When the buttons receive keyboard focus, their background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that the change of color is not the only indicator of focus.

- A button with white text on a blue background turning black after receiving keyboard focus + A button with white text on a blue background turning black after receiving keyboard focus
The button has white text with a contrast of 5:1 on a mid-blue background. When receiving keyboard focus the background turns black. The difference of contrast between the focused and the unfocused state of the background is 4.2:1.
From 756ec26f927ce96685c70aa28e59ef830426c676 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 19:03:53 +0100 Subject: [PATCH 08/22] Add files via upload --- understanding/20/img/buttons.svg | 12 +- understanding/20/img/textlink.svg | 1351 ++++++++++++++--------------- 2 files changed, 678 insertions(+), 685 deletions(-) diff --git a/understanding/20/img/buttons.svg b/understanding/20/img/buttons.svg index 0da253692e..84d4d75cb8 100644 --- a/understanding/20/img/buttons.svg +++ b/understanding/20/img/buttons.svg @@ -26,8 +26,8 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="5.6" - inkscape:cx="169.09624" - inkscape:cy="153.93912" + inkscape:cx="126.95338" + inkscape:cy="132.51055" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false" @@ -44,7 +44,7 @@ image/svg+xml - + @@ -61,7 +61,8 @@ x="62.748592" y="47.441223" /> + id="g8110" + transform="translate(0,-2.1166667)"> @@ -179,7 +180,8 @@ + id="g8133" + transform="translate(0,2.1166667)"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From cde11788ba4179260fcebd3ebec126b3a6d0e6fd Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 19:14:57 +0100 Subject: [PATCH 09/22] Update use-of-color.html --- understanding/20/use-of-color.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 8d1cfd7b15..e194774095 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -169,18 +169,18 @@

An examination

the numbers.

Focus on links

-

A page has text links in blue that have a contrast of 3:1 to the surrounding text. When these links receive keyboard focus, they are shown in a darker color. In addition, they are underlined, so the change of color is not the only indicator of focus.

+

A block of text has a text link in blue that has a contrast of 3:1 to the surrounding text. When this link receives keyboard focus, it turns into a darker blue. The contrast between the color of the focused and the unfocused state is below 3:1. In addition, the link is underlined, so the change of color is not the only indicator of focus. Without an additional focus indicator the example would fail the Success Criterion 1.4.1 Use of Color.

A blue inline text link in a block of black text, before and after receiving keyboard focus -
The blue inline text link has a contrast of 5.5:1 to the white background. It gets darker when receiving keyboard focus and then has a contrast of 10.8:1 to the background. However, the difference of contrast to the unfocused state is only 2.0:1 (i.e., below 3:1).
+
The blue inline text link has a contrast of 5.5:1 to the white background. The link gets darker when receiving keyboard focus and then 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).

Focus on buttons

A page has buttons with white text on a medium blue background. When the buttons receive keyboard focus, their background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that the change of color is not the only indicator of focus.

- A button with white text on a blue background turning black after receiving keyboard focus -
The button has white text with a contrast of 5:1 on a mid-blue background. When receiving keyboard focus the background turns black. The difference of contrast between the focused and the unfocused state of the background is 4.2:1.
+ Three buttons with white text on a blue background. When the button receives keyboard focus, the background turns black +
Three buttons with white text on a mid-blue background with a contrast of 5:1. Keyboard focus turns the background black. The difference of contrast between the focused and the unfocused state of the background color is 4.2:1.
From ec69938e29689b48ee8ee92d4a5b255470c384ed Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 19:21:10 +0100 Subject: [PATCH 10/22] Update use-of-color.html --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index e194774095..f1da4ebe29 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -169,7 +169,7 @@

An examination

the numbers.

Focus on links

-

A block of text has a text link in blue that has a contrast of 3:1 to the surrounding text. When this link receives keyboard focus, it turns into a darker blue. The contrast between the color of the focused and the unfocused state is below 3:1. In addition, the link is underlined, so the change of color is not the only indicator of focus. Without an additional focus indicator the example would fail the Success Criterion 1.4.1 Use of Color.

+

A block of text has a text link in blue that has a contrast of 3:1 to the surrounding text. When this link receives keyboard focus, it turns into a darker blue. The contrast difference between the link color in the focused and the unfocused state is only 2.0:1. In addition, the contrast dfference between the link and the surrounding text is now also below 3:1. To sho the keyboard focus clearly, the link is in addition underlined, so the change of color is not the only indicator of focus. Without an additional focus indicator the example would fail the Success Criterion 1.4.1 Use of Color.

A blue inline text link in a block of black text, before and after receiving keyboard focus
The blue inline text link has a contrast of 5.5:1 to the white background. The link gets darker when receiving keyboard focus and then 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).
From 211b9548de0e94456691f7897a506d985e5bea37 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Mon, 26 Feb 2024 19:26:14 +0100 Subject: [PATCH 11/22] Update use-of-color.html --- understanding/20/use-of-color.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index f1da4ebe29..d5f09c066a 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -169,7 +169,7 @@

An examination

the numbers.

Focus on links

-

A block of text has a text link in blue that has a contrast of 3:1 to the surrounding text. When this link receives keyboard focus, it turns into a darker blue. The contrast difference between the link color in the focused and the unfocused state is only 2.0:1. In addition, the contrast dfference between the link and the surrounding text is now also below 3:1. To sho the keyboard focus clearly, the link is in addition underlined, so the change of color is not the only indicator of focus. Without an additional focus indicator the example would fail the Success Criterion 1.4.1 Use of Color.

+

A block of text has a text link in blue that has a contrast of 3:1 to the surrounding text. When this link receives keyboard focus, it turns into a darker blue. The contrast difference between the link color in the focused and the unfocused state is only 2.0:1. In addition, after receiving focus the contrast difference between the link and the surrounding text is now also well below 3:1. To show the keyboard focus clearly, the link is in addition underlined, so the change of color is not the only indicator of keyboard focus. Without an additional focus indicator the example would fail the Success Criterion 1.4.1 Use of Color.

A blue inline text link in a block of black text, before and after receiving keyboard focus
The blue inline text link has a contrast of 5.5:1 to the white background. The link gets darker when receiving keyboard focus and then 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).
@@ -177,10 +177,10 @@

Focus on links

Focus on buttons

-

A page has buttons with white text on a medium blue background. When the buttons receive keyboard focus, their background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that the change of color is not the only indicator of focus.

+

A page has a row of buttons with white text on a medium blue background. When one of the buttons receives keyboard focus, its background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that a change of color is not the only indicator of focus.

- Three buttons with white text on a blue background. When the button receives keyboard focus, the background turns black -
Three buttons with white text on a mid-blue background with a contrast of 5:1. Keyboard focus turns the background black. The difference of contrast between the focused and the unfocused state of the background color is 4.2:1.
+ Three buttons with white text on a blue background. When a button receives keyboard focus, the background turns black +
A row buttons that all have white text on a mid-blue background with a contrast of 5:1. Keyboard focus turns the background black. The difference of contrast between the focused and the unfocused state of the button background color is 4.2:1.
From c9f188611a3c8013424f8b504999d54b4bfd4435 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Fri, 8 Mar 2024 20:24:01 +0100 Subject: [PATCH 12/22] Update understanding/20/use-of-color.html Co-authored-by: Scott O'Hara --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index d5f09c066a..bd16d46f9e 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -169,7 +169,7 @@

An examination

the numbers.

Focus on links

-

A block of text has a text link in blue that has a contrast of 3:1 to the surrounding text. When this link receives keyboard focus, it turns into a darker blue. The contrast difference between the link color in the focused and the unfocused state is only 2.0:1. In addition, after receiving focus the contrast difference between the link and the surrounding text is now also well below 3:1. To show the keyboard focus clearly, the link is in addition underlined, so the change of color is not the only indicator of keyboard focus. Without an additional focus indicator the example would fail the Success Criterion 1.4.1 Use of Color.

+

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.

A blue inline text link in a block of black text, before and after receiving keyboard focus
The blue inline text link has a contrast of 5.5:1 to the white background. The link gets darker when receiving keyboard focus and then 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).
From b5c98146260d915033495004285a22778a3f9826 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Fri, 8 Mar 2024 20:25:09 +0100 Subject: [PATCH 13/22] Update understanding/20/use-of-color.html Co-authored-by: Scott O'Hara --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index bd16d46f9e..514c6ce1f6 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -171,7 +171,7 @@

An examination

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.

- A blue inline text link in a block of black text, before and after receiving keyboard focus + 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
The blue inline text link has a contrast of 5.5:1 to the white background. The link gets darker when receiving keyboard focus and then 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).
From 8ba0a28e6d1f9b29f28a8fc7c32f4a7cce2ca7ac Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Fri, 8 Mar 2024 20:25:47 +0100 Subject: [PATCH 14/22] Update understanding/20/use-of-color.html Co-authored-by: Scott O'Hara --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 514c6ce1f6..7fba2ded2f 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 -
The blue inline text link has a contrast of 5.5:1 to the white background. The link gets darker when receiving keyboard focus and then 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. 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).
From f3f6e71bedde431ceaf9115303d54b3107b67601 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Fri, 8 Mar 2024 20:26:09 +0100 Subject: [PATCH 15/22] Update understanding/20/use-of-color.html Co-authored-by: Scott O'Hara --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 7fba2ded2f..a1450d2252 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -180,7 +180,7 @@

Focus on buttons

A page has a row of buttons with white text on a medium blue background. When one of the buttons receives keyboard focus, its background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that a change of color is not the only indicator of focus.

Three buttons with white text on a blue background. When a button receives keyboard focus, the background turns black -
A row buttons that all have white text on a mid-blue background with a contrast of 5:1. Keyboard focus turns the background black. The difference of contrast between the focused and the unfocused state of the button background color is 4.2:1.
+
A row buttons that all have white text on a mid-blue background with a contrast of 5:1. The black button represents a button which has received keyboard focus. The difference of contrast between the focused and the unfocused state of the button's background color is 4.2:1.
From 2ac4857e413259e3ed9f8c6f76b82f54199e6a95 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 16 Mar 2024 06:02:32 +0000 Subject: [PATCH 16/22] 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.
From 284d7fb414609c9df73dcdf673c2a7d3cdf1ed64 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 16 Mar 2024 08:53:25 +0000 Subject: [PATCH 17/22] Update understanding/20/use-of-color.html --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 3587910767..17a9a754a0 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -180,7 +180,7 @@

Focus on buttons

A page has a row of buttons with white text on a medium blue background. When one of the buttons receives keyboard focus, its background turns black. The difference of contrast between the unfocused and the focused button background is above 3:1. This difference of contrast means that a change of color is not the only indicator of focus.

Three buttons with white text on a blue background. When a button receives keyboard focus, the background turns black -
A row buttons that all have white text on a mid-blue background with a contrast of 5:1. The black button represents a button which has received keyboard focus. The difference of contrast between the focused and the unfocused state of the button's background color is 4.2:1.
+
A row of buttons that all have white text on a mid-blue background with a contrast of 5:1. The black button represents a button which has received keyboard focus. The difference of contrast between the focused and the unfocused state of the button's background color is 4.2:1.
From 14bba40af9bf7e66a73edd7b63b8e3e332bb9d70 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 16 Mar 2024 09:00:39 +0000 Subject: [PATCH 18/22] Swap base.css with editors.css for easier preview The styles get removed anyway at publication time, but this makes it easier when previewing the in-flight PR --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 17a9a754a0..c22fb1794a 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -3,7 +3,7 @@ Understanding Use of Color - +

Understanding Use of Color

From d7474a954d2026b7916d98e5c08c2f13c1b3e43c Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Wed, 22 May 2024 09:35:38 +0200 Subject: [PATCH 19/22] Update use-of-color.html in response to @fstrr s comment, in the paragraph preceding the illustration of the inline link, I changed contrast value of default link color to surrounding text color to 3.8:1. I also added the actual value of 2.0:1 between link color and surrounding text after the link receives focus, --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index af79b13ccf..c39bb1c14c 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -169,7 +169,7 @@

An examination

the numbers.

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.

+

A block of text contains a non-underlined blue hyperlink that has a contrast of 3.8: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 to 2:1, i.e., it is now 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, 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.
From 60c38d3cbc33b177e92032dc5ef77b2e738be8f0 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Wed, 22 May 2024 09:44:37 +0200 Subject: [PATCH 20/22] Update use-of-color.html Changed "just under 4:1" in the fig legend to the actual value of 3.8:1 (because it is also used in the text above the illustration). --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index c39bb1c14c..58b322c05c 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.8: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 to 2:1, i.e., it is now 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, 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.
+
In the default state, the blue hyperlink has a contrast of 5.5:1 to the white background, and 3.8: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.
From afb6dc15af3eec0c702d42be3ad3b24db4905907 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Wed, 22 May 2024 10:21:11 +0200 Subject: [PATCH 21/22] Update use-of-color.html Added a note that the underline must have at least 3:1 contrast. --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 58b322c05c..feaf8b93ee 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -169,7 +169,7 @@

An examination

the numbers.

Focus on links

-

A block of text contains a non-underlined blue hyperlink that has a contrast of 3.8: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 to 2:1, i.e., it is now 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.

+

A block of text contains a non-underlined blue hyperlink that has a contrast of 3.8: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 to 2:1, i.e., it is now 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. (Note that the underline must have a contrast of at least 3:1 against the background, otherwise it would fail Success Criterion 1.4.11 Not-text Contrast.)

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, and 3.8: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.
From d02f34b44294194950aaba9f189a27dd3ac2acbf Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Wed, 22 May 2024 10:24:48 +0200 Subject: [PATCH 22/22] Update use-of-color.html corrected typo --- understanding/20/use-of-color.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index feaf8b93ee..7b1cceab98 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -169,7 +169,7 @@

An examination

the numbers.

Focus on links

-

A block of text contains a non-underlined blue hyperlink that has a contrast of 3.8: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 to 2:1, i.e., it is now 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. (Note that the underline must have a contrast of at least 3:1 against the background, otherwise it would fail Success Criterion 1.4.11 Not-text Contrast.)

+

A block of text contains a non-underlined blue hyperlink that has a contrast of 3.8: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 to 2:1, i.e., it is now 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. (Note that the underline must have a contrast of at least 3:1 against the background, otherwise it would fail Success Criterion 1.4.11 Non-text Contrast.)

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, and 3.8: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.