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
- 3 The Lighter Side of Light
- 3.1 BONUS SCIENCEY STUFF!
- 3.2 The CIE Saga
- 3.3 Illuminating the Differences
- 3.4 "Let's Make Confusing Terminology!"
- 3.5 A Light Story Just For Pun
- 3.6 Partial Bibliography and Reference Cites
- 3.7 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:
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.
The Lighter Side of Light
- Warning: Excessively Gratuitous Puns Ahead
BONUS SCIENCEY STUFF!
- Wait, do two lights make a dark? The answer may surprise you!
- This ever-so-special section is based on the well-known educational theory that you don't really understand something until it can make you laugh, an educational theory by the way that I just made up.
- Oh, and do two lights make a dark?
- YES of course they do, if they are so bright they blow a fuse.
FUN With Confusing Terms!
- Why have easy-to-understand terms for science? Let's make them all confusing and sound the same!!
- As an example. I have noticed that "luminosity" is often incorrectly used when the term "luminance" is the more correct one (perhaps from that defunct puzzle site of the same name??) and I believe I've run across at least one or two books that used it in the wrong context. One I think is a fairly old edition of the NAB Engineering Handbook, although I might be thinking of another incorrect use relating to Y‘ in a paper supporting the contrast standard for a certain nation with tiny cute marsupial bears. And why not? Luminosity SOUNDS "sciencey" (and is even a real term, but it defines a different measure). Let's see if we can answer this.
The CIE Saga
Lstar WARS: Ep I • The Luminosity Menace
- A long long time ago (c.1931) in a land far far away, where breakfast is a croissant and a glass of jus d'orange, the CIE had figured out that the human response to light frequencies is shaped like a bell curve, and they called it the "luminosity function." They didn't call it the "Bell Function" as they were still sensitive to that whole Quasimodo thing, not to mention that back then AT&T was still called Bell Telephone® and they didn't want to infringe any trademarks.
- The CIE by the way is the Commission Internationale de l'Éclairagen which translates to the International Commission on Illumination, but we don't call it ICI or eye see eye even though that would be amusingly ironic, nor in emoji 👁🙈👀 or something like 🗺🏛💡... Anyway, CIE sets the standards for how the world sees color, for which they used observation data from about a dozen young white male British college students who happened to be stumbling about campus looking for some easy money, and twisting some knobs to match the color of one light to another light seemed like the path to easy money at least to buy a pint at the pub.
- Apparently no one seemed to notice that the world is mostly populated by "not young white British males" and in fact it is somewhat well known by both the people in the world that actually understand this stuff that the CIE's data has some well known flaws, especially in blue. The CIE knows this too, and despite all the people that know about this stuff all knowing there are problems, they aren't going to fix the problems because that would cause problems.
- Nevertheless those observations were averaged together to create the "standard observer" which is sort of a mathematical model eyeball that pretends to "see" colors the the way a human does. This led to things called "colorspaces" which are a big gob of numbers that assume to predict how we see colors, at least in a laboratory, such as CIE XYZ which predicts how we see colors if we are looking at a bright colored light through a tiny hole that takes of 2° of our field of view, which is about the size of your thumb if your arm is stretched out in front of you.
- Of course back then color spaces were not as important as they are today, in part because things like "color TV" and "computers" had not even been invented yet. In fact the CIE had to invent things like XYZ colorspace first so that other inventors could invent things like color television. The reason is what is needed to create color TV is what we color geeks call a "tristimulus colormodel." TRI meaning three and STIMULUS meaning the photons of light hit our retina, which coincidentally has three kinds of "color light" sensitive cones.
- As it happens, eventually people got tired of seeing Lucy's red hair as light grey and invented color TV. Along with the glory of living color on a tube, it was discovered that the XYZ colorspace was not modeling human perception, other than the spectral response that the CIE had initially called the "luminosity function."
Lstar WARS: Ep IV • A New Color
- A less long long time ago, (c. 1976) or about the time George Lucas decided to make the first Star Wars by starting at Episode IV because apparently he already knew episodes I — III were going to suck, the CIE released two new color spaces, LAB because "lab" sounds cool, and LUV because it was the mid 70's and there was that whole love thing going on. The CIE also realized that "luminosity function" sounded silly and renamed our human spectral response to the luminous efficiency function.
- CIE L*a*b* and L*u*v* both have an L* in common, but this is not the L of luminance, it is an L with an asterisk on it like this: L* and is often referred to as Lstar. Luminance L or Y as in XYZ are linear measures, as is light in the real world. By linear I just mean you can use simple math to describe light's behavior. For instance, if you want to triple the amount of light, just multiply it by three. So if you have 100 photons and triple it you end up with 300 photons. Simple.
- BUT the human eye/brain thingy is more complicated. If you triple the light the eye does not see a tripling. It does not even see a doubling. It sees just a modest increase. Human perception is non-linear relative to light.
- Through the use of Jedi Math Tricks we can use the power of the exponents so that L* is linear to human perception but not linear as to light. I won't show the full math, but the simple math is
- L* = Y0.452
- < insert epic space battle here ending by blowing up a light bulb >.
Illuminating the Differences
- Shedding Light on Arcane Terminology
- One of the problems climbing the learning curve toward understanding light and perception is the myriad of very similar sounding terms regarding light and colorimetry that mean very different things. I mean, there are a ton of similar sounding terms... or it would be a "ton" but fortunately light is so light it weighs nothing. Even if light is spectrally weighted it's still just massless particles that wave at you in that snarky way as they zoom by, just because they're light and they know they can get away with it.
- For instance, the term Illuminance is the amount of light falling onto a surface, commonly measured in lux, which is one lumen per square meter. Not a square meter of cough drops, it is a square meter of photons which are the "atoms of light".
- And here's where it gets a little tricky. If you illuminate an object, the light being reflected off the object is luminance measured in nits (or if you want to be more sciencey, measured in cd/m2), but illuminance is the amount of light striking the object measured in lux.
Double Bogus Round
- One trick to remember the difference by: Illuminance as a word starts with more "L"s and an "I" than luminance. Think of those extra Ls and I as little baseball bats that can STRIKE a surface with light.:......Or something. I may have been suffering from a lack of sleep when I came up with that analogy... 😳😎.
- Perhaps a better way to make this easilly remembered: ILLUMINANCE is the big strong beam of sunlight coming in the window and bouncing off the desk and walls. But when it does, it hits the desk really hard (it is going 186,000 miles per second after all), and when illuminance strikes the wood desk, the first I and the L get lodged in the desk's woodgrain... Now, only the letters LUMINANCE bounce off the desk. ...Or maybe that was a basebaLL that got hit by a pLaYer in Left field.
- More on that later, right now it's TIME FOR....Today's Episode of
"Let's Make Confusing Terminology!"
- luminarism and luminarist — refers to painting (e.g. Rembrandt)
- luminary — is a brilliant person, but also a body that gives light. So if that body was a painter, would they be a luminaryist?
- luminaria — is a mexican light (a candle in a paper bag) also known as how the house caught fire.
- luminaire — is a lamp. No genies tho — shockingly they all quit after Edison and Tesla/Westinghouse changed lighting to electrical.
- luminescence — is "low temperature" light (i.e. a glow-in-the-dark strip, not a light bulb. Glow-sticks on-a-string probably count... poi which is flames-on-a-string, not so much).
- luminesce — is the verb of luminescence. I always think of verbs as the spices of grammar. The spice must glow...
- luminosity — a quantity of radiation (light) per unit of time. This is used often in astronomy to define the brightness of a star. It also describes a website that conned users into thinking that playing puzzles online would turn them into an Einstein or or Tesla, but instead the users were being conned, not unlike how Westinghouse conned Tesla.
- luminous — emitting or reflecting light. Not to be confused with venomous. I learned that one the hard way.
- lumens — is a unit of luminous flux, the quantity of spectrally-weighted visible light emitted by a source per unit of time. And how do you weigh light anyway? Is it like that big scale at the doctor's office with the little slide-y thing? But we know it weighs nothing so is that why it's called "light"?
- ludens — A tasty cough drop, I like the cherry ones.
- luminance — This is a measure of light that comes out of a light per a unit area of light (like this computer monitor), or that bounces off a surface per unit area. Not to be confused with illuminance which is light falling onto a surface area. Or as Chris (SVGesus) said, "in colorimetry, the spectrally weighted light quantity, either relative (Y) or absolute in cd/m2 (L) and is linear in regards to light but not perception." (I'll add that L should not be confused with L* aka Lstar, which is perceptual lightness from CIELAB, which by the way has nothing to do with dolphins or little submarines.`
- luma — a term which I think was coined by Dr. Poynton to differentiate video encoded luma Y‘ (Y prime) which has a gamma curve applied, as opposed to Y (luminance) which is linear just like light in the real world — no curves except for the whole gravity-field time-space thingy.
- luna — the moon. See also, "lunatic" not to be confused with a luma tick which is someone that spends all their time focused on words that start with LUM. Like, Uh, Me.
- lux — The measure of light that comes out of a light AND hits a surface (but before it bounces off to be measured as luminance).
- So, Illuminance is the light that is hitting an object measured in the lux from the light that is sending the photons to the object, meanwhile the photons that bounce off the object are a little annoyed at being forced to change direction, as I'm sure you would be too, and they are measured as nits which are the same as cd/m2 of luminance.
- The slightly annoyed photons continue on their journey until they can make a b-line for your eyeball, and they zoom into your eye and that light that hits your retina is measured in trolands (symbol Td) which is the retinal illuminance.
- And there's a lot of photons. One lux is 1.27 × 1015 worth of photons, or 127 followed my 13 zeros.
- 1 lux = 1,270,000,000,000,000 photons.
- If I has a dollar for every photon in a lux, I'd be living in lux-ury.
And those are just the light terms that "start with LUM"
A Light Story Just For Pun
On the subject of Y‘ (Y prime), Y‘ is a gamma-encoded television signal called luma (the black & white part of the signal) and is thus completely different from Y which is relative luminance and is linear and not gamma encoded ... and get this: gamma is represented by the greek lower case letter gamma which is: γ ... But that "Y looking" greek letter is not the light but adds a curve to the light levels. Relative Luminance is the Y in the CIEXYZ colorspace which has nothing to do with the YMCA despite the use of 17 young men as the subjects of the original color matching experiment.
- So just so we're clear, Y becomes Y‘ Prime (like a Transformer) because of γ which Dr. Poynton did say had its disguises and which may seem like a coincidence from OUT IN LEFT FIELD except as we know WHY PLAYS LEFT field so never-minding the fact that TV frames are split into fields, we hit the LotterY again as L in Left field also stands for Luminance and if you apply the correct γ (gamma) curve exponent to L you create CIELAB's L*, the perceptual lightness we refer to as "L-star" because of the asterisk and not outer-space where there are real stars that twinkle shinY Light.
- And golly I know of a great word that can describe the light from stars, which is light over time, and clearLY the people that created the word dId NoT wAnT tO mAkE iT cOnFuSiNg In AnY wAy DiD tHeY, so they started that word with an L and they ended it with a Y and the word they came up with that describes light from stars is LUMINOSITY for measuring light over time and not to be confused with luminance which is light bouncing off an area, which itself is not to be consfused with illuminance which is the light falling onto an area, as opposed to luminosity's light over time, which is nevertheless useful for astronomers looking at stars but has little to do with L-star (despite its name) nor sealabs or lumaticks or glowsticks although glowsticks and poi can be fun under starY Light in the desert at Burning Man which has a verY iLLuminating final night on the pLaYa, which is held at FLY ranch, and was founded by a guy named LarrY, and since the 'man' burns on Labor daY weekend, the smoke blots out the stars so you can't measure their luminosity at all, but you can measure the luminance OF the flames of the burning man, and the illuminance FROM the flames TO the desert sands, and the luminance OF the desert sands that are being illuminated BY the flames.
And.... Those are possibly the weirdest two sentences I have ever written, if not the longest, but I was able to work in Burning Man somehow so there's that.
(We now return to some practical resources)
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.