Basics

Status

• Last Updated: 20 February 2020
• New

Platform

Web

Programming Language

• HTML - all versions
• CSS - all versions
• Any web technology where text and background color are specified separately and browsers can control default colors.

How It Solves User Need

All users need adaquate luminance difference between background and text colors in order to perceive and read the text easily.

Related Guidelines

• TBD

Detailed Description

Understanding Contrast Perception

As used on this page, Visual Contrast means the perceived difference between two colors displayed on a computer monitor, such as the color of the text against the color of the background. Our perception of contrast is a function of the Human Visual System (HVS) which includes the eye, optic nerve, and several areas of the brain that are either dedicated to processing vision, or that share vision processing with other senses such as hearing.

The eye consists of an optical portion including a lens, and a light sensitive portion known as the retina. Muscles in the eye adjust the shape of the lens to adjust the focus of incoming light, so that an image of the world around us is focused onto the retina. Light sensitive cells on the retina then convert light into electrical impulses that are sent to the brain's vision processing center, called the visual cortex.

Our perception of contrast and ultimately the readability of text is affected by many interdependant factors, including:

• The user's personal vision quality in terms of sharpness, glare, and contrast capability
• Font weight or stroke width, and font size
• The lightness or darkness difference between the background and the text
• The overall lightness or darkness of the screen and the light in the room as this affect the eye's light or dark adaptation to the environment
• The padding and spacing around the text which affects the eye's local adaptation to the text area
• The hue or color difference between the background and text, not including the lightness difference mentioned above

All of these interdependant factors affect the perception of contrast and 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 accomodate the neads 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 interfereing with readability. Those with a color vision problem (sometimes called 'color blind') may have difficulty detecting contrast or light for certain colors, such as deep red.

Predicted Contrast

Related Methods

Use default fonts and colors.

Alternate Meanings

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.

Code Samples

Example Code for Test Tool

APCA GitHub Repository

////////////////////////////////////////////////////////////////////////////////
/////	Functions to parse color values and determine SAPC contrast
/////	
/////	Please see the APCA GitHub repository for the latest code
/////   and methods, at: https://github.com/Myndex/SAPC-APCA
/////
////////////////////////////////////////////////////////////////////////////////

Tests

Procedure

1. Using source code inspection of the text and background elements, obtain representaive sRGB values for the forground text (sRGBtxt) and the background color (sRGBbg).
   • If an “eye dropper” type tool is used it must report the true CSS value of the color, not the displayed value.
   • Steps #2 and #3 refer to an automated contrast prediction tool.
   • Note: Since this is a new formula, we have provided a link to a tool for users to comment on this new algorithm. sRGB Advanced Perceptual Contrast (SAPC) Visual Contrast Demo
2. Enter the background sRGBbg and text sRGBtxt CSS color values in the background and text input fields of the contrast tool. Important: do not swap the background or text colors in the tool entry fields.
3. Calculate the predicted contrast percentage of sRGBtxt to background sRGBbg.
4. Compare this calculated value against the lookup table "Accessible Contrast by Font Size and Weight".
5. Check that the absolute value of the predicted contrast percentage meets or exceeds the required value for the font weight and size.

Accessible Contrast by Font Size and Weight

Lookup Table by Font Size (left-most column) and Weight (top-most row). Directions:

• Cross index nominal font size (in CSS px) to CSS weight.
• SAPC value must meet or exceed the value listed.
• For light text on a dark background the SAPC tool will show a negative percentage. Simply use the absolute (positive) value. For example, if the SAPC value is -58, use 58.
• A dot “•” indicates that a larger font size (or heavier font weight) must be used.
• Values shown are for standard sans-serif fonts with an x-height no less than 50% of the font-size such as Helvetica, Arial, or Verdana.
• Serif fonts should use values for the next higher weight (next column to the right) (e.g., Times, Georgia, Cambria, Courier).
• Decorative and unusual fonts should be avoided for readable content in columns of body text. These fonts may be used for headers or other stand alone items, provided they are clearly legible.
• Due to the vast variety of font designs, designers should visually compare an unusual font to a standard font such as Helvetica, choosing a sie and weight of Helvetica that most closesly matches the appearance to determine the appropriate contrast percentage.

Expected Results

• #5 is true.

Resources

SAPC Math

	Rlinbg = (sRbg/255.0) ^ 2.218
	Glinbg = (sGbg/255.0) ^ 2.218
	Blinbg = (sBbg/255.0) ^ 2.218

	Rlintxt = (sRtxt/255.0) ^ 2.218
	Glintxt = (sGtxt/255.0) ^ 2.218
	Blintxt = (sBtxt/255.0) ^ 2.218

	Ybg = 0.2126 * Rlinbg + 0.7156 * Glinbg + 0.0722 * Blinbg
	Ytxt = 0.2126 * Rlintxt + 0.7156 * Glintxt + 0.0722 * Blintxt 

