Conformance Minimums

The following minimum levels are used with the tests and methods to provide the basic pass/fail criteria for this objective.

Bronze Level Conformance

• GENERAL:
  • Use case: all fluent content text
  • No look up tables
  • Exchange Rules: optional.
• Bronze Use Case Conformance Values for Testing:
• Body Text
• Minimum Contrast: Lc 75
• Preferred Contrast: Lc 90
• Other Content Text
• Fonts 16px or larger
• Minimum Contrast: Lc 60
• Large Fluent Content
• Fonts larger than 32px
• Minimum Contrast: Lc 45
• Maximum Contrast: Lc 90 (Large & Bold Only)

Silver Level Conformance

• GENERAL:
  • Use cases: all fluent and sub-fluent content text
  • Uses look up tables or tools for font weight & size
  • Fonts for all body-text must be qualified, either prequalified or manually qualified using the Font Weight Test
  • Exchange Rules: Must choose at least one.
• Silver Use Case Conformance Values for Testing
• Body Text & Fluent Content
• Per Lookup Table
• Minimum font size 14px
• Maximum Contrast for fonts larger than 36px: Lc 90
• Sub-Fluent & Logos
• Per Lookup Table
• Contrast Value can be reduced by as much as Lc 15
• But in no case can it be under Lc 40
• Minimum font size 10px
• Non-Fluent & Incidental
• Per Lookup Table
• Contrast Value can be reduced by as much as Lc 30
• But in no case can it be under Lc 30

Gold Level Conformance

• GENERAL:
  • Use cases: all text (fluent, sub-fluent, non-fluent)
  • Uses look up tables or tools for font weight & size
  • Fonts for all fluent content must be qualified, either prequalified or manually qualified using the Font Weight Test
  • Exchange Rules: Must choose at least two.
• Gold Use-Case Conformance Values for Testing
• Body Text & Fluent Content
• Per Lookup Table
• Except: When used for body text, any contrast value less than Lc 75 must be increased by at least Lc 15.
• Minimum font size 16px
• Maximum Contrast for fonts larger than 36px: Lc 90
• Sub-Fluent & Logos
• Per Lookup Table
• Contrast Value can be reduced by as much as Lc 15
• But in no case can it be under Lc 45
• Minimum font size 12px
• Non-Fluent & Incidental
• Per Lookup Table
• Contrast Value can be reduced by as much as Lc 20
• But in no case can it be under Lc 30

EXCHANGE RULES:

• Silver must choose one, Gold must choose two of these:
  • Provides for more than one color scheme, at least light and dark mode, with control for user selection (persistent), and default of automatic following OS.
  • Light mode body-text content using the Paper Reading Experience design guidelines.
  • Provides a polyfill for proportional text zoom.
  • Provides user controls for body-text weight, size, and spacing, persistent.
  • Provides a set of hyper-legible fallback fonts, user activatable.

  See Also: "Understanding Use Cases and Conformance Levels" for a more in depth discussion of conformance levels and use cases.

Font Lookup Tables

The following table cross indexes APCA contrast values to the reference font's CSS font-size and CSS font-weight.

Tables for Silver and Gold Conformance

• Reference fonts for comparison currently include Helvetica Neue, Helvetica, Barlow, and Arial.
• Contrast value must meet or exceed the value listed, using the absolute value for negative values (negative values represent light text on a darker background).
• A ⊘ indicates that a larger font size (or heavier font weight) must be used.
• A ®© indicates that the size and weight can only be used for non-content text (copyright, placeholder, disabled).

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, 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.
3. NON-FLUENT
   • Minimum Legibility, non-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 Levels: Bronze, Silver, and Gold

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.

2. SILVER:

   Covers all text content.
   • Font weight and size per Lc contrast value and font lookup table.
   • Use-cases for "body text", "fluent text", "large fluent text", "sub-fluent text".
   • Logos are covered, with a contrast requirement reduced by Lc 15.
   • Spot text: disabled, placeholder, ancillary, decorative text are covered as a recommendation (should)
   • The minimum font size for content is 13px, based on an x-height ratio of 0.5 (minimum x-height of 7.5px)
   • Minimum font size for non-content text is 10px.
   • Fonts used for body text (only) must be prequalified or compared to a reference font's weight or size, and appropriate offset used for equivalency.

