Skip to content

Commit

Permalink
Update Visual Contrast How-Tos
Browse files Browse the repository at this point in the history 
Updates and corrections to align with current APCA guidelines.
  • Loading branch information
@Myndex
Myndex committed May 18, 2022
1 parent 3d96351 commit c2f03db
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 28 deletions.
19 changes: 14 additions & 5 deletions how-tos/visual-contrast-of-text/design.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ <h1>Design</h1>
<h2>Design responsibilities</h2>
<ul>
<li>Smaller, lighter weight fonts require higher contrast colors.</li>
<li>The CSS property <q>Font-Smooth:</q> should be set to auto (default), and <em>not <q>antialiased</q>.</em>
<li>The CSS property <q>-webkit-font-smoothing:</q> should be set to auto (default), and <em>not <q>antialiased</q>.</em>
<ul>
<li>This is especially true for normal weight fonts less than 24px, and light fonts less than 48px. </li>
<li>The <q>antialiased</q> mode in font smoothing is actually a blending that reduces contrast by 30% or more.</li>
<li>If the faux <q>antialiasing</q> mode is to be used, take note that normal and thin fonts will need to have their CSS colors set to a 30% higher APCA contrast.</li>
<li>The <q>antialiased</q> mode in font smoothing is actually a blending that reduces perceived lightness contrast by Lc 30 or more.</li>
<li>If the faux <q>antialiasing</q> mode is to be used, take note that normal and thin fonts may need to have their CSS colors adjusted to increase contrast.</li>
</ul></li>
<li>Certain color combinations can be very problematic on a computer monitor or mobile device. <ul>
<li>Never rely on hue alone for differentiating details. Adequate luminance contrast is required.</li>
Expand All @@ -31,7 +31,12 @@ <h2>Design responsibilities</h2>
</li>
<li>For many people, reducing or avoiding details in the blue channel can prevent chromatic aberration or shimmer.</li>
</ul></li>
<li>Pure red (#F00) text on a pure black (#000) background is the bare minimum contrast for a 16px 400 weight (normal) standard font.</li>
<li>Pure red (#F00) text on a pure black (#000) background is not useful for readability. While standard vision may see it if the font is large enough, some types of color insensitive vision will not.</li>
<ul>
<li>In the example below: Left, pure red (#F00) on black (#000). Right, a simulation of how a person with protanopia sees it.<br />
<div style="display: inline-block; margin: 0.25em 0; padding: 0.25em; color: #F00; background: #000; font-size: 32px; font-weight: bold; border-radius: 0.5em;">STANDARD VISION</div>
<div style="display: inline-block; margin: 0.25em 0; padding: 0.25em; color: #5d5d10; background: #000; font-size: 32px; font-weight: bold; border-radius: 0.5em;">PROTANOPIC VISION </div>
</li>
</ul></li>
<li>Different font designs affect perceived contrast and readability. <ul>
<li>While different font families use weights such as 400 or 700, those are not standardized in terms of contrast.</li>
Expand All @@ -41,7 +46,11 @@ <h2>Design responsibilities</h2>
</ul></li>
<li>When placing text in a container with a significantly different background color than the overall page, it is typically necessary to add padding around the text, so the eye can <q>locally adapt</q> to the text and container background.</li>
<li>Line spacing and letter spacing (leading and tracking), line length, and effects such as transparency and shadow all have an effect on perceived contrast and readability.</li>
<li>Generally speaking, blocks or columns of text should be set to the highest contrast colors, especially for thin fonts. Contrast can be reduced for big bold headlines to reduce glare. </li>
<ul>
<li>Increasing letter spacing and line spacing can reduce crowding and improve readability contrast.</li>
<li>Readability is improved by limiting the number of characters per line of text to no more than 80 characters, with an ideal line length being between 45 and 65 characters.</li>
<li>Generally speaking, blocks or columns of text should be set to the highest contrast colors, especially for thin fonts.</li>
<li>Contrast can be reduced for big bold headlines to reduce glare. </li>
</ul>
</section>
<section id="tips">
Expand Down
6 changes: 3 additions & 3 deletions how-tos/visual-contrast-of-text/develop.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ <h2>Technical tips</h2>
<li>The sRGB colorspace is the standard for web content, and the standard for accessibility. This should be the default colorspace, and any other colorspaces should be a selectable user option.</li>
<li>The designer's workspace is important. Variations in monitor calibration and ambient lighting will affect the final output, often in unexpected ways.
<ul><li>Use a hardware calibrator such as an XRite Display, and use software to calibrate the monitor to the sRGB standard.</li>
<li>The ambient room lighting should be about 20% of the brightness of the monitor at peak white. For a monitor with a peak white of 160 cd/m<sup>2</sup>, the ambient should be around 64 lux.</li>
<li>The ambient room lighting should be about 20% of the brightness of the monitor at peak white. For a monitor with a peak white of 160 cd/m<sup>2</sup>, the ambient should be around 200 lux.</li>
<li>Put another way, setting the full screen to sRGB mid grey color #808080, the monitor should appear around the same brightness as the <q>overall</q> room lighting.</li>
<li>The color temperature of the room lighting should be 5500K, ideally with a CRI over 90.</li>
<li>Don't paint the walls 18% grey. Instead, paint the walls pure white and set the lighting level so the white walls approximate the monitor at #808080 grey.</li>
<li>And finally, avoid bright colors in the field of vision when looking at a monitor. Nearby colors can affect how you perceive the monitor content.</li>
<li>And finally, avoid bright colors within the field of vision when looking at the monitor, as earby colors can affect how you perceive the monitor content.</li>
</ul></li></ol>
</section>
</main>
</body>
</html>
</html>
16 changes: 8 additions & 8 deletions how-tos/visual-contrast-of-text/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,21 @@ <h3>Black background</h3>
<section class="example">
<h3>White background</h3>
<div class="testBoxWhite">
<p>#0F0 <span style="color: #0F0;">This is Maximum Green on White. Difficult to Read. ☆ ★ ◯ ♥ ☎</span></p>
<p>#080 <span style="color: #080;">Keep green less than #080 for readability against white. ☆ ★ ◯ ♥ ☎</span></p>
<p>#E00 <span style="color: #E00; ">This is Pure Red on White, approximately 80% contrast. Since some color vision problems cause the red to be ~35% darker (on sRGB) pure red can be okay as the darker color against white. ☆ ★ ◯ ♥ ☎</span></p>
<p>#00F <span style="color: #00F;">Full Blue on White is 110% contrast. Since the blue is the same value in the white background, there is no detail in the blue channel at all. This is advantageous as it can reduce glare and chromatic aberration. ☆ ★ ◯ ♥ ☎</span></p>
<p>#0F0 <span style="color: #0F0;">This is Maximum Green on White. Difficult to Read. ☆ ★ </span></p>
<p>#080 <span style="color: #080;">Keep green less than #080 for readability against white. ☆ ★</span></p>
<p>#E00 <span style="color: #E00; ">This is Pure Red on White, approximately 80% contrast. Since some color vision problems cause the red to be ~35% darker (on sRGB) pure red can be okay as the darker color against white. ☆ ★</span></p>
<p>#00F <span style="color: #00F;">Full Blue on White is 110% contrast. Since the blue is the same value in the white background, there is no detail in the blue channel at all. This is advantageous as it can reduce glare and chromatic aberration. ☆ ★</span></p>
</div>
</section>
<section class="example">
<h3>Yellow background</h3>
<div class="testBoxBeige thinFont" style="">
<p><span style="color: #504;">This is Blue #009 very thin text on a #FE9 BG (120%). ☆ ★ ◯</span></p>
<p><span style="color: #504;">This is #504 dark purple thin text (120% contrast on #FE9). ☆ ★ ◯</span></p>
<p><span style="color: #79F;">#79F (50% contrast on #FE9) is too light for small thin text, ☆ ★ ◯</span></p>
<p><span style="color: #504;">This is Blue #009 very thin text on a #FE9 BG (120%). ☆ ★</span></p>
<p><span style="color: #504;">This is #504 dark purple thin text (120% contrast on #FE9). ☆ ★</span></p>
<p><span style="color: #79F;">#79F (50% contrast on #FE9) is too light for small thin text, ☆ ★</span></p>
<p><span style="color: #79F; font-size: 32px; font-weight: 700;">but #79F is okay for large bold text.</span></p>
</div>
</section>
</main>
</body>
</html>
</html>
20 changes: 12 additions & 8 deletions how-tos/visual-contrast-of-text/get-started.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ <h1>Get Started</h1>
<main>
<section id="summary">
<h2>Summary</h2>
<p>Sighted users need good contrast between foreground and background to read easily. Users with low vision need strong contrast between foreground and background to perceive content. </p>
<p>Sighted users need good visual contrast between foreground and background to read easily. Users with low vision need strong contrast between foreground and background to perceive content. </p>
</section>
<section id="reason">
<h2>Why</h2>
<p>Many users need a high enough level of visual contrast to distinguish elements from each other and foreground from background. By visual contrast we mean the total perceived color and lightness difference between the text and the background. As text gets smaller and/or thinner, visual contrast may need to be increased to achieve the same readability.</p>
<p>All sighted users need a high enough level of visual contrast to distinguish elements from each other, and foreground from background. By visual contrast we mean the total perceived lightness/darkness difference between the text and the background. As text gets smaller and/or thinner, visual contrast may need to be increased to achieve the same readability.</p>
<h4>EXAMPLE: you can increase perceived contrast by:</h4>
<ul>
<li>Make the darkest of two colors darker</li>
Expand All @@ -23,23 +23,27 @@ <h4>EXAMPLE: you can increase perceived contrast by:</h4>
<li>Increase the font size (make it larger, but avoid letter spacing that is too tight)</li>
<li>Use a different font design with intrinsically better contrast relative to the same x-size.</li>
</ul>
<p>The use of color (hue/saturation) can help communication, but is does not replace the need for luminance (lightness) contrast. When using color it should align with the purpose of the content. Too many colors with no purpose can cause confusion. Using hue and saturation to help group related content can be useful. Certain color pairs should be avoided.</p>
<p>The use of color (hue/saturation) can help communication, but is does not replace the need for luminance (lightness) contrast, which is what is required for readability. When using color it should align with the purpose of the content. Too many colors with no purpose can cause confusion. Using hue and saturation to help group related content can be useful. Certain color pairs should be avoided.</p>
<p>Some users find too much contrast in large/bold elements may be distracting or overwhelming due to glare or neurological issues. </p>
<p>This guidance focuses on the needs of all users as well as users with low vision or visual/neurological impairments, and including <a href="https://www.myndex.com/CVD/">CVD</a> (Color Vision Deficiency, commonly known as color blindness). </p>
<p>This guidance focuses on the needs of all users as well as users with low vision or visual/neurological impairments, and including <a href="https://www.myndex.com/CVD/">CVD</a> (Color Vision Deficiency, sometimes referred to as color-blindness or color insenstive vision). </p>
</section>
<section id="benefits">
<h2>Who it helps</h2>
<ul>
<li>People with color blindness need adequate luminance contrast to perceive text and graphic elements, and some color pairs require greater contrast than others to compensate.</li>
<li>People with low vision (due to poor contrast sensitivity and/or visual acuity) may need higher visual contrast for readability. This is particularly true for those over 40, and also young children.</li>
<li>People with some cognitive, language, and learning disabilities may benefit from the use of color and luminance contrast that is more homogenous, serving the purpose of the content such as grouping related items.</li>
<li>All sighted people, including those with with color insensitive vision need adequate visual contrast to read and understand text and graphic elements.</li>
<ul>
<li>By Visual Contrast we mean the difference between perceived lightness and darkness.
<li>For instance, those with deficient red sensitivity (known as protanopia) see colors involving red as darker, so these color pairs require greater contrast than others to compensate.</li>
</ul>
<li>People with low or reduced vision (due to poor contrast sensitivity and/or visual acuity) need higher visual contrast for readability. This is particularly true for those over 40, and also young children.</li>
<li>People with some cognitive, language, and learning disabilities may benefit from the use of color and lightness/darkness contrast that is less saturated, serving the purpose of the content such as grouping related items.</li>
</ul>
</section>
<section id="how">
<h2>How</h2>
<p>Authors need to balance font size, font stroke width, background color, font color, and nearby colors to achieve good visual contrast. Authors can use tools to evaluate elements that predict the needed visual contrast for a given font size and weight to achieve a presentation which meets these requirements.
</p>
<p>The complex, interrelated nature of font and graphic elements to provide visual readability is aided by the use of the APCA algorithm (Advanced Perceptual Contrast Algorithm) which allows authors to input color pairs to find a predicted contrast value. That contrast value then defines the minimum useable font weight and size.
<p>The complex, interrelated nature of font and graphic elements to provide visual readability is aided by the use of the APCA (Accessible Perceptual Contrast Algorithm) which allows authors to input color pairs to find a predicted contrast value. That contrast value then defines the minimum useable font weight and size.
</p>
</section>
</main>
Expand Down
3 changes: 2 additions & 1 deletion how-tos/visual-contrast-of-text/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@ <h1>Visual Contrast of text</h1>
<section id="changelog">
<h2>Change Log</h2>
<ul>
<li>2022-05-18: Update APCA information.</li>
<li>2020-09-16: Draft.</li>
</ul>
</section>
</footer>
</body>
</html>
</html>
7 changes: 4 additions & 3 deletions how-tos/visual-contrast-of-text/resources.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ <h1>Resources</h1>
</header>
<main>
<ul>
<li><a href="https://www.myndex.com/SAPC/">APCA tool</a></li>
<li><a href="https://www.myndex.com/CVD/">CVD Simulator</a></li>
<li><a href="https://www.myndex.com/APCA/">APCA Tool</a></li> A live web app that calculates readability contrast.
<li><a href="https://www.myndex.com/CVD/">Color Vision Deficiency Simulator</a></li> A clinically accurate simulation of color insensitive vision.
<li><a href="">"Why APCA"</a> A plain language introduction to readability contrast.
</ul>
</main>
</body>
</html>
</html>

1 comment on commit c2f03db

@Myndex
Copy link
Member Author

@Myndex Myndex commented on c2f03db May 23, 2022

Choose a reason for hiding this comment

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

Maintenance updates, re-wording and fixing links etx.

Please sign in to comment.