Skip to content

Commit

Permalink
1.4.11 Non-text Contrast understanding: expand explanation for Figure…
Browse files Browse the repository at this point in the history
… 10 (#2681)

Provides some actual context about *why* the green border doesn't need
to contrast with the button itself, and moves the easily missed extra
prose that follows into the actual figure caption (as it's currently
easy to miss when skimming over the document)

---------

Co-authored-by: Mike Gower <[email protected]>
  • Loading branch information
patrickhlauke and mbgower authored Feb 27, 2024
1 parent 4b2c08b commit 2aee9c9
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion understanding/21/non-text-contrast.html
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,10 @@ <h4 id="related-focus">Relationship with Focus Visible</h4>
<figure id="figure-focus-outer-green">
<img src="img/ntc-focus-outer-green.png" alt="Three blue buttons on a white background, the middle has a dark green outline outside of the botton's non-focused boundary." width="400" />
<figcaption>
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.
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, as visually the effect is that the button is noticeably larger, and it's not necessary for a user to be able to discern this extra border in isolation. Although this passes non-text contrast, it is not a good indicator unless it is very thick. <span class="wcag22">There is a AAA criterion in WCAG 2.2 that addresses this aspect, <a href="../22/focus-appearance.html">Focus Appearance</a>.
</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-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>

Expand Down

0 comments on commit 2aee9c9

Please sign in to comment.