Skip to content
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

Changes/corrections to 1.4.3 and 1.4.6 understanding #3020

Merged
merged 25 commits into from
May 16, 2023
Merged

Changes/corrections to 1.4.3 and 1.4.6 understanding #3020

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
1cabaf8
Remove pointlessly duplicated content
patrickhlauke Feb 12, 2023
c9b5670
Replace "fancy" with "unusual", qualify where the note is
patrickhlauke Feb 12, 2023
1edaed5
Use `<code>`
patrickhlauke Feb 12, 2023
3f69582
Reorder content of Rationale to match the enhanced understanding
patrickhlauke Feb 12, 2023
864acb5
Replace incorrect plural "Success Criteria" in note with simpler and …
patrickhlauke Feb 12, 2023
5477292
Consisteny captialisation of "Success Criterion"
patrickhlauke Feb 12, 2023
9089e54
Use lowercase and no space `ppi` rather than `PPI` and use `<code>`
patrickhlauke Feb 12, 2023
2c8794e
Correct and tweak cross-reference to 1.4.5 Images of Text
patrickhlauke Feb 12, 2023
906c082
Use correct link format for SC cross-referencing
patrickhlauke Feb 12, 2023
75a4414
Missed out a `<code>`, reformatting whitespace/line lengths
patrickhlauke Feb 12, 2023
d1ef550
Add new note about thin/unusual fonts that nominally pass but in prac…
patrickhlauke Feb 12, 2023
2fd9647
Some more `<code>` uses
patrickhlauke Feb 12, 2023
663fd42
Remove incorrect (?) / confusing statement about not specifying text …
patrickhlauke Feb 12, 2023
c2cbfdf
Port all changes to 1.4.6 Contrast (Enhanced) understanding as well
patrickhlauke Feb 12, 2023
7a954d2
Tweak thin/unusual font note (remove the "we recommend", emphasise th…
patrickhlauke Feb 14, 2023
6653aac
Update contrast-enhanced.html
mbgower Feb 15, 2023
6fdf292
Update contrast-enhanced.html
mbgower Feb 15, 2023
a605651
Update contrast-minimum.html
mbgower Feb 15, 2023
03427af
Expand antialiasing note to clarify how to evaluate
patrickhlauke Feb 17, 2023
d33c024
Merge branch 'patrickhlauke-understanding-text-contrast' of https://g…
patrickhlauke Feb 17, 2023
2fad324
Typo
patrickhlauke Feb 19, 2023
31316b3
Tweak cognitive note wording
patrickhlauke Feb 19, 2023
5566155
Update understanding/20/contrast-enhanced.html
alastc May 16, 2023
7d552bb
Update understanding/20/contrast-enhanced.html
alastc May 16, 2023
df2ead2
Meeting update
alastc May 16, 2023
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
157 changes: 72 additions & 85 deletions understanding/20/contrast-enhanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@
<body>
<h1>Understanding Contrast (Enhanced)</h1>


<section id="intent">
<h2>Intent of Contrast (Enhanced)</h2>


<p>The intent of this Success Criterion is to provide enough contrast between text and
its background so that it can be read by people with moderately low vision (who do
not use contrast-enhancing assistive technology). For people without color deficiencies,
Expand All @@ -27,7 +25,6 @@ <h2>Intent of Contrast (Enhanced)</h2>
words are used to create a background and the words could be rearranged or substituted
without changing meaning, then it would be decorative and would not need to meet this
criterion.

</p>

<p>Text that is larger and has wider character strokes is easier to read at lower contrast.
Expand All @@ -37,53 +34,56 @@ <h2>Intent of Contrast (Enhanced)</h2>
enough to require a lower contrast ratio. (See The American Printing House for the
Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large
Print under
<a href="#visual-audio-contrast7-resources-head">Resources</a>). "18 point" and "bold" can both have different meanings in different fonts but,
except for very thin or unusual fonts, they should be sufficient. Since there are
so many different fonts, the general measures are used and a note regarding fancy
or thin fonts is included.
<a href="#resources">Resources</a>). "18 point" and "bold" can both have different meanings in
different fonts but, except for very thin or unusual fonts, they should be sufficient. Since there
are so many different fonts, the general measures are used and a note regarding thin or unusual
fonts is included in the definition for <a>large-scale</a> text.
</p>

<div class="note">

<p>The point size should be obtained from the user agent, or calculated based on font
metrics as the user agent does when evaluating this success criterion. Point sizes
are based on the CSS pt size as defined in
<a href="https://www.w3.org/TR/css-values-3/#reference-pixel">CSS3 Values</a>. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt
and 18pt are equivalent to approximately 18.5px and 24px.
</p>

