Skip to content

Add clarification to 1.4.11 Non-text contrast understanding about logos acting as user interface components - UIC "inherits" the exemption for logos with insufficient contrast #5250

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

Merged
patrickhlauke merged 15 commits into from
Sep 6, 2026
+423 −421
Merged

Add clarification to 1.4.11 Non-text contrast understanding about logos acting as user interface components - UIC "inherits" the exemption for logos with insufficient contrast #5250

Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3e5b879
Reorder logo exception content, add clarification about exempt graphi…
patrickhlauke Aug 3, 2026
b230c6c
Merge branch 'main' into patrickhlauke-non-text-exemption-uic-2
patrickhlauke Aug 7, 2026
13c90fb
Update understanding/21/non-text-contrast.html
patrickhlauke Aug 8, 2026
4e32092
Merge branch 'main' into patrickhlauke-non-text-exemption-uic-2
patrickhlauke Aug 14, 2026
33d1ccf
Make "Hover states" `h4` instead of `h3`
patrickhlauke Aug 14, 2026
58e04ba
Move examples into a more logical order and heading hierarchy
patrickhlauke Aug 14, 2026
b285464
Wrap hex color in `<code>`
patrickhlauke Aug 14, 2026
113d007
Update understanding/21/non-text-contrast.html
patrickhlauke Aug 20, 2026
32111e9
Merge branch 'main' into patrickhlauke-non-text-exemption-uic-2
patrickhlauke Aug 20, 2026
9ccf664
Apply suggestion from @patrickhlauke
patrickhlauke Aug 21, 2026
822f84f
Apply suggestion from @patrickhlauke
patrickhlauke Aug 21, 2026
c33a064
Merge branch 'main' into patrickhlauke-non-text-exemption-uic-2
patrickhlauke Aug 24, 2026
4e9e0f7
Merge branch 'main' into patrickhlauke-non-text-exemption-uic-2
patrickhlauke Sep 6, 2026
9458db4
Apply suggestion from @patrickhlauke
patrickhlauke Sep 6, 2026
655f2e3
Merge branch 'main' into patrickhlauke-non-text-exemption-uic-2
patrickhlauke Sep 6, 2026
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
141 changes: 72 additions & 69 deletions understanding/21/non-text-contrast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ <h4 id="related-focus">Relationship with Focus Visible</h4>
</figcaption>
</figure>

<p>Note that this success criterion does not directly compare the focused and unfocused states of a control - if the focus state relies on a change of color (e.g., changing <em>only</em> the background color of a button), this success criterion does not define any requirement for the difference in contrast between the two states.</p>
<p>Note that this success criterion does not directly compare the focused and unfocused states of a control - if the focus state relies on a change of color (e.g., changing <em>only</em> the background color of a button), this success criterion does not define any requirement for the difference in contrast between the two states.</p>

<figure id="figure-focus-background">
{% include "./img/1.4.11-ntc-focus-background.svg" %}
Expand All @@ -197,7 +197,7 @@ <h3>Hover states</h3>
</section>

<section>
<h3>User Interface Component Examples</h3>
<h3>User Interface Component examples</h3>
<p>For designing focus indicators, selection indicators and user interface components that need to be perceived clearly, the following are examples that have sufficient contrast.</p>

<h4>Passing User Interface Component Examples</h4>
Expand Down Expand Up @@ -410,7 +410,7 @@ <h5>Checkbox - Subtle hover style</h5>

</div>

<h4>Failing User Interface Component Examples</h4>
<h4>Failing User Interface Component examples</h4>

<p>The following are examples that have insufficient contrast.</p>

Expand Down Expand Up @@ -639,74 +639,54 @@ <h3>Graphical Objects</h3>
</figure>

<section>
<h4>Required for Understanding</h4>

<p>The term &quot;required for understanding&quot; is used in the success criterion as many graphics do not need to meet the contrast requirements. If a person needs to perceive a graphic, or part of a graphic (a graphical object) in order to understand the content it should have sufficient contrast. However, that is not a requirement when:</p>
<ul>
<li>
<p>A graphic with text embedded or overlaid 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="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>
<li> The graphic is part of a logo or brand name (which is considered &quot;essential&quot; to its presentation).</li>
</ul>
</section>

<section>
<h4>Logos</h4>

<p>Logos are exempted from contrast requirements, under the assumption that they must comply with stricter color choices mandated
by corporate identity or brand guidelines. However, this can be problematic when logos act as <a>user interface components</a>
(such as a link or other interactive control). In these cases, as a best practice, authors should consider choosing a variant of
the logo that has sufficient contrast, if allowed by the corporate identity or brand guidelines.
Alternatively, authors should consider providing an equivalent <a>user interface component</a> which serves the same purpose and meets
contrast requirements.</p>

<p>If logos are presented with an insufficient contrast, but their presentation was an author choice rather than
being mandated by corporate identity or brand guidelines, then that particular low contrast presentation is
<em>not</em> "essential", and the logo is <em>not</em> exempt from the contrast requirements.</p>

