Skip to content
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
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
37 changes: 28 additions & 9 deletions understanding/20/contrast-enhanced.html
Original file line number Diff line number Diff line change
Expand Up @@ -93,25 +93,23 @@ <h2>Intent of Contrast (Enhanced)</h2>
<p>This requirement applies to situations in which images of text were intended to be
understood as text. Incidental text, such as in photographs that happen to include
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
not included in the exception.

invisible or hard to discern to all viewers.
</p>

<p>Beyond logos and logotypes, text that has insufficient contrast due to corporate identity or
brand guidelines is <em>not</em> exempted from the requirements of this criterion.</p>

<p>In this provision there is an exception that reads "that are part of a picture that
contains significant other visual content,". This exception is intended to separate
pictures that have text in them from images of text that are done to replace text
in order to get a particular look.
in order to get a particular look.
</p>

<div class="note">

<p>Images of text do not scale as well as text because they tend to pixelate. It is also
harder to change foreground and background contrast and color combinations for images
of text, which is necessary for some users. See <a href="images-of-text">1.4.5 Images of Text</a>.

</p>

</div>
Expand All @@ -128,16 +126,37 @@ <h2>Intent of Contrast (Enhanced)</h2>
</p>

<div class="note">
<p>There are cases where text is heavily stylized – for instance, using a very ornate or distorted typeface – to the point where it acts more as a graphic, rather than text. Similarly, there are situations where text characters are used as symbols – used for their visual appearance, rather than <q>expressing something in human language</q>. These cases fall under the definition of <a>non-text content</a> and the requirements of <a href="non-text-contrast">1.4.11 Non-text Contrast</a>.</p>
Comment thread
adampage marked this conversation as resolved.
<figure id="figure-text-stylized">
{% include "./img/1.4.3-1.4.6-stylized-text.svg" %}
<figcaption>Text using a geometric typeface – arguably acting as an image/non-text content.</figcaption>
</figure>
<figure id="figure-text-symbols">
{% include "./img/1.4.3-1.4.6-buttons-text-symbols.svg" %}
<figcaption>Even though the two buttons use text characters — an uppercase <q>X</q>, often used for "Close" buttons, and a <q>&gt;</q> character, to act as a right-pointing arrow — they count as non-text characters/symbols. Their contrast ratio of just above 3:1 passes this success criterion.</figcaption>
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
</figure>
</div>

<section>
<h3>Logos</h3>
<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
by corporate identity or brand guidelines.</p>
<p>However, this can be problematic when
logos or logotypes 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
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
choosing a variant of the logo or logotype that has sufficient text 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>
</div>
<p>If logos normally have sufficient contrast, but are presented with an insufficient contrast as an author choice,
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
rather than because of corporate identity or brand guidelines, then that particular low contrast

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

just to play devil's advocate, how would we treat cases where the CI brand guidelines demonstrably say, "In the footer or our product pages, the corporate logo is to be rendered in a muted grey with a contrast of 2:1"?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

then that's set by the CI which is exempted (because poor web devs can't go against the wishes of their silly branding team)

presentation is <em>not</em> exempt from the contrast requirements.</p>
<figure id="figure-low-contrast-logos-author-choice">
<img src="img/1.4.3-1.4.6-logos-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>
</section>

<section>

Expand Down
35 changes: 28 additions & 7 deletions understanding/20/contrast-minimum.html
Original file line number Diff line number Diff line change
Expand Up @@ -92,11 +92,11 @@ <h2>Intent of Contrast (Minimum)</h2>
<p>This requirement applies to situations in which images of text were intended to be
understood as text. Incidental text, such as in photographs that happen to include
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 identity or brand guidelines beyond logo and logotype are
not included in the exception.
invisible or hard to discern to all viewers.
</p>

<p>Beyond logos and logotypes, text that has insufficient contrast due to corporate identity or
brand guidelines is <em>not</em> exempted from the requirements of this criterion.</p>

<p>In this provision there is an exception that reads "that are part of a picture that
contains significant other visual content,". This exception is intended to separate
Expand All @@ -123,21 +123,42 @@ <h2>Intent of Contrast (Minimum)</h2>
<a href="non-text-contrast">Success Criterion 1.4.11 Non-Text Contrast</a>.
</p>