<p>When fonts have anti-aliasing applied to make them look smoother, they can lose darkness
or lightness. Thus, the actual contrast can be reduced. Thicker stem widths will
reduce this effect (thin fonts could have the full stem lightened rather than just
the ends). Using larger fonts and testing for legibility in user agents with font
smoothing turned on is recommended.

<p>When evaluating this Success Criterion, the font size in points should be obtained
from the user agent or calculated on font metrics in the way that user agents do.
Point sizes are based on the CSS <code>pt</code> size as defined in
<a href="https://www.w3.org/TR/css-values-3/#reference-pixel">CSS3 Values</a>. The ratio between
sizes in points and CSS pixels is <code>1pt = 1.333px</code>, therefore <code>14pt</code>
and <code>18pt</code> are equivalent to approximately <code>18.5px</code> and <code>24px</code>.
</p>

<p>Because different image editing applications default to different pixel densities
(ex. 72 PPI or 96 PPI), specifying point sizes for fonts from within an image editing
application can be unreliable when it comes to presenting text at a specific size.
(e.g., <code>72ppi</code> or <code>96ppi</code>), specifying point sizes for fonts from within an
image editing application can be unreliable when it comes to presenting text at a specific size.
When creating images of large-scale text, authors should ensure that the text in the
resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the
default size for body text as rendered by the browser.
default size for body text. For example, for a <code>72ppi</code> image, an author would need
to use approximately 19pt and 24pt font sizes in order to successfully present images
of large-scale text to a user.
</p>
<p>The 7:1 and 4.5:1 contrast ratios referenced in this Success Criterion are intended to be
treated as threshold values. When comparing the computed contrast ratio to the Success Criterion
ratio, the computed values should not be rounded (e.g. 4.499:1 would not meet the 4.5:1 threshold).</p>

ratio, the computed values should not be rounded (e.g., 4.499:1 would not meet the 4.5:1 threshold).</p>
</div>

<div class="note">
<p>Because authors do not have control over user settings for font smoothing/anti-aliasing, when evaluating this
Success Criterion, refer to the foreground and background colors obtained from the user agent, or the underlying
markup and stylesheets, rather than the text as presented on screen.</p>
<p>Due to anti-aliasing, particularly thin or unusual fonts may be rendered by user agents with a much fainter
color than the actual text color defined in the underlying CSS. This can lead to situations where text has
a contrast ratio that nominally passes the Success Criterion, but has a much lower contrast in practice.
In these cases, best practice would be for authors to choose a font with stronger/thicker lines,
or to aim for a foreground/background color combination that exceeds the normative requirements
of this Success Criterion.
</p>
</div>

<p>The previously-mentioned contrast requirements for text also apply to
images of text (text that has been rendered into pixels and then stored in an image
format) as stated in Success Criterion 1.4.5


<p>The contrast requirements for text also apply to images of text
(text that has been rendered into pixels and then stored in an image format) - see
<a href="images-of-text">Success Criterion 1.4.5: Images of Text</a>.
</p>

<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 users. Stylized text, such as in corporate logos, should be treated
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.
Expand All @@ -96,15 +96,32 @@ <h2>Intent of Contrast (Enhanced)</h2>
in order to get a particular look.
</p>

<p>Although this Success Criterion only applies to text, similar issues occur for content presented in charts, graphs, diagrams, and other non-text-based information which is covered by
<a href="../21/non-text-contrast.html">Success Criterion 1.4.11 Non-Text Contrast</a>.
<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. Therefore, we suggest using text wherever
alastc marked this conversation as resolved.
Show resolved Hide resolved
possible, and when not, consider supplying an image of higher resolution.
alastc marked this conversation as resolved.
Show resolved Hide resolved

</p>

</div>

<p>The minimum contrast Success Criterion (1.4.3) applies to text in the page, including
placeholder text and text that is shown when a pointer is hovering over an object
or when an object has keyboard focus. If any of these are used in a page, the text
needs to provide sufficient contrast.
</p>

<p>Although this Success Criterion only applies to text, similar issues occur for content presented
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>

<section>

<h3>Rationale for the Ratios Chosen</h3>


<p>A contrast ratio of 3:1 is the minimum level recommended by [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] for standard text and vision. The 4.5:1 ratio is used in Success Criterion 1.4.3
to account for the loss in contrast that results from moderately low visual acuity,
congenital or acquired color deficiencies, or the loss of contrast sensitivity that
Expand Down Expand Up @@ -136,11 +153,22 @@ <h3>Rationale for the Ratios Chosen</h3>
[[ARDITI]].
</p>

<div class="note">

<p>Some people with cognitive disabilities require color combinations or hues that have
low contrast, and therefore we allow and encourage authors to provide mechanisms to
adjust the foreground and background colors of the content. Some of the combinations
that could be chosen may have contrast levels that will be lower than those
specified here. This is not a violation of this Success Criterion, provided
there is a mechanism that will return to the required values set out here.
</p>

