Skip to content

Add note about logo/logotypes contrast to 1.4.3, 1.4.6, and 1.4.11 understanding #4402

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.

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

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 13 additions & 1 deletion understanding/20/contrast-enhanced.html
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,19 @@ <h2>Intent of Contrast (Enhanced)</h2>
in charts, graphs, diagrams, and other non-text-based information, which is covered by
<a href="non-text-contrast">Success Criterion 1.4.11 Non-Text Contrast</a>.
</p>


<div class="note">
<p>Text used as part of a logo or logotype is exempted from contrast requirements,
under the assumption that logos/logotypes must comply with stricter color choices mandated
by corporate identity or brand guidelines. However, this can be problematic when
the logo or logotype also acts as a <a>user interface components</a> (such as a link or
other interactive control). In these cases, as a best practice, choose a variant of
the logo or logotype that has sufficient text contrast, if allowed by the
corporate identity or brand guidelines. Alternatively, consider providing an equivalent
<a>user interface components</a> which serves the same purpose and does meet
the contrast requirements.</p>
</div>

<section>

<h3>Rationale for the Ratios Chosen</h3>
Expand Down
16 changes: 14 additions & 2 deletions understanding/20/contrast-minimum.html
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ <h2>Intent of Contrast (Minimum)</h2>
a street sign, are not included. Nor is text that for some reason is designed to be
invisible to all viewers. Stylized text, such as in corporate logos, should be treated
in terms of its function on the page, which may or may not warrant including the content
in the text alternative. Corporate visual guidelines beyond logo and logotype are
in the text alternative. Corporate identity or brand guidelines beyond logo and logotype are
not included in the exception.

</p>
Expand Down Expand Up @@ -130,7 +130,19 @@ <h2>Intent of Contrast (Minimum)</h2>
<p>See also
<a href="contrast-enhanced">1.4.6: Contrast (Enhanced)</a>.
</p>


<div class="note">
<p>Text used as part of a logo or logotype is exempted from contrast requirements,
under the assumption that logos/logotypes must comply with stricter color choices mandated
by corporate identity or brand guidelines. However, this can be problematic when
the logo or logotype also acts as a <a>user interface components</a> (such as a link or
other interactive control). In these cases, as a best practice, choose a variant of
the logo or logotype that has sufficient text contrast, if allowed by the
corporate identity or brand guidelines. Alternatively, consider providing an equivalent
<a>user interface components</a> which serves the same purpose and does meet
the contrast requirements.</p>
</div>

<section>

<h3>Rationale for the Ratios Chosen</h3>
Expand Down
21 changes: 20 additions & 1 deletion understanding/21/non-text-contrast.html
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,23 @@ <h4>Required for Understanding</h4>
<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>

<div class="note">
<p>Logos are exempted from contrast requirements when they are purely used as
<em>graphical objects</em>, under the assumption that they must comply with stricter color choices mandated
by corporate identity or brand guidelines. When they also act as <a>user interface components</a>
(such as links or other interactive controls), authors must nonetheless make sure that there is an aspect of
the user interface component itself that allows users to identify the component and its state.
If possible, and if allowed by the relevant corporate identity or brand guidelines, authors should choose a
variant of the logo that has sufficient contrast. Alternatively, authors should provide an additional
visual element with sufficient contrast that helps identify the user interface component or its state – such as
additional text, or an outline or border around the component. Lastly, consider providing an equivalent
<a>user interface components</a> which serves the same purpose and does meet the 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>
</div>

</section>
<section>
<h4>Gradients</h4>
Expand Down Expand Up @@ -448,7 +465,9 @@ <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>
<ul>
<li><strong>Logotypes and flags</strong>: The brand logo of an organization or product is the representation of that organization and therefore exempt. Flags may not be identifiable if the colors are changed to have sufficient contrast.</li>
<li><strong>Logotypes</strong>: The brand logo of an organization or product is the representation of that organization, and is often
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>
<li><strong>Representing other things</strong>: If you cannot represent the graphic in any other way, it is essential. Examples include:
<ul>
Expand Down