Skip to content

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

Closed
giacomo-petri wants to merge 2 commits intomainfrom
giacomo-petri-f81-note-improvement
Closed

F81 note updated to clarify the meaning of “sufficient difference in luminosity"#4530
giacomo-petri wants to merge 2 commits intomainfrom
giacomo-petri-f81-note-improvement

Conversation

@giacomo-petri
Copy link
Copy Markdown
Contributor

@giacomo-petri giacomo-petri commented Aug 11, 2025

Closes: #873

Updated note for clarity; in line with technique G183, a sufficient difference in luminosity is defined as a contrast ratio of at least 3:1.

Preview diff of F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only

@netlify
Copy link
Copy Markdown

netlify Bot commented Aug 11, 2025

Deploy Preview for wcag2 ready!

Name Link
🔨 Latest commit a56ebf2
🔍 Latest deploy log https://app.netlify.com/projects/wcag2/deploys/68cdccfd6574f20008d643b7
😎 Deploy Preview https://deploy-preview-4530--wcag2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@kfranqueiro
Copy link
Copy Markdown
Contributor

Note that this conflicts with the change from #1033.

I suspect the edit in this PR could supersede the "A minimum contrast ratio" sentence that was added mid-paragraph, but we probably want to retain the additional sentence that #1033 added at the end?

(I can make these changes if there's agreement)

Copy link
Copy Markdown
Contributor

@bruce-usab bruce-usab left a comment

Choose a reason for hiding this comment

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

@kfranqueiro please check link to G183 in deploy preview for F81. The syntax looks correct to me, but it results in an 404.

@kfranqueiro
Copy link
Copy Markdown
Contributor

@kfranqueiro please check link to G183 in deploy preview for F81. The syntax looks correct to me, but it results in an 404.

Good spot, fixed. The technique being linked from is in a different techniques subfolder so it needs to navigate one level up and into general.

@patrickhlauke
Copy link
Copy Markdown
Member

worth pointing out that the whole "3:1 is considered sufficient" had been hoisted up into the actual understanding doc itself https://www.w3.org/WAI/WCAG22/Understanding/use-of-color ... so perhaps better to reference/mention that, rather than trying to cross-link to another technique

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

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

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.

@mbgower mbgower self-assigned this Sep 26, 2025
@mbgower
Copy link
Copy Markdown
Contributor

mbgower commented Sep 26, 2025

@mbgower to close with comment

@mbgower
Copy link
Copy Markdown
Contributor

mbgower commented Oct 1, 2025

@giacomo-petri Given it is in the Understanding document note now, we 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. If you feel we're missing something, please reopen.

@mbgower mbgower closed this Oct 1, 2025
@mbgower mbgower deleted the giacomo-petri-f81-note-improvement branch October 1, 2025 22:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Explanation of exception in F81 insufficient

5 participants