Use tools to evaluate font size, font stroke width, background color, font color, and nearby colors and adjust the properties of those elements to achieve good visual contrast and readability.
All of these interdependent factors affect the perception of contrast and ultimately readability. As we are concerned with readability on computer screens, we can made some assumptions about a range of brightness, and a typical viewing environment. This provides a baseline standard for all users for best readability of content, or a minimum level of legibility for non-content. Then, we can set how different impairments require different adjustments or user customization to accommodate the needs of each individual user.
For instance, a user with poor "acuity", that is, poor sharpness where they cannot focus on small text, will need to be able to zoom the text larger. A user with poor contrast sensitivity may have good sharpness, but unable to perceive colors that are too similar in lightness. Yet another user with a glare problem may need lower contrast, and/or a reduction in blue, to reduce glare or halos interfering with readability. Those with a color vision problem (sometimes called 'color blind') may have difficulty detecting contrast or lightness for certain colors, such as deep red. - -
Predicted contrast is reported as a percentage using the methods in this guideline, based on the CSS color values in sRGB colorspace, and with device default antialiasing1. The Tests section has a lookup table for specific font and contrast combinations, but as a general guide:
+Perceived contrast is reported as "Lightness Contrast (Lc)" using the methods in this guideline, based on the CSS color values in sRGB colorspace, and with device default antialiasing1. The Tests section has a lookup table for specific font and contrast combinations, but as a general guide:
Note: 1These values require that antialiasing be at the device or user agent default, such that added antialiasing such as "Webkit-Font-Smoothing: Antialias;" is not enabled.
It's useful to point out that the term “Visual Contrast” can also be used to describe the differences of other visual perceptions: Contrast of size difference, contrast of position, contrast of speed or motion, etc. but these are not covered in this guideline at this time.
- -
-////////////////////////////////////////////////////////////////////////////////
-///// Functions to parse color values and determine SAPC contrast
-///// REQUIREMENTS: ECMAScript 6 - ECMAScript 2015
-///// SAPC tool version 0.97 by Andrew Somers
-///// https://www.myndex.com/WEB/Perception
-///// Color value input parsing based substantially on rgbcolor.js by
-///// Stoyan Stefanov <sstoo@gmail.com>
-///// His site: http://www.phpied.com/rgb-color-parser-in-javascript/
-///// MIT license
-////////////////////////////////////////////////////////////////////////////////
+/////
+///// NOTICE: THIS FILE IS NOT BEING MAINTAINED AT THIS LOCATION
+///// FOR THE CURRENT FILE(S) PLEASE VISIT THE WCAG 3 WORKING DRAFT
+///// AND THE APCA GITHUB REPO:
+/////
+///// https://www.w3.org/TR/wcag-3.0/
+/////
+///// GITHUB: https://github.com/Myndex/SAPC-APCA
+/////
+
+///////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////
+// \\\ ///
+////////////////// THIS PAGE IS NOT MAINTAINED !!! ///////////////////////
+// /// \\\
+///////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////
+
+ /// DEPRECIATED /// /// DEPRECIATED /// /// DEPRECIATED ///
////////////////////////////////////////////////////////////////////////////////
/////
///// ***** SAPC BLOCK *****
/////
///// For Evaluations, this is referred to as: SAPC-7
-///// sRGB Advanced Perceptual Contrast v0.97 beta JAVASCRIPT
-///// Copyright © 2019 by Andrew Somers
+///// sRGB Advanced Perceptual Contrast v0.97g beta JAVASCRIPT
+///// Copyright © 2019-2020 by Andrew Somers
///// Licensed to the W3C Per Collaborator Agreement
-///// SIMPLE VERSION — This Version Is Stripped Of Extensions:
+///// SIMPLE VERSION This Version Is Stripped Of Extensions:
///// * No Color Vision Module
///// * No Spatial Frequency Module
///// * No Light Adaptation Module
@@ -161,30 +169,43 @@ Example Code for a Test Tool
/////
////////////////////////////////////////////////////////////////////////////////
+ /// DEPRECIATED /// /// DEPRECIATED /// /// DEPRECIATED ///
+
+normBGExp = 0.56; // Constants for Power Curve Exponents.
+normTXTExp = 0.57; // One pair for normal text, and one for REVERSE
+revBGExp = 0.62; // FUTURE: These will eventually be dynamic
+revTXTExp = 0.65; // as a function of light adaptation and context
+
+blkThrs = 0.022; // Level that triggers the soft black clamp
+blkClmp = 1.414; // Exponent for the soft black clamp curve
///// CONSTANTS USED IN THIS VERSION ///////////////////////////////////////////
- const sRGBtrc = 2.218; // Gamma for sRGB linearization. 2.223 could be used instead
- // 2.218 sets unity with the piecewise sRGB at #777
+ const sRGBtrc = 2.4; // Gamma for sRGB linearization. 2.35 could be used instead
+ // 2.4 emulates common monitor perceived EOTF
const Rco = 0.2126; // sRGB Red Coefficient
const Gco = 0.7156; // sRGB Green Coefficient
const Bco = 0.0722; // sRGB Blue Coefficient
- const scaleBoW = 161.8; // Scaling for dark text on light (phi * 100)
- const scaleWoB = 161.8; // Scaling for light text on dark — same as BoW, but
+ const scaleBoW = 114.0; // Scaling for dark text on light (1.14 * 100)
+ const scaleWoB = 114.0; // Scaling for light text on dark — same as BoW, but
// this is separate for possible future use.
- const normBGExp = 0.38; // Constants for Power Curve Exponents.
- const normTXTExp = 0.43; // One pair for normal text,and one for REVERSE
- const revBGExp = 0.5; // FUTURE: These will eventually be dynamic
- const revTXTExp = 0.43; // as a function of light adaptation and context
+ const normBGExp = 0.56; // Constants for Power Curve Exponents.
+ const normTXTExp = 0.57; // One pair for normal text,and one for REVERSE
+ const revBGExp = 0.62; // FUTURE: These will eventually be dynamic
+ const revTXTExp = 0.65; // as a function of light adaptation and context
- const blkThrs = 0.02; // Level that triggers the soft black clamp
- const blkClmp = 1.75; // Exponent for the soft black clamp curve
+ const blkThrs = 0.022; // Level that triggers the soft black clamp
+ const blkClmp = 1.414; // Exponent for the soft black clamp curve
+
+ /// DEPRECIATED /// /// DEPRECIATED /// /// DEPRECIATED ///
///// Ultra Simple Basic Bare Bones SAPC Function //////////////////////////////
+ /// DEPRECIATED /// /// DEPRECIATED /// /// DEPRECIATED ///
+
// This REQUIRES linearized R,G,B values of 0.0-1.0
function SAPCbasic(Rbg,Gbg,Bbg,Rtxt,Gtxt,Btxt) {
@@ -197,7 +218,7 @@ Example Code for a Test Tool
var Ybg = Rbg*Rco + Gbg*Gco + Bbg*Bco;
var Ytxt = Rtxt*Rco + Gtxt*Gco + Btxt*Bco;
- ///// INSERT COLOR MODULE HERE /////
+ /// DEPRECIATED /// /// DEPRECIATED /// /// DEPRECIATED ///
// Now, determine polarity, soft clamp black, and calculate contrast
// Finally scale for easy to remember percentages
@@ -210,26 +231,28 @@ Example Code for a Test Tool
Ytxt = (Ytxt > blkThrs) ? Ytxt : Ytxt + Math.abs(Ytxt - blkThrs) ** blkClmp;
SAPC = ( Ybg ** normBGExp - Ytxt ** normTXTExp ) * scaleBoW;
- return (SAPC < 15 ) ? "0%" : SAPC.toPrecision(3) + "%";
+ return (SAPC < 15 ) ? "0" : SAPC.toPrecision(3) + "Lc";
} else { ///// For reverse polarity, white text on black
Ybg = (Ybg > blkThrs) ? Ybg : Ybg + Math.abs(Ybg - blkThrs) ** blkClmp;
SAPC = ( Ybg ** revBGExp - Ytxt ** revTXTExp ) * scaleWoB;
- return (SAPC > -15 ) ? "0%" : SAPC.toPrecision(3) + "%";
+ return (SAPC > -15 ) ? "0" : SAPC.toPrecision(3) + "Lc";
}
- // If SAPC's more than 15%, return that value, otherwise clamp to zero
+ // If SAPC's more than Lc 15, return that value, otherwise clamp to zero
// this is to remove noise and unusual behavior if the user inputs
// colors too close to each other.
// This will be more important with future modules. Nevertheless
// In order to simplify code, SAPC will not report accurate contrasts
- // of less than approximately 15%, so those are clamped.
- // 25% is the "point of invisibility" for many people.
+ // of less than approximately 15, so those are clamped.
+ // 20 is the "point of invisibility" for many people.
}
+ /// DEPRECIATED /// /// DEPRECIATED /// /// DEPRECIATED ///
+
//////////////////////////////////////////////////////////////
///// END OF SAPC BLOCK //////////////////////////
//////////////////////////////////////////////////////////////
@@ -240,6 +263,8 @@ Example Code for a Test Tool
///// sRGB INPUT FORM BLOCK //////////////////////////
//////////////////////////////////////////////////////////////
+/// DEPRECIATED ////
+
function RGBColor(color_string) {
@@ -408,7 +433,7 @@ Example Code for a Test Tool
}
// end of simple type-in colors
-
+ /// DEPRECIATED /// /// DEPRECIATED /// /// DEPRECIATED ///
// array of color definition objects
var color_defs = [
@@ -515,6 +540,7 @@ Example Code for a Test Tool
return Math.pow(this.r/255.0, sRGBtrc) * Rco + Math.pow(this.g/255.0, sRGBtrc) * Gco + Math.pow(this.b/255.0, sRGBtrc) * Bco;
}
}
+ /// DEPRECIATED /// /// DEPRECIATED /// /// DEPRECIATED ///
//////////////////////////////////////////////////////////////
///// END sRGB INPUT FORM BLOCK //////////////////////
@@ -654,7 +680,7 @@ HTML and Page Level Scripts
<div style="font-size: 12px;">The page and code is Copyright © 2020 by Andrew Somers.
<br>Licensed to the W3.org per their cooperative agreement.
-<br>Otherwise under the MIT license.
+<br>Otherwise under the AGPU v3 License.
<br>Repository: <a href="https://github.com/Myndex/SAPC/tree/master/JS">https://github.com/Myndex/SAPC/tree/master/JS</a>
<br>Color value input parsing based substantially on rgbcolor.js by
<br>Stoyan Stefanov <sstoo@gmail.com> used per MIT license.
@@ -688,14 +714,14 @@ Procedure
- If an “eye dropper” type tool is used it must report values relative to the sRGB colorspace.
- The eye dropper sample should be a pixel in the middle of a major stroke of the font at the smallest size to be tested, with the content size set to default with no user scaling.
-
-Using an automated tool like Advanced Perceptual Contrast Algorithm (APCA) Visual Contrast Demo to calculate the predicted contrast between foreground text and background color.
+
+ Using an automated tool like Advanced Perceptual Contrast Algorithm (APCA) Visual Contrast Demo to calculate the lightness contrast between foreground text and background color.
- Important: do not swap the background or text colors in the tool entry fields.
- The APCA tool predicts contrast based in part on polarity, so it is important that the text color CSS value be entered into the text color field, and likewise for the background.
Compare this calculated value against the lookup table "Accessible Contrast by Font Size and Weight".
- Check that the absolute value of the predicted contrast percentage meets or exceeds the required value for the font weight and size.
+ Check that the absolute value of the lightness contrast percentage meets or exceeds the required value for the font weight and size.
Accessible Contrast by Font Size and Weight
Directions:
@@ -703,11 +729,13 @@
Accessible Contrast by Font Size and Weight
Cross index nominal font size (in CSS px) to CSS weight.
APCA Contrast Percentage must meet or exceed the value listed.
For light text on a dark background the APCA tool will show a negative percentage. Simply use the absolute (positive) value. For example, if the APCA value is -58%, use 58%.
- A ⊘ indicates that a larger font size (or heavier font weight) must be used.
+ A ⊘ indicates that a larger font size (or heavier font weight) must be used.
-