Conformance Minimums

The following minimum levels are used with the above test(s) to provide the basic pass/fail criteria.

Bronze Level Conformance

• Bronze Use Case Conformance Values for Testing
• Body Text
• Minimum Contrast: Lc 75
• Preferred Contrast: Lc 90
• Other Content Text
• Minimum Contrast: Lc 60
• Large Fluent Content
• Fonts larger than 36px
• Minimum Contrast: Lc 45
• Maximum Contrast: Lc 90 (Large Only)

Use Cases For Text

Understanding use cases and conformance levels, and how they work together to provide improved accessibility along with added design flexibility.

Text Use Cases: Body, Fluent, Sub-Fluent, Spot.

1. FLUENT
   • Fluent Readability, Block/Body Text
     • Defined as: a block or column of more than two continuous lines of content text that uses a readable font with an x-height of ~19px or less.
   • Fluent Readability, Primary content that is not body text
     • Defined as: up to two and a half lines of continuous text.
       • Includes headlines, captions, and images of text, if they contribute to content
       • primary navigation and primary menus
       • asides, tool-tips, spoilers, "continued"
       • user entered text in forms, fields, etc
       • does not include text the user controls or adjusts in size or color
   • Large Fluent header/title content
     • Defined as: fluent subcategory of "large content" such as big, bold headlines, and generally referring to text larger than 36px.
2. SUB FLUENT
   • Soft Readability, small sub-fluent secondary/ancillary content
     • Defined as: non-primary content with relaxed readability needs.
       • Applies to certain aspects of dataviz (call-outs, de-enhanced aspects of visual hierarchy)
       • Category can include secondary/tertiary nav such as to TOS/EULA
       • May include byline, short duplicative captions, footer matter.
   • Spot Readability, sub-fluent "non-content"
     • Defined as: non-content text of an incidental nature.
       • This category includes non-informative placeholder text, disabled controls, copyright/trademark/license bugs (but not actual license or legal text blocks)
   • Logo or Branding, brand related logo, symbol, service mark.
     • This category relates to specific colors that are required as part of a brand or logotype.
   • Incidental Text in Images text in images not critical to the understanding, nor specifically contributing to the content.

Conformance Level: Bronze Simple Mode

1. BRONZE:

   Covers primary content text only.
   • There is no font lookup table, only a set of general conformance levels.
   • Use-cases for "body text" and "other content text".
   • Spot text: disabled, placeholder, ancillary, decorative text is not covered
   • Logos and incidental text in images are not covered
   • There is no specified minimum font size.
   • There is no requirement to match a reference font weight or size.

Objective, Procedural Testing

Measure the predicted contrast of the content to ensure it supports the required objective of adequate luminance contrast for readability.

Test Overview and Objective

1. SCOPE: Determine the use-case category of the text (or non-text) element to be tested.
2. SAMPLE: Obtain representative CSS color values for the foreground text (or non-text) element and the adjacent background
3. CALCULATE: Using an APCA-W3 compliant contrast calculator determine the lightness contrast value (Lc).
4. TEST: Check that the font size and weight is equal or larger than the minimum size and weight for the given use-case, as defined in the conformance guidelines.

Testing Step by Step

Visual Contrast Testing Techniques

These are specific techniques with examples, demonstrating best practices to support the tests for visual contrast of text and non-text elements.

EMPIRICAL BASIS FOR THE GUIDELINES (IN PART):

Recited from the research of Lovie-Kitchin et alia.

ARC body-text standards are based on the maximum rate with maximum contrast reserve, partly because it is assumed that body text is something that should be read at best fluent rate but also because body text is the most challenging because it is such a high spatial frequency—see the chart below.

Contrast Sensitivity vs Spatial Frequency

This chart shows the human contrast sensitivity curve, a horseshoe shaped curve where as items get smaller and thinner, contrast sensitivity very sharply drops off. This is particularly important for text.

This chart is adorned with sample text at various sizes, and all of the sample text is exactly the same gray color, but only the larger text is readable, while the smaller text is practically invisible.

The implication here is that it is the spatial frequency, in other words the size and weight of the text, that is most important, more so than the color. Contrast perception is much more about spatial than color at these higher spatial frequencies.

APCA Resources

