Accessible Contrast

NEW! Draft Guidelines for the Use-Case Conformance Model

APCA Guidelines: Simple Levels

These general levels are appropriate for use without reference to the lookup table. The lookup table simply adds additional accuracy, which allows for greater flexibility.

• Lc 90 • Preferred level for fluent text and columns of body text with a font no smaller than 18px/weight 300 or 14px/weight 400 (normal), or non-body text with a font no smaller than 12px. Also a recommended minimum for extremely thin fonts with a minimum of 24px at weight 200. Lc 90 is a suggested maximum for very large and bold fonts (greater than 36px bold), and large areas of color.
• Lc 75 • The minimum level for columns of body text with a font no smaller than 24px/300 weight, 18px/400, 16px/500 and 14px/700. This level may be used with non-body text with a font no smaller than 15px/400. Also, Lc 75 should be considered a minimum for larger for any larger text where readability is important.
• Lc 60 • The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: no smaller than 48px/200, 36px/300, 24px normal weight (400), 21px/500, 18px/600, 16px/700 (bold). These values based on the reference font Helvetica. To use these sizes as body text, add Lc 15 to the minimum contrast.
• Lc 45 • The minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines, and large text that should be fluently readabile but is not body text. This is also the minimum for pictograms with fine details, or smaller outline icons, , no less than 4px in its smallest dimension.
• Lc 30 • The absolute minimum for any text not listed above, which means non-content text considered as "spot readable". This includes placeholder text and disabled element text, and some non-content like a copyright bug. This is also the minimum for large/solid semantic & understandable non-text elements such as "mostly solid" icons or pictograms, no less than 10px in its smallest dimension.
• Lc 15 • The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons, and is no less than 15px in its smallest dimention. This may include dividers, and in some cases large buttons or thick focus visible outlines, but does not include fine details which have a higher minimum. Designers should treat anything below this level as invisible, as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site.

These define the basic minimum levels, what you might think of as A/AA in the old WCAG 2. For the equivelent to AAA, simply increase the contrast values by Lc 15.

Notes on font size

• Font sizes listed above assume an x-height ratio of at least 0.5
  • i.e. the vertical size of the lower case x is one-half the font size or larger, as rendered to screen.
  • The reference font x-height ratio is 0.52, and it is preferential to use an x-height of 0.52 to 0.57
• Font weight is based on highly standardized reference fonts such as Helvetica or Arial
• "px" means the CSS reference px, not device pixels. The reference px is defined as 1.278 arc minutes of visual angle.
• When selecting, or testing, a font size, simply determine the font's x-height ratio, and the amount it should be increased.
• EXAMPLE:
  • For instance, Times New Roman has an x-height ratio of 0.45, so it needs to be increased about 16% in size relative to the reference font.
  • Therefore, if the reference font is set at 1em, Times should be set at 1.16em to be equivalent.
  • If Times is the main document font, this adjustment can be set for the entire document using the root element via the html selector.
    • html { font-size: 18.6px } sets the entire documents rem (root em) such that 1rem = 18.6px
• For font weight, simply set a line of test text in the reference Arial or Helvetical at 400 weight and then below that the same text text in the new font. Try different weights to find the closest match.
  • As an example, the font Raleway 400 weight is closest to Helvetica 300.
  • So, always add 100 in weight to Raleway to be equivelent.
  • See this discussion answer for more.
• Consider the font design as well as the basic size and weight, and the potential impact on readability. See this PDF "Evaluating Fonts" for general guidance and a comparison of a few dozen fonts for accessibility.

Using the Lookup Table

• Cross index reference font size (in CSS px) to CSS weight.
• Reference fonts for comparison include Helvetica Neue, Helvetica, K2D, Fira Sans, Kanit, and Arial.
• Fonts which exceed the reference fonts include Verdana, Convergence, Libre Baskerville, Artifika
• 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^Lc, use 58^Lc.
• A ⊘ indicates that a larger font size (or heavier font weight) must be used.

About the colors in these tables: The colors in these tables are designed to be discernible by all forms of color vision deficiency.

• The warning colors are grouped in a hue category that separates them from other colors for all CVD types.
• Important color codes also have a symbol such as ×, as color should never be the only coding for important information.
• Less important codes are directly related to the cell content, such as level 80, thus are self-symbolized.
• This follows into the accompanying legend.

• Values shown are for common sans-serif fonts (e.g., Helvetica, Arial, Verdana, Montserrat, Roboto, Calibri, Trebuchet).
• Many serif fonts should use values for the row above (e.g., Times, Georgia, Cambria, Courier), and especially should be compared in terms of x-height.
• Decorative, unusual, and very thin fonts should be avoided for columns of body text.
• Due to the vast variety of font designs, designers should visually compare an unusual font to a standard font such as Helvetica, using the size and weight of Helvetica that most closesly matches the appearance of the tested font as a guide.
• Designers are cautioned that bypassing default font smoothing can drastically reduce contrast for small or thin fonts. For instance, the use of "webkit-font-smoothing: antialiasing" is strongly discouraged.

The Science Behind SAPC/APCA

Advanced Perceptual Contrast Algorithm

For a brief overview and explanation of the SAPC math and methods, take a look at Experiment Results CE17, one of the polarity experiments. The discussion includes graphs comparing SAPC to other contrast methods, and related discussions.

Also, as spatial frequency is one of the most important predictors of contrast perception and readability, see Experiment Results CE14-weight for further explanations.

The "TL;DR" is: like all human perceptions, color and contrast are extremely context dependent. In terms of readability, there is a "critical contrast" level, and that level is more dependent on spatial frequency, which relates to font weight, than a given color pair.

To accurately predict contrast perception, the Spatial (font weight & size), color (perceived lightness difference between text and background), and context (ambient light, surroundings, intended purpose of the text) all need to be taken into account.

What is the Contrast of This Page?

Most of this page is set at over 120 in "old" APCA numbers, which now is approximately 90^Lc. To help differentiate between dark text on a light background and light text on dark, the math reports the latter as a negative value. But for purposes of the font lookup table, ignore the minus sign and use the absolute value.

Δγ  

Myndex Perception Research Experimental Results Listing

Myndex Color Vision
Deficiency Simulator