Skip to content

Amend "contrast ratio" term - move out non-term notes to understanding docs #4400

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

Open
patrickhlauke wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Amend "contrast ratio" term - move out non-term notes to understanding docs #4400

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5b9d281
Remove smoothing/anti-aliasing note
patrickhlauke May 17, 2025
c80725d
Remove two notes
patrickhlauke May 17, 2025
1bdcf62
Move note about border for text into understanding
patrickhlauke May 17, 2025
c071e54
Tweak 1.4.11 note about anti-aliasing
patrickhlauke May 17, 2025
0b7c816
Move note about border for text into enhanced understanding
patrickhlauke May 17, 2025
b4c36e4
Merge branch 'main' into patrickhlauke-redo-clean-pr1018
patrickhlauke Feb 15, 2026
051620a
Apply suggestion from @patrickhlauke
patrickhlauke Feb 15, 2026
d5d5554
Move note about "unusual presentation" to understandings
patrickhlauke Feb 15, 2026
e9bac5a
Merge branch 'main' into patrickhlauke-redo-clean-pr1018
patrickhlauke Mar 2, 2026
4fded98
Merge branch 'main' into patrickhlauke-redo-clean-pr1018
patrickhlauke Mar 11, 2026
55fdae9
Merge branch 'main' into patrickhlauke-redo-clean-pr1018
patrickhlauke Mar 23, 2026
a1d159a
Merge branch 'main' into patrickhlauke-redo-clean-pr1018
patrickhlauke Apr 5, 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
23 changes: 0 additions & 23 deletions guidelines/terms/20/contrast-ratio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,29 +15,6 @@

<p class="note">Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).</p>

<p class="note">Because authors do not have control over user settings as to how text is rendered
(for example font smoothing or anti-aliasing), the contrast ratio for text can be
evaluated with anti-aliasing turned off.
</p>

<p class="note">For the purpose of Success Criteria 1.4.3 and 1.4.6, contrast is measured with respect
to the specified background over which the text is rendered in normal usage. If no
background color is specified, then white is assumed.
</p>

<p class="note">Background color is the specified color of content over which the text is to be rendered
in normal usage. It is a failure if no background color is specified when the text
color is specified, because the user's default background color is unknown and cannot
be evaluated for sufficient contrast. For the same reason, it is a failure if no text
color is specified when a background color is specified.
</p>

<p class="note">When there is a border around the letter, the border can add contrast and would be
used in calculating the contrast between the letter and its background. A narrow border
around the letter would be used as the letter. A wide border around the letter that
fills in the inner details of the letters acts as a halo and would be considered background.
</p>

<p class="note">WCAG conformance should be evaluated for color pairs specified in the content that
an author would expect to appear adjacent in typical presentation. Authors need not
consider unusual presentations, such as color changes made by the user agent, except
Expand Down
122 changes: 49 additions & 73 deletions understanding/20/contrast-enhanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,19 @@
</head>
<body>
<h1>Understanding Contrast (Enhanced)</h1>

<section id="brief">
<h2>In brief</h2>
<dl>
<dt>Goal</dt><dd>Text can be seen by people who need strong contrast.</dd>
<dt>What to do</dt><dd>Strongly contrast text against its background.</dd>
<dt>Why it's important</dt><dd>Some people cannot read text with minimum contrast.</dd>
</dl>

</section>

<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 @@ -30,30 +29,30 @@ <h2>Intent of Contrast (Enhanced)</h2>
that color is not a key factor so that people who have a color vision deficit will
also have adequate contrast between the text and the background.
</p>

<p>Text that is decorative and conveys no information is excluded. For example, if random
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.
criterion.
</p>

<p>Text that is larger and has wider character strokes is easier to read at lower contrast.
The contrast requirement for larger text is therefore lower. This allows authors to
use a wider range of color choices for large text, which is helpful for design of
pages, particularly titles. 18 point text or 14 point bold text is judged to be large
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
Print under
<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>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
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>.
Expand All @@ -65,7 +64,7 @@ <h2>Intent of Contrast (Enhanced)</h2>
resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the
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.
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
Expand All @@ -84,60 +83,61 @@ <h2>Intent of Contrast (Enhanced)</h2>
of this success criterion.
</p>
</div>

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

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

