Skip to content

Rework understanding for 1.4.1 to be firmly only about visual aspect #1500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Dec 15, 2020
Merged

Rework understanding for 1.4.1 to be firmly only about visual aspect #1500

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2622d7f
Remove text-only/AT specific elements, add clarification about visual…
patrickhlauke Oct 31, 2020
955dd7a
Add link text to CSS additional technique
patrickhlauke Oct 31, 2020
9b74ac0
Add note about color vs hue/lightness
patrickhlauke Oct 31, 2020
0ef12aa
Extend note to clarify when contrast still not enough
patrickhlauke Nov 4, 2020
820c5bd
Change "perceive color" to be more accurate
patrickhlauke Nov 12, 2020
5b38ea6
More precise - use wording of the definition when talking about contr…
patrickhlauke Nov 12, 2020
b2fd24e
Updating example
alastc Dec 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 50 additions & 39 deletions understanding/20/use-of-color.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ <h1>Understanding Use of Color</h1>
<h2>Intent of Use of Color</h2>


<p>The intent of this Success Criterion is to ensure that all users can access information
<p>The intent of this Success Criterion is to ensure that all sighted users can access information
that is conveyed by color differences, that is, by the use of color where each color
has a meaning assigned to it. If the information is conveyed through color differences
in an image (or other non-text format), the color may not be seen by users with color
Expand All @@ -24,7 +24,7 @@ <h2>Intent of Use of Color</h2>
<p>Color is an important asset in design of Web content, enhancing its aesthetic appeal,
its usability, and its accessibility. However, some users have difficulty perceiving
color. People with partial sight often experience limited color vision, and many older
users do not see color well. In addition, people using text-only, limited-color or
users do not see color well. In addition, people using limited-color or
monochrome displays and browsers will be unable to access information that is presented
only in color.
</p>
Expand All @@ -44,6 +44,44 @@ <h2>Intent of Use of Color</h2>
</p>

</div>


<div class="note">

<p>If content is conveyed through the use of colors that differ not only in their hue,
but that also have a significant difference in lightness, then this counts as an additional
visual distinction, as long as the difference in relative luminance between the colors leads
to a contrast ratio of 3:1 or greater.
For example, a light green and a dark red differ <strong>both</strong> by color (hue)
<strong>and</strong> by lightness, so they would pass if the contrast ratio is at least 3:1.
Similarly, if content is distinguished by inverting an element's foreground and background colors,
this would pass (again, assuming that the foreground and background colors have a sufficient contrast).
</p>
<p>However, if content relies on the user's ability to accurately perceive or differentiate a particular color
an additional visual indicator will be required regardless of the contrast ratio between those colors. For example,
knowing whether an outline is green for valid or red for invalid.
</p>

</div>

<div class="note">

<p>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
understand content.
How information is conveyed to assistive technology users is covered separately in other
criteria, including (but not limited to)
<a href="non-text-content">1.1.1 Non-text Content</a>,
<a href="info-and-relationships">1.3.1 Info and Relationships</a>, and
<a href="name-role-value">4.1.2 Name, Role, Value</a>.
</p>
<p>Conversely, even if information that is conveyed by color differences is appropriately conveyed
to assistive technologies, it does not necessarily pass this criterion, as sighted users who cannot
distinguish between certain color may not necessarily be using any assistive technologies. This
criterion requires a visible alternative to color.
</p>

</div>


</section>
Expand All @@ -61,18 +99,14 @@ <h2>Benefits of Use of Color</h2>
in other visual ways.
</li>

<li>People using text-only, limited color, or monochrome displays may be unable to access
<li>People using limited color monochrome displays may be unable to access
color-dependent information.
</li>

<li>Users who have problems distinguishing between colors can look or listen for text
cues.
</li>

<li>People using Braille displays or other tactile interfaces can detect text cues by
touch.
</li>

</ul>

</section>
Expand All @@ -92,11 +126,10 @@ <h2>Examples of Use of Color</h2>
</p>

<p>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
whose text alternative says, "Required." Both the red text and the icon are programmatically
associated with the appropriate form fields so that assistive technology users can
determine the required fields.

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.
</p>

</li>
Expand All @@ -110,32 +143,10 @@ <h2>Examples of Use of Color</h2>
</p>

<p>Students view an SVG image of a chemical compound and identify the chemical elements
present based on the colors and numbers used in the diagram. The text alternatives
associated with each element name the color of the element and indicate the element's
position in the diagram. Students who cannot perceive color have the same information
about the compound as their classmates. (This technique also satisfies
<a href="non-text-content" class="guideline">Guideline 1.1</a> Level A.)
</p>

</li>

<li>

<p>

<strong> Disabled Form elements.</strong>

</p>

<p>
Form elements which are disabled via markup or scripting, are greyed out and made
inactive by the user agent. When in the disabled state these elements do not receive
focus. Assistive technologies can programmatically determine the state of disabled
elements and will provide this information to the user as the elements are encountered
on the page. The change in color and loss of focus provides redundant, visual information
about the state of the control.


present based <strong>both</strong> 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.
</p>

</li>
Expand Down Expand Up @@ -276,7 +287,7 @@ <h3>Additional Techniques (Advisory) for Use of Color</h3>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15" class="css"></a>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15" class="css">Using CSS to change the presentation of a user interface component when it receives focus</a>

</li>

Expand Down