Skip to content

F81 note updated to clarify the meaning of “sufficient difference in luminosity" #4530

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

Closed
giacomo-petri wants to merge 2 commits into from
Closed

F81 note updated to clarify the meaning of “sufficient difference in luminosity" #4530

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bbcd05a
note improved
giacomo-petri Aug 11, 2025
a56ebf2
Fix G183 relative link
kfranqueiro Sep 19, 2025
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
4 changes: 2 additions & 2 deletions techniques/failures/F81.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<li>A user submits an online form and leaves a required field blank, resulting in an error. The form field that caused the error is indicated by red text only, without an additional non-color indication that the field caused an error.</li>
</ul>
<div class="note">
<p>In both examples, the color could be used without failure if the text was sufficiently different in visual presentation (e.g. bold or in a different font) that it would be easily differentiated from the surrounding text if the color were removed. It would also not fail if the color chosen had sufficient luminosity difference (lightness) from the other text that it would be easily be seen as different if viewed in black and white. In these cases - the information would not be displayed in color (hue) alone but also in "presentation" or "lightness" respectively. </p>
<p>In both examples, the color could be used without failure if the text was sufficiently different in visual presentation (e.g. bold or in a different font) that it would be easily differentiated from the surrounding text if the color were removed. It would also not fail if the color chosen had sufficient luminosity difference (lightness) from the other text that it would be easily be seen as different if viewed in black and white. Like technique <a href="../general/G183">G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them</a>, a sufficient luminosity difference would be a contrast ratio of 3:1. In these cases - the information would not be displayed in color (hue) alone but also in "presentation" or "lightness" respectively. </p>
Copy link
Copy Markdown
Member

@patrickhlauke patrickhlauke Sep 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://www.w3.org/WAI/WCAG22/Understanding/use-of-color already has the note that explains this, so no need to point to G183

Note

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 both by color (hue) and 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).

Copy link
Copy Markdown
Contributor

@mbgower mbgower Sep 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given it is in the Understanding document note now, I'm inclined to conclude it is already covered, and this PR can be closed as unnecessary. Note too that #873, which this is intended to address, was already closed by a change last month.

</div>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
Expand All @@ -22,4 +22,4 @@
<li>If check #1 is false, then this failure condition applies and content fails the Success Criterion.</li>
</ul>
</section>
</section></body></html>
</section></body></html>