<p>This success criterion 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>When there is a border around the letter, the border can add contrast and should be
used in calculating the contrast between the letter and its background. A narrow border
around the letter would be used as the letter. A wide border around the letter that
fills in the inner details of the letters acts as a halo and would be considered background.
</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>.
<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 typically
accompanies aging.
</p>

<p>The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable
contrast for normal observers, in the ANSI standard, and b) the empirical finding
that in the population, visual acuity of 20/40 is associated with a contrast sensitivity
Expand All @@ -146,7 +146,7 @@ <h3>Rationale for the Ratios Chosen</h3>
the user with 20/80 visual acuity would require contrast of about 7:1. This ratio is used in
this success criterion.
</p>

<p>Hues are perceived differently by users with color vision deficiencies (both congenital
and acquired) resulting in different colors and relative luminance contrasts than
for normally sighted users. Because of this, effective contrast and readability are
Expand All @@ -159,29 +159,27 @@ <h3>Rationale for the Ratios Chosen</h3>
regard to specific color deficiency, except for the use of predominantly long wavelength
colors against darker colors (generally appearing black) for those who have protanopia.
(We provide an advisory technique on avoiding red on black for that reason). For more
information see [[ARDITI-KNOBLAUCH-1994]]
[[ARDITI-KNOBLAUCH-1996]]
information see [[ARDITI-KNOBLAUCH-1994]]
[[ARDITI-KNOBLAUCH-1996]]
[[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>

</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
loss in contrast sensitivity usually experienced by users with vision loss equivalent
to approximately 20/80 vision. People with more than this degree of vision loss usually
Expand All @@ -191,46 +189,43 @@ <h3>Rationale for the Ratios Chosen</h3>
experienced by users with low vision who do not use assistive technology and provides
contrast enhancement for color deficiency as well.
</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>
</div>

</section>

<section>

<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 (<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 <code>.05</code> value used is based on Typical Viewing
Flare from [[IEC-4WD]].
</p>

<p>This success criterion and its definitions use the terms "contrast ratio" and "relative
luminance" rather than "luminance" to reflect the fact that web content does not emit
light itself. The contrast ratio gives a measure of the relative luminance that would
result when displayed. (Because it is a ratio, it is dimensionless.)
</p>

<div class="note">
<p>
Refer to
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
<p>See also
<a href="focus-visible">2.4.7: Focus Visible</a> for techniques for indicating keyboard focus.
</p>
</div>

</section>

<section id="inactive-controls">
<h3>Inactive User Interface Components</h3>

Expand All @@ -240,76 +235,57 @@ <h3>Inactive User Interface Components</h3>
<figcaption> An inactive button using default browser styles</figcaption>
</figure>
</section>

</section>
<section id="benefits">
<h2>Benefits of Contrast (Enhanced)</h2>



<ul>

<li>People with low vision often have difficulty reading text that does not contrast with
its background. This can be exacerbated if the person has a color vision deficiency
that lowers the contrast even further. Providing a minimum luminance contrast ratio
between the text and its background can make the text more readable even if the person
does not see the full range of colors. It also works for the rare individuals who
see no color.
see no color.
</li>

</ul>

</section>

<section id="examples">
<h2>Examples of Contrast (Enhanced)</h2>


</section>

<section id="resources">
<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>

</section>

{% # Data for associated techniques is defined in understanding/understanding.11tydata.js %}
Expand Down
6 changes: 6 additions & 0 deletions understanding/20/contrast-minimum.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,12 @@ <h2>Intent of Contrast (Minimum)</h2>
needs to provide sufficient contrast.
</p>

<p>When there is a border around the letter, the border can add contrast and should be
used in calculating the contrast between the letter and its background. A narrow border
around the letter would be used as the letter. A wide border around the letter that
fills in the inner details of the letters acts as a halo and would be considered background.
</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>.
Expand Down
2 changes: 1 addition & 1 deletion understanding/21/non-text-contrast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2>Intent</h2>
</div>

<div class="note">
<p>Because authors do not have control over user settings for font smoothing and anti-aliasing, when evaluating this
<p>Because authors do not have control over user settings for anti-aliasing, when evaluating this
Success Criterion, refer to the colors obtained from the user agent, or the underlying
markup and stylesheets, rather than the non-text elements as presented on screen.</p>
<p>Due to anti-aliasing, particularly thin lines and shapes of non-text elements may be rendered by user agents with
Expand Down
Loading