• "Why APCA?". A plain language introduction to readability contrast.
• Accessible Perceptual Contrast Algorithm (APCA) Visual Contrast Calculator. Takes a pair of CSS sRGB colors and predicts the perceived contrast, suggests a minimum font size and weight for those colors.
• APCA on GitHub. The main repository for the source code and documentation for the APCA contrast method.

External Resources

• Color Vision Deficiency Simulator. Allows designers to preview how their designs may look like to individuals with color blindness. Includes an sRGB grayscale example, useful for visually assessing luminance contrast.
• Web Accessibility: Understanding Colors and Luminance Introduction to Color and Accessibility, a tutorial.
• Mac Color Meters & Color Space Conversion Regarding Digital Color Meters, i.e. "eye dropper tools" on Mac OS X.
• Please Stop Using Grey Text Myths regarding too much contrast are both overstated and misguided.
• Contrast Clearinghouse A catalog of white papers, reviews, articles, and technical information relating to color, contrast, and the APCA.

W3C Resources

• CSS Color Module Level 4 CSS color information, includes information regarding color spaces other than sRGB.
• sRGB Colors CSS specifications regarding the standard sRGB color space.
• Simple alpha compositing W3 CSS guidance regarding calculating colors involving alpha channels.
• Visual Contrast White Paper (In-Progress Draft) An overview of readability contrast, with infographics and a bibliography of the relevant peer reviewed science.

APCA Equation

This equation takes two sRGB color values, one for text and one for the background, and generates a perceptual lightness contrast value (Lc).

It is presented here as an svg image, in MathML, and with the original LaTeX code as the alt-text.