</div>

<p>The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the
loss in contrast sensitivity usually experienced by users with vision loss equivalent
to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is
commonly reported as typical visual acuity of elders at roughly age 80. [[GITTINGS-FOZARD]]

</p>

<p>The contrast ratio of 7:1 was chosen for level AAA because it compensated for the
Expand All @@ -154,9 +182,8 @@ <h3>Rationale for the Ratios Chosen</h3>
</p>

<div class="note">

<p>Calculations in [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] are for body text. A relaxed contrast ratio is provided for text that is much larger.</p>

<p>Calculations in [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] are for body text. A relaxed contrast
ratio is provided for text that is much larger.</p>
</div>

</section>
Expand All @@ -167,10 +194,10 @@ <h3>Notes on formula</h3>

<p>Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [[IEC-4WD]].</p>

<p>The formula (L1/L2) for contrast is based on [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards.</p>
<p>The formula (<code>L1/L2</code>) for contrast is based on [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards.</p>

<p>The ANSI/HFS 100-1988 standard calls for the contribution from ambient light to be
included in the calculation of L1 and L2. The .05 value used is based on Typical Viewing
included in the calculation of L1 and L2. The <code>.05</code> value used is based on Typical Viewing
Flare from [[IEC-4WD]].
</p>

Expand All @@ -181,18 +208,14 @@ <h3>Notes on formula</h3>
</p>

<div class="note">

<p>
Refer to
<a href="#visual-audio-contrast7-resources-head">related resources</a> for a list of tools that utilize the contrast ratio to analyze the contrast of Web
content.

Refer to
<a href="#resources">related resources</a> for a list of tools that utilize the contrast ratio
to analyze the contrast of Web content.
</p>

<p>See also
<a href="focus-visible">2.4.7: Focus Visible</a> for techniques for indicating keyboard focus.
</p>

</div>

</section>
Expand Down Expand Up @@ -230,57 +253,39 @@ <h2>Resources for Contrast (Enhanced)</h2>
<ul>

<li>

<a href="https://www.tpgi.com/color-contrast-checker/">Colour Contrast Analyser application</a>

</li>

<li>

<a href="https://juicystudio.com/services/luminositycontrastratio.php">Luminosity Colour Contrast Ratio Analyser</a>

</li>

<li>

<a href="https://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a>

</li>

<li>

<a href="https://www.msfw.com/Services/ContrastRatioCalculator">Contrast Ratio Calculator</a>

</li>

<li>

<a href="https://color.adobe.com/create/color-contrast-analyzer">Adobe Color - Color Contrast Analyzer Tool</a>

</li>

<li>

<a href="https://www.w3.org/Graphics/atypical-color-response">Atypical colour response</a>

</li>

<li>

<a href="http://www.colorsontheweb.com/colorcontrast.asp">Colors On the Web Color Contrast Analyzer</a>

</li>

<li>

<a href="https://www.iansyst.co.uk/fonts/">Reading with Dyslexia - Fonts that can help alleviate visual stress.</a>

</li>

<li>

<a href="https://blog.dyslexia.com/good-fonts-for-dyslexia-an-experimental-study/">Good Fonts for Dyslexia - An Experimental Study</a>

</li>

</ul>
Expand All @@ -302,27 +307,21 @@ <h4>Situation A: text is less than 18 point if not bold and less than 14 point i
<ol>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G17" class="general">Ensuring that contrast of at least 10:1 exists between text and background behind
the text
</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
features that change those defaults
</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
a presentation that uses sufficient contrast
</a>

</li>

</ol>
Expand All @@ -336,27 +335,21 @@ <h4>Situation B: text is as least 18 point if not bold and at least 14 point if
<ol>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G18" class="general">Ensuring that a contrast ratio of at least 4.5:1 exists between text and background
behind the text
</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">Not specifying background color, not specifying text color, and not using technology
features that change those defaults
</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G174" class="general">Providing a control with a sufficient contrast ratio that allows users to switch to
a presentation that uses sufficient contrast
</a>

</li>

</ol>
Expand All @@ -372,9 +365,7 @@ <h3>Additional Techniques (Advisory) for Contrast (Enhanced)</h3>
<ul>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G156" class="general">G156</a>

</li>

</ul>
Expand All @@ -388,19 +379,15 @@ <h3>Failures for Contrast (Enhanced)</h3>
<ul>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F24" class="failure">Failure of Success Criterion 1.4.3 due to specifying foreground colors without specifying
background colors or vice versa
</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F83" class="failure">Failure of 1.4.3 and 1.4.6 due to using background images that do not provide sufficient
contrast with foreground text (or images of text)
</a>

</li>

</ul>
Expand Down
Loading