Apca updates g5

how-tos/visual-contrast-of-text/design.html

@@ -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 properties <q>-webkit-font-smoothing:</q> or <q>-moz-osx-font-smoothing</q> should be set to auto (default), and <em>not <q>antialiased</q></em>(webkit), and <em>not <q>greyscale</q></em>(moz).
 						<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>
@@ -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>
@@ -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">

how-tos/visual-contrast-of-text/develop.html

@@ -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 nearby colors can affect how you perceive the monitor content.</li>
 						</ul></li></ol>
 			</section>
 		</main>
 	</body>
-</html>
+</html>

how-tos/visual-contrast-of-text/examples.html

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

how-tos/visual-contrast-of-text/get-started.html

@@ -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>
@@ -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>To conform to readability contrast guidelines, use an APCA compliant contrast calculator. An APCA (Accessible Perceptual Contrast Algorithm) based tool allows authors to test a pair of colors and calculate a predicted contrast value. This defines the minimum useable font weight and size. 
 				</p>
 			</section>
 		</main>

how-tos/visual-contrast-of-text/index.html

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

how-tos/visual-contrast-of-text/resources.html

@@ -9,9 +9,11 @@ <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://git.apcacontrast.com/documentation/WhyAPCA.html">"Why APCA"</a> A plain language introduction to readability contrast.
+			  <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance">Introduction to Color and Accessibility</a> A further tutorial on color and accessibility.
+				<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.
 			</ul>
 		</main>
 	</body>
-</html>
+</html>

methods/font-characteristics-contrast/apca.css

@@ -1,22 +1,61 @@
-/* Optional Styles for APCA Lookup Table */
+/* Styles for bibliography */
+
+#bibliography h3,
+#bibliography h4,
+#bibliography p {
+	margin: 0.15em 1em;
+	}
+#bibliography p ~ h3 {
+	margin: 1em 1em 0.15em;
+	}
+
+
+/* Styles for APCA Tables */
 
 .APCAtable td:first-child {font-weight: bold;}
 
-.APCAtable {
-	text-align: center;
-}
+.APCAtable, .ppiTable {text-align: center; }
+
+.APCAtable .ptText {font-size: 0.85em; font-style: italic;}
+.APCAtable .ptText::after {content: 'pt'; font-size: 0.75em;}
+.APCAtable .pxText {font-size: 1.05em; font-weight: bold;}
+.APCAtable .pxText::after {content: 'px';font-size: 0.75em;}
+
+.APCAtable.sortContrast .pxText {font-size: 1em; font-weight: normal;}
+.APCAtable.sortContrast .pxText.fraction {font-size: 0.9em; font-weight: normal; font-style:italic;}
+
+.APCAtable .LcValue {
+  font-size: 1.2em;
+  text-align: left;
+  }
+
 .APCAtable .underWeight {
-	font-size: 1.5em;
+	font-size: 1.35em;
 	line-height: 0.7;
 	color: #c0272d;
-	/* color: var(--faded-red); */
+	background-color: #fff4e8;
 }
-.underWeightSpan {
-	color: #c0272d;
-	/* color: var(--faded-red); */
+.APCAtable .spotWeight {
+	font-size: 0.85em;
+	line-height: 0.7;
+	letter-spacing: -0.2em;
+	color: #a000f0;
+	background-color: #f4eeff;
 }
-.APCAtable .keyValue {
+  .spotSpan {
+    color: #a000f0;
+  }
+  .underWeightSpan {
+    color: #c0272d;
+    /* color: var(--faded-red); */
+  }
+.APCAtable .keyValue, .ppiTable .keyValue {
 	font-weight: bold;
 	background-color: #d0e1f1;
 	/* background-color: var(--cloudy-subtle); */
 }
+.APCAtable .keyValue60 {
+	font-weight: bold;
+	background-color: #c0e1c1;
+	/* background-color: var(--cloudy-subtle); */
+}

methods/font-characteristics-contrast/description.html

@@ -12,21 +12,25 @@ <h1>Description</h1>
 				<h2>Outcome</h2>
 				<p>This method supports the outcome <a href="../../outcomes/luminance-contrast-between-background-and-text.html" class="outcome-link">Luminance contrast between background and text</a>.</p>
 			</section>
+
 			<section id="details">
 				<h2>Detailed description</h2>
 				<p>The visual contrast needed for easy reading of text is substantially higher than the contrast needed to simply "make out" words. At least ten times more contrast is needed for good <em>readability</em> than the bare minimum contrast needed for <em>legibility</em>.</p>
 
-				<p>Perception of contrast is affected not only by the lightness and darkness of the colors used for the text and background, but also by the weight (thickness) of the font, the font's size, and the relative spacing of lines and letters.</p>
+				<p>Perception of contrast is affected not only by the lightness and darkness of the colors used for the text and background, but also by the weight (thickness) of the font, the font's size, and the relative spacing of lines and letters. Additionally, the perceived contrast can be different when the text is a darker color than the background, or vice versa.</p>
 
 				<p>A person's contrast sensitivity shifts throughout their lifetime, and visual impairments can cause a substantial reduction in contrast perception, requiring higher contrast text for the same readability. Some impairments can make it difficult to see certain hues, so it is important to ensure enough luminance contrast (lightness/darkness), and not to rely on color contrasts of hue and saturation.</p>
 
 				<p>Because a person's contrast perception is so variable, it is difficult for any one individual to judge what makes a good readable contrast for all. The solution is to use objective guidelines and tools to evaluate font stroke width (weight), font size, background and font colors to ensure good visual contrast and readability.</p>
-
 			</section>
 
 			<section id="dependencies">
 				<h2>Dependencies</h2>
-				<p>None</p>
+				<ul>
+				  <li>An APCA-W3 compliant perceptual contrast calculator</li>
+				  <li>A defined reference font family, for comparison purposes</li>
+				  <li>The sRGB color space, the default color space for web content</li>
+				</ul>
 			</section>
 		</main>
 	</body>