${\displaystyle {\begin{aligned}\\\ \ \mathbf {APCA} \mathbf {\bullet W3} \ \ &\mathbf {\scriptstyle version\ {0.1.7}\ {developed\ for\ WCAG\ 3\ contrast\ guidelines}} \\[0.66ex]{\scriptstyle Using:}\quad \quad \quad \quad &\\\ \ {APCA}\ Contr&ast\ {Prediction\ Equation\ \ 0.0.98G-4g-base}\\\\Result:\ &{\begin{bmatrix}\hline {\scriptstyle Lightness\ Contrast}\\\quad L\!^{c}=\ S_{apc}\ {\boldsymbol {\times }}\ 100\quad \\\hline \end{bmatrix}}\\\\\textstyle Where:\quad &\\\hline {\scriptstyle Clamp\ Mi}&{\scriptstyle nimum\ Contrast\ Then\ Offset}\\[1.25ex]S_{apc}=&{\begin{cases}0.0\ \ &\vert C\vert <P_{out}\\C-W_{offset}\ \ &\ C\ >0\\C+W_{offset}\ \ &\ C\ <0\\\end{cases}}\\\hline {\scriptstyle Clamp\ No}&{\scriptstyle ise\ Then\ Scale}\\[1.25ex]C=&{\begin{cases}0.0\ \ &{\bigg \vert }Y_{bg}-Y_{txt}{\bigg \vert }<P_{in}\\S_{norm}\times R_{scale}\ \ &\ Y_{txt}<Y_{bg}\\S_{rev}\times R_{scale}\ \ &\ Y_{txt}>Y_{bg}\\\end{cases}}\\\hline {\textstyle Find\ }&{\textstyle Perceptual\ Lightness\ Difference}\\[0.75ex]&{\scriptstyle Normal\ Polarity\ (dark\ text/light\ bg)}\\S_{norm}=&\ Y_{bg}^{0.56}-Y_{txt}^{0.57}\quad \ _{Normal:\ Y_{bg}\ >\ Y_{txt}}\\[0.75ex]&{\scriptstyle Reverse\ Polarity\ (light\ text/dark\ bg)}\\S_{rev}=&\ Y_{bg}^{0.65}-Y_{txt}^{0.62}\quad \ _{Reverse:\ Y_{bg}\ <\ Y_{txt}}\\\hline {\scriptstyle Soft\ Clam}&{\scriptstyle p\ Black\ Levels}\\[1.25ex]Y_{txt}=&\ f_{clamp}(Y)\quad _{color\ of\ the\ text,\ symbol,\ or\ object.}^{where\ Y\ is\ derived\ from\ the}\\[1.1ex]Y_{bg}=&\ f_{clamp}(Y)\quad _{color\ used\ for\ the\ background.}^{where\ Y\ is\ derived\ from\ the}\\[0.66ex]f_{clamp}(Y_{c})=&{\begin{cases}Y_{c}\ \ &Y_{c}>=B_{thrsh}\\Y_{c}+{\big (}B_{thrsh}-Y_{c}{\big )}^{Bexp}&Y_{c}<B_{thrsh}\\\end{cases}}\\\hline {\scriptstyle Constants}&{\scriptstyle \ for\ Clamps\ and\ Scalers}\\[1.25ex]&{\begin{aligned}B_{exp}=&\ 1.414&R_{scale}=&\ 1.14\\B_{thresh}=&\ 0.022&W_{offset}=&\ 0.027\\P_{in}=&\ 0.0005&P_{out}=&\ 0.1\\\end{aligned}}\\\hline {\scriptstyle Estimate\ }&{\scriptstyle Screen\ Luminance}\\[1.25ex]\definecolor {DarkGreen}{rgb}{0,0.35,0}\definecolor {DarkRed}{rgb}{0.6,0,0}Y_s=\textstyle \sum &{\begin{cases}{\color {DarkRed}(\mathbf {R} ^{\prime }\div 255.0)^{2.4}\times 0.2126729}\\{\color {DarkGreen}(\mathbf {G} ^{\prime }\div 255.0)^{2.4}\times 0.7151522}\\{\color {Blue}(\mathbf {B} ^{\prime }\div 255.0)^{2.4}\times 0.0721750}\\\end{cases}}\\[1.25ex]{\{\color {DarkRed}R^{\prime },\color {DarkGreen}G^{\prime },\color {Blue}B^{\prime }\}}&\ {\in }\ \mathbf {s} RGB\\\hline \\\ GitHubRepo&\Rrightarrow \mathrm {https:\!//apcaw3.myndex.com} \\[0.75ex]\\\end{aligned}}}$

Selected Bibliography

the impact of research on clinical management (2011)

Jan Lovie–Kitchin PhD

School of Optometry Queensland University of Technology

doi.org/10.1111/j.1444-0938.2010.00565.x

Using Color In Information Display Graphics

Larry Arend, with contributions from Alex Logan and Galina Havin

NASA Website, NASA Ames Research Center, Human Systems Integration Division

https://colorusage.arc.nasa.gov/luminance_cont.php

Federal Aviation Administration (FAA)

HF-STD-001. Available for download at

http://hf.tc.faa.gov/hfds

An Engineering Model for Color Difference as a Function of Size

M.Stone, D.Szafir, and V.Setlur

Tableau Software, 2014CIC_48_Stone_v3

Comparing the Shape of Contrast Sensitivity Functions for Normal and Low Vision

S.Chung and G.Legge

Vis Sci. 2016 Jan; 57(1): 198–207.

oi: 10.1167/iovs.15-18084 PMCID: PMC4727522

Psychophysics of Reading (I, II, V, VI, XV, XVIII, XX )

G.Legge, D.Pelli, G.Rubin et alia

Vision Research, Vol. 25, No. 2, pp. 23-9252, 1985.

Vision Research, Vol. 27, No. 7, pp. 1165-1177, 1987

Vision Research, Vol. 29, No. 1, pp. 79-91, 1989

Investigative Ophthalmology and Visual Science,, Vol. 37, No. 8, pp. 1492-1501, 1996.

Vision Research, Vol. 38, No. 19, pp. 2949-2962, 1998.

Vision Research, Vol. 41, pp. 725-743, 2001.

Color Appearance Models

M.D. Fairchild

John Wiley and Sons, 3rd edition, 2013

A.M.Somers

Smashing Magazine Sept. 2022

Colorimetry: Understanding the CIE System

Janos Schanda, CIE

John Wiley & Sons, Inc. 2007

Does print size matter for reading?

A review of findings from vision science and typography

G.Legge, C.Bigelow

Journal of Vision (2011) 11(5):8, 1–22

Model for the spatialcontrastsensitivity of the eye

P. Barten

SPIE Optical Engineering Press 1999

Computerized simulation of color appearance for dichromats

H.Brettel, F.Viénot, J.Mollon

0740-3232/97/1002647-09 1997 Optical Society of America