Predicted Contrast

The Predicted Visual Contrast (SAPC) between a foreground color and a background color is expressed as a percentange and is calculated by:

//  Constants for Basic SAPC Version:

sRGBtrc = 2.218;	// Linearization exponent**

normBGExp = 0.38;	// Constants for APCA Power Curve Exponents.
normTXTExp = 0.43;	// One pair for normal text, dark text on light BG
revBGExp = 0.5;		// and one for reverse, light text on dark BG
revTXTExp = 0.43;

scale = 1.618;          // Scale output for easy to remember levels

blkThrs = 0.02;		// Level that triggers the soft black clamp
blkClmp = 1.33;		// Exponent for the soft black clamp curve

//  Calculate Predicted Contrast and return a string for the result

if Ybg > Ytxt then {
    Ytxt = (Ytxt > blkThrs) ? Ytxt : Ytxt + abs(Ytxt - blkThrs) ^ blkClmp;
    SAPC = ( Ybg ^ normBGExp - Ytxt ^ normTXTExp ) * scale;
    return (SAPC < 0.12 ) ? "LOW" : str(SAPC * 100) + " Lc";
  } else {
    Ybgg = (Ybg > blkThrs) ? Ybg : Ybg + abs(Ybg - blkThrs) ^ blkClmp;
    SAPC = ( Ybg ^ revBGExp - Ytxt ^ revTXTExp ) * scale;
    return (SAPC > -0.12 ) ? "-LOW" : str(SAPC * 100) + " Lc";
}  
    

Glossary

• Light — visible light is energy in a narrow range of frequencies or wavelengths that can be detected or sensed by “photo sensitive cells” in the back of the eye.
• Color — color is not real, but a perception or interpretation by visual processing in the brain (in the brain’s visual cortex) of stimulus from photosensitive cells in the eye.
  • Hue — refers to a particular color sensation, i.e. red, green, yellow, blue, etc. Hue does not exist in reality, it is solely the perception of the visual system responding to light of different frequencies.
  • Saturation — the color intensity or purity, reduced by:
    • tint (add white),
    • shade (add black),
    • tone (add grey)),
• Brightness — a relative perception, see also perceptual lightness.
• Luminance (Y or L) — a physical measure of visible light intensity. Luminance is mathematically linear as light is in the real world.
• Perceived Lightness (L*) — the perception of physical light intensity. Perceptual lightness is mathematically nonlinear in regards to light in the real world, however, some perceptual models attempt to provide a mathematically linear version of perception which then presents light as non-linear. The symbol L* refers to CIE L*a*b*, and should not be confused with luminance L.
• Luma (Y´ prime) — is a gamma encoded, weighted signal used in some video encodings. It is not to be confused with linear luminance.
• Gamma — or transfer curve (TRC) is a curve that is commonly applied to image data for storage or broadcast to reduce perceived noise and improve data utilization.
• Contrast — is a perception of the difference between two objects/elements. There are many forms of contrast, and the different types of contrast interact with and are affected by each other as well as being affected by other aspects of vision.
  • Lightness contrast: the difference in lightness and darkness between two items. This is a particularly important form of contrast for information such as text.
  • Spatial contrast: in other words contrasts of size. Size contrasts directly affect the perception of lightness contrasts.
  • Hue contrast: the perception of different light frequencies. Hue contrasts are three times weaker than lightness contrasts, and some people have problems perceiving some hues, so hue should never be a primary design contrast.
  • Positional contrasts: the distance and/or orientation between objects is important in object recognition and identification.
  • Temporal contrasts: contrasts of time, speed, and change.
• Visual Acuity — acuity refers to the ability of the eye’s optics to focus light onto the photoreceptors on the back of the eye.
  • Poor acuity is usually understood as blurry vision or an inability to focus.
• Spatial Frequency — in a practical sense, this refers to the weight of a font, or the stroke width. A thinner font or narrower stroke width is a higher spatial frequency than a bolder or thicker stroke. Higher spatial frequencies require more luminance contrast to be visible than lower frequencies, such as a very bold large headline.

Changelog

• 20 January 2020 — New Method
• 20 February 2020 — Revise all tabs for a more clear definition. Revise Code Tab adding the complete SAPC example tool. Revise Description with plain language understanding of contrast and moving math to the resources tab. Minor revision of Tests for clarity. Revise Resources, presenting the math more completely with corrected pseudocode and adding a glossary of terms.