diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html
index e71b9d3b53..103d04876b 100644
--- a/understanding/20/use-of-color.html
+++ b/understanding/20/use-of-color.html
@@ -38,13 +38,28 @@ 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
- a required field had been left blank.
-
+ Examples of common failures include:
+
+ -
+ Information conveyed by color differences:
+
+ - 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;
+
+
+ - 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
+ required fields that have been left blank.
+ - Distinguishing a visual element:
+
+ - 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.
+
+
+ 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.
@@ -82,7 +97,7 @@
Intent of Use of Color
-
+
This criterion does not directly address the needs of users with assistive technologies.
It aims to ensure that sighted users who cannot distinguish between some colors can still
@@ -98,11 +113,9 @@
Intent of Use of Color
distinguish between certain color may not necessarily be using any assistive technologies. This
criterion requires a visible alternative to color.
-
-
Most user agents provide users with a color-only cue that a link has been previously activated by them ("visited"). However, several technical constraints result in authors having very limited control over these color-only indications of visited links. The technical constraints are as follows:
-
+
+
+
+
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 (new in WCAG 2.2).
+
+
+
+
+
Most user agents provide users with a color-only cue that a link has been previously activated by them ("visited"). However, several technical constraints result in authors having very limited control over these color-only indications of visited links. The technical constraints are as follows:
+
+ -
+ User agents constrain the exposure of a link's visited state due to privacy concerns. Author queries to user agents will indicate all links have not been visited.
+
+ -
+ Any available information on the visited state of a link would be inaccurate since it is both user and browser-dependent. Even if an author could accurately get information on previously activated links by a certain user, the author would be constrained to the current browser's preserved history, and would be unable to determine if the user had visited the page using a different browser (or if the history was not preserved, either from cache clearing or use of private sessions).
+
+ -
+ Authors can only use color to modify the
:visited CSS pseudoclass style. The technology constrains any non-color styling. Due to palette limitations, an author cannot use color alone to achieve 3:1 contrast between link and non-link text as well as between visited and unvisited links while also achieving 4.5:1 contrast for all link and non-link text.
+
+ -
+ Authors also cannot set the visited state of links. The anchor element does not include a "visited" attribute; therefore the author has no ability to alter the state through an attribute setting. As such, authors cannot achieve 1.3.1 Info and Relationships or
+ 4.1.2 Name, Role, Value in regard to visited links.
+
+
For these reasons, setting or conveying a link's visited status is not an author responsibility. Where color alone distinguishes between visited and unvisited links, it does not result in a failure of this Success Criterion, even where the contrast between the two link colors is below 3:1. Note that authors must continue to ensure that all text links meet contrast minimums against the page background (SC 1.4.3).
-
+
Benefits of Use of Color
in other visual ways.
- - People using limited color monochrome displays may be unable to access
- color-dependent information.
-
-
- - Users who have problems distinguishing between colors can look or listen for text
- cues.
-
+ - Users who have problems distinguishing between colors can look for other visual cues.
@@ -157,18 +189,27 @@ 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
- 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.
+ 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
- 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.
+ 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.
+ - A series of toggle buttons
+ - Users are presented with a series of toggle buttons that can be turned on or off. Visually,
+ when a toggle button is turned on, it not only has a different background color, but is
+ also styled to appear "pressed", with a distinctive inner shadow. Alternatively, toggles that
+ are turned on could have an extra "ticked" icon to distinguish them from toggles that are
+ turned off.
+ - Focus indication
+ - When an interactive control (like a button, toggle, or checkbox) receives focus, its background color
+ changes. In addition to this, an extra outline (which was not present in the control's unfocused state)
+ appears around the control.
-