3. GOLD:

   Covers all text content, enhanced.
   • Font weight and size per Lc contrast value and font lookup tables per use cases.
   • Use-cases for "body text", "fluent text", "large fluent text", "sub-fluent text", "non-fluent text" (Disabled, placeholder) and Logos.
   • Ancillary, decorative text are covered with recommendations
   • The minimum font size for content text is 18px, based on an x-height ratio of 0.5 (minimum x-height of 9px).
   • Minimum font size for non-content text is 12px.
   • Fonts used for fluent content text must be prequalified or compared to a reference font's weight or size, and appropriate offset used for equivalency.

EXCHANGE RULES:

• Provides for more than one color scheme, at least light and dark mode, with control for user selection (persistent), and default of automatic following OS.
• Light mode body-text content using the Paper Reading Experience design guidelines.
• Provides a polyfill for proportional text zoom.
• Provides user controls for body-text weight, size, and spacing, persistent.
• Provides a set of hyper-legible fallback fonts, user activatable.

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.

<!DOCTYPE html>
		<html>
		<head>

		<!-- Web Page Snippet 1: matching size to the reference -->
		<style>
		/* import test and reference fonts here, (not shown)
		or link them above in the <head> */ 

		body, section, div, p, span  {margin: 0em;padding:0;}

		.xheightMeasure{
			clear:both;
			padding: 24px;
			color: #222; 
			background-color: #eaeaea; 
			font-size: 100px; 
			font-weight: 400;
			}

		.referenceFont {font-family: Arial, Helvetica, cursive,fantasy;}
		.testFont {font-family: 'Times New Roman', cursive,fantasy;}
		/* the reason the last font-family in the fallbacks is cursive Fantasy,
		 is to make it very clear that the desired font did not load as expected */

		</style>
		</head>
		<body>
		<!-- Measure the x-height compared to the reference font--> 

		<div class="xheightMeasure">
			<span class="referenceFont">x</span><span class="testFont">x</span>
		</div>

		</body>
		</html>

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font test</title>

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- note that Raleway is a variable font that allows for the in-between
font weights shown. But be careful, incorrectly applying weights that
don't exist can cause the font import to fail. -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:
wght@300;400;500;520;600;700;730;800&display=swap" rel="stylesheet">

<style>
body, section, div, p, span  {margin: 0em;padding:0;}

:root {
  --pad:18px; 
  --spacer: calc((var(--pad) * 2) + 2px);
  }

.weightCompare {
  margin: 0em; 
  padding: var(--pad); 
  color: #ffc;
  background-color: #777; 
  border: 2px solid #123;
  }

h2 {
  position:relative;
  margin: 0.5em auto; 
  text-align:center; 
  text-shadow: 0.12em 0.12em 0.18em #000;
  }
  
p.referenceFont {
  margin: 1em 0 0;
  font-family:Arial,Helvetica,cursive,fantasy;
  }
p.testFont {
  margin: -0.45em 0 0.25em;
  font-family:Raleway,cursive,fantasy;
  }

hr{margin: 1em;}

.hiCon {
  float: right; 
  width: calc(50% - var(--spacer));
  padding: var(--pad);
  font-size: 18px; 
  font-weight: 400;  
  color: #222; 
  background-color: #eaeaea;
  }
.loCon {
  float:left;
  text-align: right;
  width: calc(50% - var(--spacer));
  padding: var(--pad);
  font-size: 18px; 
  font-weight: 400;
  color: #999; 
  background-color: #d4d4d4;
  }
  
.clearFix {clear:both}

.weight3 {font-weight: 300;}
.weight4 {font-weight: 400;}
.weight5 {font-weight: 500;}
.weight6 {font-weight: 600;}
.weight7 {font-weight: 700;}
.weight8 {font-weight: 800;}

.weight52 {font-weight: 520;}
.weight73 {font-weight: 730;}

</style>
</head>

<!-- Web Page Snippet 2: Weighty Decisions -->
<body>

