Skip to content
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

1.4.11 Non-text Contrast understanding: expand explanation for Figure 10 #2681

Merged
merged 4 commits into from
Feb 27, 2024
Merged

1.4.11 Non-text Contrast understanding: expand explanation for Figure 10 #2681

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ccd7e30
1.4.11 Non-text Contrast understanding: expand explanation for Figure 10
patrickhlauke Sep 21, 2022
e942a46
Update understanding/21/non-text-contrast.html
mbgower Feb 9, 2024
c3f9b53
Update understanding/21/non-text-contrast.html
patrickhlauke Feb 23, 2024
8586f26
Merge branch 'main' into patrickhlauke-non-text-contrast-understandin…
mbgower Feb 27, 2024
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
3 changes: 2 additions & 1 deletion understanding/21/non-text-contrast.html
View file
Open in desktop
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