Skip to content

Commit

Permalink
Merge pull request #3605 from w3c/giacomo-petri-patch-non-text-contra…
Browse files Browse the repository at this point in the history 
…st-patch-1

Fixed Figure 10 broken link to Focus Appearance on the Understanding Document for Non-text contrast
  • Loading branch information
@alastc
alastc authored Jan 18, 2024
2 parents 29376da + bfc66cb commit d50e1de
Showing 1 changed file with 14 additions and 15 deletions.
29 changes: 14 additions & 15 deletions understanding/21/non-text-contrast.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ <h4>Adjacent colors</h4>

<h4 id="related-color">Relationship with Use of Color</h4>

<p>The <a href="use-of-color">Use of Color</a> success criterion addresses changing <strong>only the color</strong> (hue) of an object or text without otherwise altering the object's form. The principle is that contrast ratio (the difference in brightness) can be used to distinguish text or graphics. For example, <a href="../../techniques/general/G183.html">G183</a> is a technique to use a contrast ratio of 3:1 with surrounding text to distinguish links and controls. In that case the Working Group regards a link color that meets the 3:1 contrast ratio relative to the non-linked text color as satisfying the Success Criterion <a href="use-of-color">1.4.1 Use of color</a> since it is relying on contrast ratio as well as color (hue) to convey that the text is a link.</p>
<p>The <a href="use-of-color">Use of Color</a> success criterion addresses changing <strong>only the color</strong> (hue) of an object or text without otherwise altering the object's form. The principle is that contrast ratio (the difference in brightness) can be used to distinguish text or graphics. For example, <a href="../Techniques/general/G183.html">G183</a> is a technique to use a contrast ratio of 3:1 with surrounding text to distinguish links and controls. In that case the Working Group regards a link color that meets the 3:1 contrast ratio relative to the non-linked text color as satisfying the Success Criterion <a href="use-of-color">1.4.1 Use of color</a> since it is relying on contrast ratio as well as color (hue) to convey that the text is a link.</p>

<p>Non-text information within controls that uses a change of hue alone to convey the value or state of an input, such as a 1-5 star indicator with a black outline for each star filled with either yellow (full) or white (empty) is likely to fail the Use of color criterion rather than this one.</p>

Expand All @@ -95,12 +95,12 @@ <h4 id="related-color">Relationship with Use of Color</h4>
</figcaption>
</figure>

<p>Using a change of contrast for focus and other states is a technique to differentiate the states. This is the basis for <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G195" class="general">G195: Using an author-supplied, highly visible focus indicator</a>, and more techniques are being added.</p>
<p>Using a change of contrast for focus and other states is a technique to differentiate the states. This is the basis for <a href="../Techniques/general/G195.html" class="general">G195: Using an author-supplied, highly visible focus indicator</a>, and more techniques are being added.</p>


<h4 id="related-focus">Relationship with Focus Visible</h4>

<p>In combination with <a href="https://www.w3.org/TR/WCAG21/#focus-visible">2.4.7 Focus Visible</a>, the visual focus indicator for a component <em>must</em> have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.</p>
<p>In combination with <a href="focus-visible" class="sc">2.4.7 Focus Visible</a>, the visual focus indicator for a component <em>must</em> have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.</p>

<p>Most focus indicators appear outside the component - in that case it needs to contrast with the background that the component is on. Other cases include focus indicators which are:</p>

Expand Down Expand Up @@ -131,8 +131,7 @@ <h4 id="related-focus">Relationship with Focus Visible</h4>
The external green indicator (#008000) does contrast with the white background (#FFF) which the component is on, <strong>passing</strong> the criterion. It does not need to contrast with both the component background and the component.
</figcaption>
</figure>
<p>Although the figure above with a dark outline passes non-text contrast, it is not a good indicator unless it is very thick. <span class="wcag22">There is a criterion in WCAG 2.2 that addresses this aspect, <a href="focus-not-obscured-minimum.html">Focus Appearance</a>.</span></p>

<p>Although the figure above with a dark outline passes non-text contrast, it is not a good indicator unless it is very thick. <span class="wcag22">There is a criterion in WCAG 2.2 that addresses this aspect, <a href="focus-appearance" class="sc">Focus Appearance</a>.</span></p>
<p>If an indicator is partly inside and partly outside the component, either part of the indicator could provide contrast.</p>

<figure id="figure-focus-outer-inner">
Expand Down Expand Up @@ -359,7 +358,7 @@ <h4>Required for Understanding</h4>
<ul>
<li>
<p>A graphic with text embedded or overlayed conveys the same information, such as labels <em>and</em> values on a chart.</p>
<p class="note">Text within a graphic must meet <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contrast (Minimum)</a>.</p>
<p class="note">Text within a graphic must meet <a href="contrast-minimum" class="sc">1.4.3 Contrast (Minimum)</a>.</p>
</li>
<li> The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality.</li>
<li> The information is available in another form, such as in a table that follows the graph, which becomes visible when a "Long Description" button is pressed.</li>
Expand Down Expand Up @@ -393,10 +392,10 @@ <h4>Infographics</h4>
<p>Infographics often fail to meet several WCAG level AA criteria including:</p>

<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html">1.1.1 Non-text Content</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html">1.4.1 Use of Color</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html">1.4.3 (Text) Contrast</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html">1.4.5 Images of Text</a></li>
<li><a href="non-text-content" class="sc">1.1.1 Non-text Content</a></li>
<li><a href="use-of-color" class="sc">1.4.1 Use of Color</a></li>
<li><a href="contrast-minimum" class="sc">1.4.3 (Text) Contrast</a></li>
<li><a href="images-of-text" class="sc">1.4.5 Images of Text</a></li>
</ul>

<p>An infographic can use text which meets the other criteria to minimise the number of graphical objects required for understanding. For example, using text with sufficient contrast to provide the values in a chart. A long description would also be sufficient because then the infograph is not relied upon for understanding.</p>
Expand Down Expand Up @@ -515,15 +514,15 @@ <h3>Sufficient</h3>
<section class="situation">
<h4>Situation A: Color is used to identify user interface components or used to identify user interface component states</h4>
<ul>
<li><a href="../../techniques/general/G195" class="general">G195: Using an author-supplied, highly visible focus indicator</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a></li>
<li><a href="../Techniques/general/G195" class="general">G195: Using an author-supplied, highly visible focus indicator</a></li>
<li><a href="../Techniques/general/G174" class="general">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a></li>
</ul>
</section>
<section class="situation">
<h4>Situation B: Color is required to understand graphical content</h4>
<ul>
<li><a href="../../techniques/general/G207" class="general">G207: Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
<li><a href="../../techniques/general/G209" class="general">G209: Provide sufficient contrast at the boundaries between adjoining colors</a></li>
<li><a href="../Techniques/general/G207" class="general">G207: Ensuring that a contrast ratio of 3:1 is provided for icons</a></li>
<li><a href="../Techniques/general/G209" class="general">G209: Provide sufficient contrast at the boundaries between adjoining colors</a></li>
</ul>
</section>

Expand All @@ -537,7 +536,7 @@ <h3>Advisory</h3>
<section id="failure">
<h3>Failures</h3>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F78" class="general">F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator</a></li>
<li><a href="../Techniques/failures/F78" class="general">F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator</a></li>
</ul>
</section>
</section>
Expand Down

0 comments on commit d50e1de

Please sign in to comment.