<section class="weightCompare">
<!-- find the closest matching weight to the reference font--> 

<h2>Weight Comparison</h2>

  <div class="hiCon">

    <h3>Hi-Con Compare Lc 90</h3>

    <p class="referenceFont weight4">Il 400 & IcyATOMsizedgap Arial</p>
    <p class="testFont weight3">Il 300 & IcyATOMsizedgap Raleway</p>

    <p class="referenceFont weight4">Il 400 & IcyATOMsizedgap Arial</p>
    <p class="testFont weight4">Il 400 & IcyATOMsizedgap Raleway</p>

    <p class="referenceFont weight4">Il 400 & IcyATOMsizedgap Arial</p>
    <p class="testFont weight5">Il 500 & IcyATOMsizedgap Raleway</p>

    <p class="referenceFont weight4">Il 400 & IcyATOMsizedgap Arial</p>
    <p class="testFont weight52">Il 520 & IcyATOMsizedgap Raleway</p>

    <p class="referenceFont weight4">Il 400 & IcyATOMsizedgap Arial</p>
    <p class="testFont weight6">Il 600 & IcyATOMsizedgap Raleway</p>
<hr>
    <p class="referenceFont weight7">Il 700 & IcyATOMsizedgap Arial</p>
    <p class="testFont weight6">Il 600 & IcyATOMsizedgap Raleway</p>

    <p class="referenceFont weight7">Il 700 & IcyATOMsizedgap Arial</p>
    <p class="testFont weight7">Il 700 & IcyATOMsizedgap Raleway</p>
    
    <p class="referenceFont weight7">Il 700 & IcyATOMsizedgap Arial</p>
    <p class="testFont weight73">Il 730 & IcyATOMsizedgap Raleway</p>

    <p class="referenceFont weight7">Il 700 & IcyATOMsizedgap Arial</p>
    <p class="testFont weight8">Il 800 & IcyATOMsizedgap Raleway</p>

  </div>

  <div class="loCon">
  
    <h3>Lo-Con Compare Lc 30</h3>

    <p class="referenceFont weight4">400 & IcyATOMsizedgap Arial lI</p>
    <p class="testFont weight3">300 & IcyATOMsizedgap Raleway lI</p>

    <p class="referenceFont weight4">400 & IcyATOMsizedgap Arial lI</p>
    <p class="testFont weight4">400 & IcyATOMsizedgap Raleway lI</p>

    <p class="referenceFont weight4">400 & IcyATOMsizedgap Arial lI</p>
    <p class="testFont weight5">500 & IcyATOMsizedgap Raleway lI</p>

    <p class="referenceFont weight4">400 & IcyATOMsizedgap Arial lI</p>
    <p class="testFont weight52">520 & IcyATOMsizedgap Raleway lI</p>
    
    <p class="referenceFont weight4">400 & IcyATOMsizedgap Arial lI</p>
    <p class="testFont weight6">600 & IcyATOMsizedgap Raleway lI</p>
<hr>
    <p class="referenceFont weight7">700 & IcyATOMsizedgap Arial lI</p>
    <p class="testFont weight6">600 & IcyATOMsizedgap Raleway lI</p>

    <p class="referenceFont weight7">700 & IcyATOMsizedgap Arial lI</p>
    <p class="testFont weight7">700 & IcyATOMsizedgap Raleway lI</p>
    
    <p class="referenceFont weight7">700 & IcyATOMsizedgap Arial lI</p>
    <p class="testFont weight73">730 & IcyATOMsizedgap Raleway lI</p>

    <p class="referenceFont weight7">700 & IcyATOMsizedgap Arial lI</p>
    <p class="testFont weight8">800 & IcyATOMsizedgap Raleway lI</p>

  </div>

<div class="clearFix"> </div>

</section>

</body>
</html>

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

Reading with low vision:

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

Luminance Contrast

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

Human factors design standard (HFDS) (2003)

Federal Aviation Administration (FAA)

HF-STD-001. Available for download at

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

An Engineering Model

for Color Differenceas 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

Realities and Myths of Contrast and Color

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 spatial contrast sensitivity 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