<figure id="figure-low-contrast-logos-author-choice">
<img src="img/1.4.11-ntc-author-choice-logos.png" alt="A heading: 'ACME tool is trusted by the world's most innovative companies.'; below the heading, a series of nine company logos, all presented as very dark grey logos on the page's black background, with very low contrast; one logo is hovered with the mouse, and is displayed in white, with high contrast against the page background.">
<figcaption>An author chooses to present company logos with low contrast by default, until they are hovered; the fact that these are logos doesn't exempt this scenario from failing the requirements of this success criterion, as the initial low contrast presentation is not "essential"</figcaption>
</figure>
<h4>Required for understanding</h4>

<p>The term &quot;required for understanding&quot; is used in the success criterion as many graphics do not need to meet the contrast requirements. If a person needs to perceive a graphic, or part of a graphic (a graphical object) in order to understand the content it should have sufficient contrast. However, that is not a requirement when:</p>
<ul>
<li>
<p>A graphic with text embedded or overlaid 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="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>
<li>The graphic's presentation falls under the <a href="#essential-exception">essential exception</a>.</li>
</ul>
</section>
<section>
<h4>Gradients</h4>

<p>Gradients can reduce the apparent contrast between areas, and make it more difficult to test. The general principles is to identify the graphical object(s) required for understanding, and take the central color of that area. If you remove the adjacent color which does not have sufficient contrast, can you still identify and understand the graphical object?</p>
<figure id="figure-blue-circle-i-versions">
<img src="img/contrast-gradient.png" alt="Two versions of a blue circle with an 'i' indicating information. The first example has a blue gradient background, the second is missing the upper half of the background which obscures the i." width="300">
<figcaption>Removing the background which does not have sufficient contrast highlights that the graphical object (the &quot;i&quot;) is not then understandable.</figcaption></figure>
</section>
<section>
<h4>Dynamic Examples</h4>

<p>Some graphics may have interactions that either vary the contrast, or display the information as text when you mouseover/tap/focus each graphical object. In order for someone to discern the graphics exist at all, the unfocused default version must already have sufficiently contrasting colors or text. For the area that receives focus, information can then be made available dynamically as pop-up text, or be foregrounded dynamically by increasing the contrast.</p>

<!-- example from http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=pieChart&demo=default -->
<figure id="figure-pie-slice-hover-data">
<img alt="A pie chart with one slice highlighted and a box hovering next to it that shows the data and indicates the source in the key." src="img/dynamic-pie-chart.png" width="350">
<figcaption>A dynamic chart where the current 'slice' is hovered or focused, which activates the associated text display of the values and highlights the series</figcaption>
</figure>
<h4>Gradients</h4>

<p>Gradients can reduce the apparent contrast between areas, and make it more difficult to test. The general principles is to identify the graphical object(s) required for understanding, and take the central color of that area. If you remove the adjacent color which does not have sufficient contrast, can you still identify and understand the graphical object?</p>
<figure id="figure-blue-circle-i-versions">
<img src="img/contrast-gradient.png" alt="Two versions of a blue circle with an 'i' indicating information. The first example has a blue gradient background, the second is missing the upper half of the background which obscures the i." width="300">
<figcaption>Removing the background which does not have sufficient contrast highlights that the graphical object (the &quot;i&quot;) is not then understandable.</figcaption></figure>
</section>
<section>
<h4>Dynamic examples</h4>
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated

<p>Some graphics may have interactions that either vary the contrast, or display the information as text when you mouseover/tap/focus each graphical object. In order for someone to discern the graphics exist at all, the unfocused default version must already have sufficiently contrasting colors or text. For the area that receives focus, information can then be made available dynamically as pop-up text, or be foregrounded dynamically by increasing the contrast.</p>

<!-- example from http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=pieChart&demo=default -->
<figure id="figure-pie-slice-hover-data">
<img alt="A pie chart with one slice highlighted and a box hovering next to it that shows the data and indicates the source in the key." src="img/dynamic-pie-chart.png" width="350">
<figcaption>A dynamic chart where the current 'slice' is hovered or focused, which activates the associated text display of the values and highlights the series</figcaption>
</figure>
</section>
<section>
<h4>Infographics</h4>
<h4>Infographics</h4>

<p>Infographics can mean any graphic conveying data, such as a chart or diagram. On the web it is often used to indicate a large graphic with lots of statements, pictures, charts or other ways of conveying data. In the context of graphics contrast, each item within such an infographic should be treated as a set of graphical objects, regardless of whether it is in one file or separate files.</p>
<p>Infographics can mean any graphic conveying data, such as a chart or diagram. On the web it is often used to indicate a large graphic with lots of statements, pictures, charts or other ways of conveying data. In the context of graphics contrast, each item within such an infographic should be treated as a set of graphical objects, regardless of whether it is in one file or separate files.</p>

<p>Infographics often fail to meet several WCAG level AA criteria including:</p>
<p>Infographics often fail to meet several WCAG level AA criteria including:</p>

<ul>
<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 Contrast (Minimum)</a></li>
<li><a href="images-of-text" class="sc">1.4.5 Images of Text</a></li>
</ul>
<ul>
<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 Contrast (Minimum)</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 minimize 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 infographic is not relied upon for understanding.</p>
<p>An infographic can use text which meets the other criteria to minimize 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 infographic is not relied upon for understanding.</p>

