From cf5b90d54e6b63362ecdd263ab6fe0d46b32cc5d Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Sun, 9 May 2021 11:20:51 +0100
Subject: [PATCH 03/19] Reword first examples so they don't sound like
instructions/descriptions
Currently, these examples sound far more like 1.3.3 Sensory Characteristics related instructions
---
understanding/20/use-of-color.html | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html
index ce6a6008ea..d38919c46f 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -29,11 +29,12 @@ Intent of Use of Color
only in color.
- Examples of information conveyed by color differences: “required fields are red",
- “error is shown in red", and “Mary's sales are in red, Tom's are in blue". Examples
- of indications of an action include: using color to indicate that a link will open
- in a new window or that a database entry has been updated successfully. An example
- of prompting a response would be: using highlighting on form fields to indicate that
+
Examples of information conveyed by color differences: required fields are only identified
+ by changing their border to a red color; sales figures for different employees are only
+ visually distinguished by using different foreground colors( e.g. Mary's sales are in red,
+ Tom's are in blue). Examples of indications of an action include: using color to indicate
+ that a link will open in a new window or that a database entry has been updated successfully.
+ An example of prompting a response would be: using highlighting on form fields to indicate that
a required field had been left blank. Examples of distinguishing a visual element:
for a series of toggle buttons, the pressed/activated buttons are only visually indicated
by a difference in color; the interactive element that currently has focus is only
From 37d6bda91997bfa12b3e9caa824cdf9b8978c6a7 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Sun, 9 May 2021 11:44:18 +0100
Subject: [PATCH 04/19] Further rework of examples
* restructure the examples as a more readable/scannable list
* add an explicit example of links versus static text
---
understanding/20/use-of-color.html | 30 ++++++++++++++++++------------
1 file changed, 18 insertions(+), 12 deletions(-)
diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html
index d38919c46f..ea6d87e6ed 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -29,20 +29,26 @@ Intent of Use of Color
only in color.
- Examples of information conveyed by color differences: required fields are only identified
+
Examples of common failures include:
+
+ - Information conveyed by color differences: required fields are only identified
by changing their border to a red color; sales figures for different employees are only
visually distinguished by using different foreground colors( e.g. Mary's sales are in red,
- Tom's are in blue). Examples of indications of an action include: using color to indicate
- that a link will open in a new window or that a database entry has been updated successfully.
- An example of prompting a response would be: using highlighting on form fields to indicate that
- a required field had been left blank. Examples of distinguishing a visual element:
- for a series of toggle buttons, the pressed/activated buttons are only visually indicated
- by a difference in color; the interactive element that currently has focus is only
- distinguished by changing the color of the element's existing background or
- border - however, if focus indication introduces a new visual element that was not previously
- present, this does not count as a change in color, since the indicator was not presentation
- to begin with.
-
+ Tom's are in blue).
+ - Indicating an action: using color to indicate
+ that a link will open in a new window or that a database entry has been updated successfully.
+ - Prompting a response: using highlighting on form fields to indicate that
+ a required field had been left blank.
+ - Distinguishing a visual element: links are only distinguished from surrounding text
+ using a subtle color difference (with a contrast difference that is less than 3:1); for a series of toggle
+ buttons, the pressed/activated buttons are only visually indicated by a difference in color;
+ the interactive element that currently has focus is only distinguished by changing the color
+ of the element's existing background or border. However, particularly in the case of state/focus
+ indication, note that if the visual indicator was not previously present, this does not count as
+ a change in color. For instance, if a focused element has a new border, or a new solid background
+ color, that was not there in its unfocused state, this does not count as a change of color alone,
+ since the indicator was not presentation to begin with.
+
From d8c857e92e84b2afc842cfd464092b3087028f94 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Mon, 10 May 2021 19:18:15 +0100
Subject: [PATCH 05/19] Tweak focus example, move and change note about other
criteria
---
understanding/20/use-of-color.html | 16 +++++++++-------
1 file changed, 9 insertions(+), 7 deletions(-)
diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html
index ea6d87e6ed..dcf4f4f548 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -46,7 +46,7 @@ Intent of Use of Color
of the element's existing background or border. However, particularly in the case of state/focus
indication, note that if the visual indicator was not previously present, this does not count as
a change in color. For instance, if a focused element has a new border, or a new solid background
- color, that was not there in its unfocused state, this does not count as a change of color alone,
+ shape, that was not there in its unfocused state, this does not count as a change of color alone,
since the indicator was not presentation to begin with.
@@ -94,6 +94,13 @@ Intent of Use of Color
+
+
+
Note that particularly in the case of focus indication, this criterion is likely to overlap with
+ other, more specific criteria, such as
+ 2.4.11 Focus Appearance (Minimum) (new in WCAG 2.2).
+
+
@@ -174,14 +181,9 @@ Examples of Use of Color
Focus indication
When an interactive control (like a button, toggle, or checkbox) receives focus, its background color
- changes. In addition to this, an additional outline (which was not present in the control's unfocused state)
+ changes. In addition to this, an extra outline (which was not present in the control's unfocused state)
appears around the control.
- Note that when it comes to focus indication, there are additional criteria
- that apply. For instance, in this case, the additional outline will pass this criterion - as it provides
- another visual cue to distinguish the focused element - but the outline itself will still need to pass
- 1.4.11 Non-text Contrast.
-
From de1e9b79f55ac04a1576ef13ab6d9315e3178096 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Mon, 6 May 2024 10:36:13 +0100
Subject: [PATCH 06/19] Update understanding/20/use-of-color.html
Co-authored-by: Giacomo Petri
---
understanding/20/use-of-color.html | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html
index 20ac5c85c4..b44e7f5b5c 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -40,10 +40,14 @@ Intent of Use of Color
Examples of common failures include:
- - Information conveyed by color differences: required fields are only identified
- by changing their border to a red color; sales figures for different employees are only
- visually distinguished by using different foreground colors( e.g. Mary's sales are in red,
- Tom's are in blue).
+ -
+ Information conveyed by color differences:
+
+ - required fields are only identified by changing their border to a red color;
+ - the company transactions are only visually distinguished by using different foreground colors: red for debits and green for credits;
+ - subway lines are visually distinguished solely by employing various filled colors.
+
+
- Indicating an action: using color to indicate
that a link will open in a new window or that a database entry has been updated successfully.
- Prompting a response: using highlighting on form fields to indicate that
From 00f06b4da2db41313068d96d3be561e840628f77 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke"
Date: Mon, 6 May 2024 10:37:05 +0100
Subject: [PATCH 07/19] Update understanding/20/use-of-color.html
Co-authored-by: Giacomo Petri
---
understanding/20/use-of-color.html | 18 ++++++++----------
1 file changed, 8 insertions(+), 10 deletions(-)
diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html
index b44e7f5b5c..f849fe4594 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -52,16 +52,14 @@
Intent of Use of Color
that a link will open in a new window or that a database entry has been updated successfully.
- Prompting a response: using highlighting on form fields to indicate that
a required field had been left blank.
- - Distinguishing a visual element: links are only distinguished from surrounding text
- using a subtle color difference (with a contrast difference that is less than 3:1); for a series of toggle
- buttons, the pressed/activated buttons are only visually indicated by a difference in color;
- the interactive element that currently has focus is only distinguished by changing the color
- of the element's existing background or border. However, particularly in the case of state/focus
- indication, note that if the visual indicator was not previously present, this does not count as
- a change in color. For instance, if a focused element has a new border, or a new solid background
- shape, that was not there in its unfocused state, this does not count as a change of color alone,
- since the indicator was not presentation to begin with.
-
+ Distinguishing a visual element:
+
+ - links are only distinguished from surrounding text using a subtle color difference (with a contrast difference that is less than 3:1);
+ - for a series of toggle buttons, the pressed/activated buttons are only visually indicated by a difference in color;
+ - the interactive element that currently has focus is only distinguished by changing the color of the element's existing background or border.
+
+
+ However, particularly in the case of state/focus indication, note that if the visual indicator was not previously present, this does not count as a change in color. For instance, if a focused element has a new border, or a new solid background shape, that was not there in its unfocused state, this does not count as a change of color alone, since the indicator was not presentation to begin with.
From 175f5c52bf93e4ecc046afbe8d5822a51827fa41 Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:02:04 -0700
Subject: [PATCH 08/19] 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 f849fe4594..1de57ba835 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -44,7 +44,7 @@ Intent of Use of Color
Information conveyed by color differences:
- required fields are only identified by changing their border to a red color;
- - the company transactions are only visually distinguished by using different foreground colors: red for debits and green for credits;
+ - the nature of transactions are only visually distinguished by using different foreground colors: red for debits and green for credits;
- subway lines are visually distinguished solely by employing various filled colors.
From b6e262cc5b6e4ebf35803925930f2a7249628bf4 Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:02:46 -0700
Subject: [PATCH 09/19] 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 1de57ba835..d6089cbc22 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -44,7 +44,7 @@ Intent of Use of Color
Information conveyed by color differences:
- required fields are only identified by changing their border to a red color;
- - the nature of transactions are only visually distinguished by using different foreground colors: red for debits and green for credits;
+ - the type of transaction is only visually distinguished by using different foreground colors: red for debits and green for credits;
- subway lines are visually distinguished solely by employing various filled colors.
From ab1bc2eb9c4a86bbe6a63c60b8ff55e6a0edcc94 Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:05:03 -0700
Subject: [PATCH 10/19] 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 d6089cbc22..a51a452985 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -48,7 +48,7 @@ Intent of Use of Color
subway lines are visually distinguished solely by employing various filled colors.
- Indicating an action: using color to indicate
+ using color alone to indicate
that a link will open in a new window or that a database entry has been updated successfully.
Prompting a response: using highlighting on form fields to indicate that
a required field had been left blank.
From dbe48eea4243ad689f2fe0580d8b94815778205d Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:07:20 -0700
Subject: [PATCH 11/19] 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 a51a452985..b19175a97a 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -50,7 +50,7 @@ Intent of Use of Color
using color alone to indicate
that a link will open in a new window or that a database entry has been updated successfully.
- Prompting a response: using highlighting on form fields to indicate that
+ using subtle color highlighting on form fields to prompt for a response on
a required field had been left blank.
Distinguishing a visual element:
From 0a08f7cc73250c2735ccca74c9a0fc1eca6ac3d1 Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:08:16 -0700
Subject: [PATCH 12/19] 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 b19175a97a..548adf6b3f 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -51,7 +51,7 @@ Intent of Use of Color
- using color alone to indicate
that a link will open in a new window or that a database entry has been updated successfully.
- using subtle color highlighting on form fields to prompt for a response on
- a required field had been left blank.
+ required fields that have been left blank.
Distinguishing a visual element:
- links are only distinguished from surrounding text using a subtle color difference (with a contrast difference that is less than 3:1);
From 8b4069516567eed787b7358fc4d3db2a8360f177 Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:09:39 -0700
Subject: [PATCH 13/19] 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 548adf6b3f..919930f35a 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -55,7 +55,7 @@ Intent of Use of Color
- Distinguishing a visual element:
- links are only distinguished from surrounding text using a subtle color difference (with a contrast difference that is less than 3:1);
- - for a series of toggle buttons, the pressed/activated buttons are only visually indicated by a difference in color;
+ - for a series of toggle buttons, the pressed/activated buttons are only visually indicated by a subtle difference in color;
- the interactive element that currently has focus is only distinguished by changing the color of the element's existing background or border.
From ed9ac55a43e64c2eab557758c3d065d9968c3f31 Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:12:14 -0700
Subject: [PATCH 14/19] 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 919930f35a..29286a0ff9 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -59,7 +59,7 @@ Intent of Use of Color
- the interactive element that currently has focus is only distinguished by changing the color of the element's existing background or border.
- However, particularly in the case of state/focus indication, note that if the visual indicator was not previously present, this does not count as a change in color. For instance, if a focused element has a new border, or a new solid background shape, that was not there in its unfocused state, this does not count as a change of color alone, since the indicator was not presentation to begin with.
+ However, particularly in the case of state/focus indication, note that if the visual indicator was not previously present, this does not count as a change in color. For instance, if a focused element has a new border, or a new solid background shape, that was not there in its unfocused state, this does not count as a change of color alone, since the indicator was not present to begin with.
From f5f671b79c822473a5a164b71e42709bb985dc38 Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:13:15 -0700
Subject: [PATCH 15/19] 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 29286a0ff9..452af94c08 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -55,7 +55,7 @@ Intent of Use of Color
Distinguishing a visual element:
- links are only distinguished from surrounding text using a subtle color difference (with a contrast difference that is less than 3:1);
- - for a series of toggle buttons, the pressed/activated buttons are only visually indicated by a subtle difference in color;
+ - for a series of toggle buttons, the pressed and unpressed buttons are only visually indicated by a subtle difference in color;
- the interactive element that currently has focus is only distinguished by changing the color of the element's existing background or border.
From 9cabd443abb3c721e06f438b2d39a7b2056fad9f Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:22:26 -0700
Subject: [PATCH 16/19] 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 452af94c08..cdb9231cc2 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -54,7 +54,7 @@ Intent of Use of Color
required fields that have been left blank.
Distinguishing a visual element:
- - links are only distinguished from surrounding text using a subtle color difference (with a contrast difference that is less than 3:1);
+ - text links are only distinguished from surrounding text using a subtle color text difference (with a contrast difference that is less than 3:1);
- for a series of toggle buttons, the pressed and unpressed buttons are only visually indicated by a subtle difference in color;
- the interactive element that currently has focus is only distinguished by changing the color of the element's existing background or border.
From 6f6cbf22fb5c6e30b8f0199bceda92e4d860b80c Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 07:23:48 -0700
Subject: [PATCH 17/19] 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 cdb9231cc2..52bf55c673 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -54,7 +54,7 @@ Intent of Use of Color
required fields that have been left blank.
Distinguishing a visual element:
- - text links are only distinguished from surrounding text using a subtle color text difference (with a contrast difference that is less than 3:1);
+ - text links are only distinguished from surrounding text using a subtle text color difference (with a contrast difference that is less than 3:1);
- for a series of toggle buttons, the pressed and unpressed buttons are only visually indicated by a subtle difference in color;
- the interactive element that currently has focus is only distinguished by changing the color of the element's existing background or border.
From 4fae90ed2793b25f9380c37aaeb680a3f772b68b Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 14:08:00 -0700
Subject: [PATCH 18/19] 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 52bf55c673..4fd8268d98 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -43,7 +43,7 @@ Intent of Use of Color
Information conveyed by color differences:
- - required fields are only identified by changing their border to a red color;
+ - required fields are only identified by changing their existing border to a red color;
- the type of transaction is only visually distinguished by using different foreground colors: red for debits and green for credits;
- subway lines are visually distinguished solely by employing various filled colors.
From 63d2053eff7c75173e4529b18a583800c87cb7b8 Mon Sep 17 00:00:00 2001
From: Mike Gower
Date: Wed, 12 Jun 2024 14:13:18 -0700
Subject: [PATCH 19/19] 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 4fd8268d98..531f0d5a83 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -45,7 +45,7 @@ Intent of Use of Color
- required fields are only identified by changing their existing border to a red color;
- the type of transaction is only visually distinguished by using different foreground colors: red for debits and green for credits;
- - subway lines are visually distinguished solely by employing various filled colors.
+ - subway lines are visually distinguished solely by employing various filled colors;
using color alone to indicate