Visual Contrast of Text Subgroup/Resources
- 1 Resources
- 2 Additional Useful Resources
- 2.1 Links to Offsite Resources Created by Team Members
- 2.2 InfoGraphics
- 2.3 Additional Examples
- 2.4 Partial Bibliography and Reference Cites
- 2.5 Participants
Moved from the Visual Contrast Subgroup page. This subpage includes the glossary, bibliography, and links to offsite team member materials. Also, "the lighter side of light" a light hearted look at lighting.
Normal Vision is a specific definition, and a clinical definition:
- Snellen acuity of 20/20 or lower (20/16 is "perfect" acuity, 20/200 is SSA disabled)
- Peli-Robson contrast sensitivity of 1.95 or higher (2.25 is "best")
- Farnsworth Munsell Hue Color TES of 60 or less (TES 0 is perfect)
- 100% Visual field with MD no lower than -2db (0 is best, -20db is SSA disabled)
- The age-related baseline normal is ages 20 thru 40.
- Below 20, contrast sensitivity is still developing, so _young normal_ includes a lower contrast sensitivity.
- Above 40, presbyopia is a normal development, so _mature normal_ includes a lack of near-distance acuity.1
Depending on the study, "normal" often includes "with refractive correction" if the correction can acheive the above scores. An example: "normal with correction needed for presbyopia". Presbyopia being "normal" for over age 40 for instance.
"Normal" is not "most perfect"
Because normal vision is specifically defined, it also provides a useful baseline relating to user needs. Normal vision has natural limitations that define minimum requirements for readability. From this foundation of normal vision user needs, we can then indicate the degree of additional accommodation needed for varying degrees of impairment(s).
Footnote (1) Presbyopia is not due to disease or degeneration, but due to the enlarging of the eye's lens to a point that prevents near focusing due to the reduced available distance for the ciliary muscles to work and pull the flexible lens into focus. Because it is cartilage, the lens grows throughout our lifetime (as do the ears and nose) increasing size and reducing the flexibility, resulting in presbyopia by the early 40s.
The CIE's canonical glossary can be seen here: http://eilv.cie.co.at/termlist and it contains the definitions and equations for CIE color spaces such as CIELUV.
- 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 sensation created by visual processing in the brain (in the brain’s visual cortex) from photosensitive cells in the eye as they respond to different frequencies of light.
- 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 or combinations of frequencies.
- The different frequencies of light can be compared to different frequencies of sound waves, where the left of a piano keyboard creates low frequency sound for instance.
- For visible light, red is a low frequency and blue is a high frequency, and green is about in the middle.
- 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. Brightness is a subjective sensation of an object being observed and one of the color appearance parameters of many color appearance models, typically denoted as Q. Brightness refers to how much light appears to shine from something. This is a different perception than lightness, which is how light something appears compared to a similarly lit white object. The antonym of brightness is dimness.
- 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, i.e. how light something appears compared to a similarly lit white object. 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. The antonym of lightness is darkness.
- 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.
Sensitivity Acuity and Impairments
- Contrast Sensitivity — usually refers to an individual's ability to perceive lightness contrast. At birth, contrast sensitivity is very low, and it takes about 20 years for an individual to develop peak contrast sensitivity.
- Contrast sensitivity impairments can be age related, the result of medications, neurological issues, retinal diseases, ocular degeneration such as cataracts, and other causes.
- 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.
- Acuity can be affected similarly to contrast sensitivity. And poor acuity can also reduce contrast sensitivity. Though contrast sensitivity impairments do not necessarily affect acuity.
- Spatial Frequency — in a practical sense, this refers to the weight and size 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.
Additional Useful Resources
Links to Offsite Resources Created by Team Members
- Evaluating Fonts:(Andy) - Evaluating Fonts: Font Family Selection for Accessibility & Display Readability. This is an informal preprint with many font samples evaluated under experimental conditions at the Myndex lab.
- Perception Experiments Page(Andy) - List of some of the experiments and related discussion that led to the development of SAPC. Some direct links to key findings:
- Direct link to the CE14 weight experiment results and discussion.
- Direct link to the CE17 results and SAPC overview.
Web Apps and Code Repositories
- APCA WebApp(Andy) - APCA simplified contrast tool, for live guidance to designers and developers.
- SAPC WebApp(Andy) - SAPC (APCA) contrast tool, lookup table for font size and weight, and examples.
- CVD Simulator WebApp(Andy)- Color Vision Deficiency simulator based on the Brettel research.
- Andy's Github repo - The APCA Source Code and Related.
- Luminance Contrast - Andy's brief and very generalized article on luminance contrast, written before the development of SAPC.
- Scope exploration for Contrast(Cybelle, Chuck, Andy) - where we were iterating content
- (Cybelle, Andy) Contrast Test strategies document
- Color Contrast Discussion (Andy) - highly technical about impact of color on vision acuity and related issues
- early draft of Color Contrast (Cybelle, Chuck, Andy) (example of new research, merging levels)
- (Cybel)Perception or Experience and Accessibility: A More Inclusive Paradigm
These info graphics were created by A.Somers to help explain some of the concepts related to readability of web content.
Critical Font Size Chart
Screen Pixel Density vs View Distance
This chart shows screen pixel density vs distance to maintain the CSS reference px relationship to arc minutes.
As can be seen, devices that are designed to be used closer such as a phone, is also designed with a higher pixel density, such that the relative visual angle of one CSS px remains the same. The reference is a desktop monitor at 28" with 96ppi or a phone at 12" with 224ppi all dresult in the same visual angle for a CSS px.
Contrast and Spatial Frequency
Conformance for Visual Contrast
The following examples demonstrate how much luminance each of the three sRGB primaries provides to the total. Blue hardly eny at all. Againt black, even maximum blue is unreadable.
Maximum red interestingly is in the perceptual middle of dark/light, so for normal vision it is about equally readable on either black or white. However, it is to be noted that some forms of CVD see sRGB red as 35% darker, so red on black may be a problem for them.
Green makes up the vast majority of luminance, so as can be seen, full green is much brighter than either full red or full blue. As a result, full green against white is unreadable, and it must be lowered substantially, by about 75% luminance.
Font and Color Examples
Smaller Examples This is just a smaller version of the example.
Partial Bibliography and Reference Cites
The following references are part of the work product of A. Somers 2019/2020 research into visual contrast and accessibility.
Neurological / Visual Cortex:
Monitor Technology Related
Clinical And Experimental
Color Vision Related Resources:
Interesting Concepts in Improving Accessibility:
Accessibility forIndividuals with Color Vision Deficiency
- Todd L.
Who Wrote All This Stuff?
- Andy: The text and graphic informational material on this page is written by Andrew Somers, copyright © 2019-2021 by Andrew Somers. All Rights Reserved.
- Bruce: Instrumental in developing the lookup and scoring models, and on the discussion tab.
- Cybelle: Wrote much of the early draft material, plus additional scope explorations, several of the linked files above as noted.