<div class="note">
<p>There are cases where text is heavily stylized – for instance, using a very ornate or distorted typeface – to the point where it acts more as a graphic, rather than text. Similarly, there are situations where text characters are used as symbols – used for their visual appearance, rather than <q>expressing something in human language</q>. These cases fall under the definition of <a>non-text content</a> and the requirements of <a href="non-text-contrast">1.4.11 Non-text Contrast</a>.</p>
Comment thread
adampage marked this conversation as resolved.
<figure id="figure-text-stylized">
{% include "./img/1.4.3-1.4.6-stylized-text.svg" %}
<figcaption>Text using a geometric typeface – arguably acting as an image/non-text content.</figcaption>
</figure>
<figure id="figure-text-symbols">
{% include "./img/1.4.3-1.4.6-buttons-text-symbols.svg" %}
<figcaption>Even though the two buttons use text characters — an uppercase <q>X</q>, often used for "Close" buttons, and a <q>&gt;</q> character, to act as a right-pointing arrow — they count as non-text characters/symbols. Their contrast ratio of just above 3:1 passes this success criterion.</figcaption>
</figure>
</div>

<p>See also
<a href="contrast-enhanced">1.4.6 Contrast (Enhanced)</a>.
</p>

<div class="note">
<section>
<h3>Logos</h3>
<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
by corporate identity or brand guidelines.</p>
<p>However, this can be problematic when
logos or logotypes 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
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
choosing a variant of the logo or logotype that has sufficient text 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>
</div>
<p>If logos normally have sufficient contrast, but are presented with an insufficient contrast as an author choice,
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
rather than because of corporate identity or brand guidelines, then that particular low contrast
presentation is <em>not</em> exempt from the contrast requirements.</p>
<figure id="figure-low-contrast-logos-author-choice">
<img src="img/1.4.3-1.4.6-logos-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>
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
</figure>
</section>

<section>
<h3>Rationale for the Ratios Chosen</h3>
Expand Down
10 changes: 10 additions & 0 deletions understanding/20/img/1.4.3-1.4.6-buttons-text-symbols.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions understanding/20/img/1.4.3-1.4.6-stylized-text.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions understanding/21/img/1.4.11-stylized-text.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 9 additions & 5 deletions understanding/21/non-text-contrast.html
Original file line number Diff line number Diff line change
Expand Up @@ -663,9 +663,9 @@ <h4>Logos</h4>
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>
<p>If logos normally have sufficient contrast, but are presented with an insufficient contrast as an author choice,
Comment thread
patrickhlauke marked this conversation as resolved.
Outdated
rather than because of 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.">
Expand Down Expand Up @@ -711,8 +711,12 @@ <h4>Infographics</h4>
</section>

<section>
<h4>Symbolic text characters</h4>
<p>When text characters are used as symbols – used for their visual appearance, rather than <q>expressing something in human language</q> – they fall under the definition of <a>non-text content</a>.</p>
<h4>Symbolic or graphical text characters</h4>
<p>There are cases where text is heavily stylized – for instance, using a very ornate or distorted typeface – to the point where it acts more as a graphic, rather than text. Similarly, there are situations where text characters are used as symbols – used for their visual appearance, rather than <q>expressing something in human language</q>. These cases fall under the definition of <a>non-text content</a>.</p>
Comment thread
adampage marked this conversation as resolved.
<figure id="figure-text-stylized">
{% include "./img/1.4.11-stylized-text.svg" %}
<figcaption>Text using a geometric typeface – arguably acting as an image/non-text content.</figcaption>
</figure>
<figure id="figure-text-symbols">
{% include "./img/1.4.11-ntc-buttons-text-symbols.svg" %}
<figcaption>Even though the two buttons use text characters — an uppercase <q>X</q>, often used for "Close" buttons, and a <q>&gt;</q> character, to act as a right-pointing arrow — they count as non-text characters/symbols. Their contrast ratio of just above 3:1 passes this success criterion.</figcaption>
Expand Down