</section>

Expand All @@ -720,11 +700,11 @@ <h4>Symbolic text characters</h4>
</section>

<section>
<h4>Essential Exception</h4>
<h4>Essential exception</h4>

<p>Graphical objects do not have to meet the contrast requirements when &quot;a particular presentation of graphics is essential to the information being conveyed&quot;. The Essential exception is intended to apply when there is no way of presenting the graphic with sufficient contrast without undermining the meaning. For example:</p>
<p>Graphical objects do not have to meet the contrast requirements when &quot;a particular presentation of graphics is essential to the information being conveyed&quot;. The <a>essential</a> exception is intended to apply when there is no way of presenting the graphic with sufficient contrast without undermining the meaning. For example:</p>
<ul>
<li><strong>Logos and logotypes</strong>: The brand logo of an organization or product is the representation of that organization, and is often
<li><strong>Logos and logotypes</strong>: The brand logo of an organization or product is the representation of that organization, and is generally
presented in the brand's specific colors; it is therefore exempt.</li>
<li><strong>Flags</strong>: Flags may not be identifiable if the colors are changed to have sufficient contrast.</li>
<li><strong>Sensory</strong>: There is no requirement to change pictures of real life scenes such as photos of people or scenery.</li>
Expand All @@ -736,10 +716,33 @@ <h4>Essential Exception</h4>
</ul>
</li>
</ul>
</section>

<p>However, this exemption can be problematic when these graphical objects also act as <a>user interface components</a> (or are the only visible content of a <a>user interface component</a>).
While normatively the exemption "carries over" to the <a>user interface component</a>, as a best practice authors are encouraged to make sure that there is an aspect of the user interface components that allows users to identify the components.</p>
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated

<p>In the case of logos, authors may choose a variant of the logo that has sufficient contrast, if variants are allowed by the
relevant corporate identity or brand guidelines. Otherwise, authors should consider providing an additional visual element with sufficient
contrast that helps identify the user interface component – such as additional text, or an outline or border around the component.</p>
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated

<p>Alternatively, authors may provide an equivalent <a>user interface component</a> which serves the same purpose
and meets contrast requirements.</p>

<p>Note that even when graphical objects acting as user interface components are exempted, the user interface components are <em>not</em> exempted from other aspects of this success criterion, such as the requirement to have sufficient contrast for the control's focus indicator.</p>

<h5>Essential exception and author choice</h5>

<p>If exempted graphical objects (such as logos) are presented with an insufficient contrast, but their low contrast presentation
was an author choice, then that particular low contrast presentation is <em>not</em> "essential", and the graphical object
is <em>not</em> exempt from the contrast requirements.</p>

<figure id="figure-low-contrast-logos-author-choice">
<img src="img/1.4.11-ntc-author-choice-logos.png" alt="A heading: 'ACME tool is trusted by the world's most innovative companies.'; below the heading, a series of nine company logos, all presented as very dark grey logos on the page's black background, with very low contrast; one logo is hovered with the mouse, and is displayed in white, with high contrast against the page background.">
<figcaption>An author chooses to present company logos with low contrast by default, until they are hovered; the fact that these are logos doesn't exempt this scenario from failing the requirements of this success criterion, as the initial low contrast presentation is not "essential" (since it's not mandated by corporate identity or brand guidelines)</figcaption>
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
</figure>
</section>

<section id="testing-principles">
<h3>Testing Principles</h3>
<h3>Testing principles</h3>
<p>A summary of the high-level process for finding and assessing non-text content on a web page:</p>
<ul>
<li>Identify each user-interface component (link, button, form control) on the page and:
Expand Down Expand Up @@ -771,14 +774,14 @@ <h2>Benefits</h2>
</section>

<section id="examples">
<h2>Graphical Object Examples</h2>
<h2>Graphical Object examples</h2>
<ul>
<li>Status icons on an application's dashboard (without associated text) have a 3:1 minimum contrast ratio.</li>
<li>A text input has a dark border around the white editable area.</li>
<li>A graph uses a light background and ensures that the colors for each line have a 3:1 contrast ratio against the background.</li>
</ul>
<section class="example">
<h3>Pie Charts</h3>
<h3>Pie charts</h3>
<p>Pie charts make a good case study for the graphical objects part of this success criterion, the following pie charts are intended to convey the proportion of market share each browser has. Please Note: The actual figures are made up, these are not actual market shares. </p>
<figure id="figure-failing-pie-chart">
<img src="img/graphics-contrast_pie-chart_fail.png" alt="Failing pie chart">
Expand Down Expand Up @@ -820,7 +823,7 @@ <h3>Infographics</h3>


<section id="resources">
<h2>Resources </h2>
<h2>Resources</h2>
<ul>
<li><a href="http://w3c.github.io/low-vision-a11y-tf/requirements.html">Accessibility Requirements for People with Low Vision</a>.</li>
<li><a href="https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2017May/0007.html">Smith Kettlewell Eye Research Institute</a> - &quot;If the text is better understood with the graphics, they should be equally visible as the text&quot;.</li>
Expand Down