Visual Perception Experiments
CE17 — SAPC-7 Polarity & Uniformity Evaluation
and are intended for desktop viewing on a standard sRGB monitor.
WAI/WCAG Contrast Research
Polarity & Uniformity Testing — Updated Dec 15, 2019
This is a demonstration of the "SuperSymmetry" of the SAPC-7 algorithms regarding Contrast Polarity. SAPC generates the same contrast percentage (as a signed negative) for reverse polarity for the same perceptual contrast, even when inverted. In other words, a -40% is light text on dark, but with a similar contrast look/feel as 40% for dark text on light. (At least in a general sense — contrast is a function of so many variables such as light adaptation absolute prediction is challenging).
SAPC In A Nutshell
SAPC is a set of contrast assessment algorithms, and the product of substantial research into vision and color science, derived from the latest in image and color assessment models (CAMs). This page and the other CE17 experiments demonstrate some of the key features of the new contrast method, which are:
- Perceptual Uniformity at a given contrast percentage for luminance in the range of Photopic vision (i.e. daylight),
- Perceptually Symmetrical reporting of contrast for positive and negative contrast polarities,
- Contrast Standards are an easy to remember set of percentages, and will seem familiar to the previous WCAG standard, and
- This (Basic) version easily tests two colors, in a manner similar to the old version (but SAPC uses correct math to avoid creating false fails and false passes.)
In addition, SAPC is extensible and can have features added (several already have the inputs set as constants, pending a future revision). For instance, future versions will be capable of scalar compliance, so designers will not be restricted to a single level. And important psychophysics such as spatial frequency and relative light adaptation are being added to the predictive model, as well as exciting new technologies that are in current development.
This is a chart of the contrast results for the test patches on this page. The solid lines are SAPC, blue is normal polarity, and magenta is reverse polarity (light text on dark BG, or WoB). As you can see the positive and negative contrast values are tightly tracking each other (reported error is less than ±0.5%) until we run into dark/black and mesopic vision.
This is the simplest version of SAPC, without any compensation or adjustments in the high end, i.e. no soft clip or boost for disability glare. On the low end this simple version also has no added/separate black level compensation for mesopic vision. But in a way this can be seen as beneficial for content authors because it results in a very subtle contrast increase for low contrasts of very dark colors.
Notice also the Mod Weber (green dotted) and WCAG (red dotted) plots for reference. WGAC is clearly over-reporting the contrast, an unfortunate cause of false-passes. Both normal and reverse SAPC hug tightly to the target 40% contrast line.
This shows the power curves for SAPC. The yellow line shows luminance (light) for the brightest color of a pair. This chart is linear as to light, and thus non linear as to perception. The SAPC perception curves relate to Steven's Law which posits a psychophysical relationship where the psychological magnitude of a sensation is proportional to a power of the stimulus producing it. (S.Stevens circa 1957)
Steven's law is similar to Weber–Fechner law, (Fechner circa 1860) and Weber Contrast is commonly used in research. But while Weber contrast may work well for reflected stimuli (i.e. signs), it fails to accommodate the myriad of perceptual & context related issues in viewing a computer monitor.
Steven's law indicates different exponents for different sensory types and contextual conditions (i.e. point source light vs large field). We use that premise in a manner similar to Fairchild's R-LAB, such that the exponent for a particular curve is assigned based on certain contextual conditions.
This shows the perceptual uniformity of SAPC. Normally, light (Y or L luminance) would be a straight line, but this chart is linear to perception, so the luminance (yellow) line is curved. For a perceptually uniform environment, the linear XY plot of the perception curves should show them as a straight line as they are here, and for perceptually uniform contrast the (now straight) lines for the two colors should be parallel as shown.
In short, the simplest description is to linearize sRGB using a 2.218 exponent[1], then apply the sRGB spectral weighting to get Y luminance. The appropriate SAPC exponents depend on context, such as if your are using dark text on white, or light text on dark. Then convert to perceptual lightness using the appropriate SAPC exponent:
SAPC Ultra Simplified: LSbackgnd = (sRGBbackgnd2.218 * SpectralWeighting)SAPC_backgndExponent LStext = (sRGBtext2.218 * SpectralWeighting)SAPC_textExponent
For the pair of luminance values plotted as straight & parallel lines, it is easy to determine contrast by the simple Euclidian distance between the two colors. In this case (two greyscale values) it is just the simple mathematical difference, as in
CPredictedContrast = LSbackgnd - LStext
Order of operations is set per the use case, subtracting text from background luminance. For dark text on a light background, this generates a positive percentage, and for reverse contrast of light text on a dark background, the percentage generated is negative.
The Test Panel (Panel Four) Below:
In this test, the center point of contrast perception revolves around the brightest color in each pair, so that the BoW and WoB both share the same lightest color, the dark colors are of course different to match contrast. The target contrast is a low 40% to make contrast variations more evident.
The first two digits next to each test patch is the color of the text, then the background. For instance, 5A:C3 means the text color is #5A5A5A, and the background color is #C3C3C3. The Advanced Perceptual Contrast percentage is listed immediately under the CSS color HEX values.
It is important to keep in mind that the simple version of the SAPC used in this test does not directly consider some psychophysical contexts, such as spatial frequency, which is in development as a near-future feature.
There is more discussion after the test panel(s)
FOOTNOTE: 1) Because we are not doing "image processing" but instead seeking to predict what a monitor will do, it is more correct to use a simple exponent and not the piecewise sRGB linearization. This is partly because monitors use a simple exponent as provided in the IEC specification and the piecewise method was developed for image processing applications to prevent math problems with an infinite slope at zero. The very low level linear section of the sRGB TRC is not useful for what we are doing, which is to predict contrast on an sRGB monitor. Using a simple exponent is more accurate and also simpler for this use case.
Test Panel FOUR
CE17 Polarity Series
SAPC-7 Values Generated/Evaluated Dec 15, 2019
POLARITY TEST Series 4: WoB and BoW Share the Same Lightest Color • Demonstration of SAPC-7 Symmetry of Contrast Polarity • |
||||||||
00:30
36.8%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
30:00 |
|||||
30:00
-30.0%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
00:30 |
|||||
07:3C
40.0%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
3C:00 |
|||||
3C:00
-37.6%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
07:3C |
|||||
14:49
39.8%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
49:0E |
|||||
49:0E
-40.0%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
14:49 |
|||||
23:58
39.7%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
58:21 |
|||||
58:21
-39.7%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
23:58 |
|||||
31:67
40.0%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
67:32 |
|||||
67:32
-39.7%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
31:67 |
|||||
41:77
39.7%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
77:43 |
|||||
77:43
-39.9%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
41:77 |
|||||
51:88
39.8%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
88:55 |
|||||
88:55
-39.7%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
51:88 |
|||||
61:99
39.8%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
99:66 |
|||||
99:66
-39.9%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
61:99 |
|||||
71:AA
39.8%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
AA:77 |
|||||
AA:77
-39.8%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
71:AA |
|||||
80:BB
40.3%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
BB:87 |
|||||
BB:87
-40.1%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
80:BB |
|||||
90:CC
40.1%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
CC:97 |
|||||
CC:97
-40.3%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
90:CC |
|||||
A0:DD
39.8%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
DD:A7 |
|||||
DD:A7
-40.3%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
A0:DD |
|||||
AF:EE
40.1%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
EE:B7 |
|||||
EE:B7
-40.2%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
AF:EE |
|||||
BE:FF
40.4%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
FF:C7 |
|||||
FF:C7
-39.9%
|
This is a Polarity Test Patch |
This is a Polarity Test Patch |
BE:FF |
|||||
••• End Panel Four — Series: CE17_polarity •••
Notes:
In reviewing the test examples on this page, here are a few useful things to consider:
- For each row of 4 test patches, the two patches on the left use the exact same colors (grays) as the two patches on the right. The upper left patch is identical to the lower right patch.
- You can see the effects of contrast adaptation — stare at a patch for at least 5 seconds, does the contrast seem to increase? In many cases it will.
- If you want to compare patches, open the same page in a second browser window and set them side by side. Try to look between them when judging contrast. Notice that it's probably easy to judge when the contrast is close, such as the next step or two — but comparing the very bright directly against the very dark isn't easy. FWIW, the patches were assessed by trained observers on highly calibrated monitors, using the "step by" technique, where only close neighbors were assessed for contrast parity. When judging contrast, don't forget to let your eyes adapt to both light and contrast.
- The background is white on the left, middle grey (#777) in the middle and black on the right. This directly affects perception. Notice for instance:
- The dark patches may be hard to read against the left white BG, and glare in the eye may be a problem.
- The light grey patches will seem brighter on the right of the screen, when against the black.
- Against the black, the DARK patches appear to have higher contrast text.
- Look at a patch against black, then glance at a the same row against white. Notice that at first, the patch against white seems lower contrast. but if you fixate and stare at it for a few seconds, notice how the contrast seems to increase. This is your eye adapting to the brighter white background.
- Notice the dark examples are difficult to view against the white BG.
- Notice that with the light text on dark patches, the light text for a given row looks brighter against the black background than the same row against the white background.
- This is also an example of perceptual uniformity within a "band" of contrast. But notice when it gets very dark, a few things happen:
- The very thin font for "This is a Polarity Test" becomes harder to read, though the contrast may seem consistent for the bolder "IcyATOMsizedgap". This is because as luminance drops, the contrast sensitivity of the eye also drops, losing sensitivity in the high frequencies (i.e. thin fonts) first.
- Because human vision is so sensitive to spatial frequency, the very thin fonts and small stimuli will vanish first.
- It should be noted that the contrast used for these test patches is overall fairly low (set about 40% SAPC level), done intentionally to make these issues more obvious. In practice, 40% should only be used on a big bold headline or on a non-text item.
- Moreover, this experiment is "perceptually uniform" for the DIVs/TDs that contain the text, but the text (especially the thin font) clearly degrades with luminance. This underscores the need for standards that consider SPATIAL FREQUENCY as well as luminance, all in addition to contrast.
Analysis
Overall this is proof of the validity of perceptual uniformity and symmetry of contrast polarity of the SAPC7 algorithm. At the same time, it clearly demonstrates that as luminance decreases, so does spatial frequency sensitivity (i.e. thin fonts disappear at lower contrast and luminance). this has important implications for impairments accessibility.
The main take away here is the fact that spatial frequency, luminance, and contrast are inseparable, codependent stimuli, and it is therefore unreasonable (and incorrect) to set standards without considering them in a unified theory of visual processing.
For upcoming standards, we are working on a scalar methodology to encompass all of these aspects of vision into a single easy to use test.
POLARITY: Regarding the demonstration & comparison of normal dark-text on light (BoW), versus reversed light-text on dark (WoB). When adjusted to be essentially equal in contrast perception, the color distance for WoB is shorter for brighter colors, by as much as 8 or more code values in 8 bit sRGB. (Dependent on some factors, such as SF and Gamma).
On the other hand, with dark colors, it appears that normal dark text on a lighter background has a higher perceived contrast for a given set of colors.
It should be noted that there is a difference in terms of reference context: comparing the two contrasts based on having a common lightest color tracks differently from two colors with a common background color, etc. On this page, the brightest color is the common color between the polarity pair. On request, we have pages showing the pivot on darker or common background. Those experiment links are off to prevent confusion.
This means that the "physical" contrast as measured is different than the perceived contrast as seen. The implication is that any contrast algorithm should compensate for different contrast polarities due to the differences in perceptual contrast.
Evaluations/discussions based on observations made by trained observer(s) using several different calibrated sRGB displays. More elaborate evaluations using a larger sample size of subjects and display types is forthcoming.
Glossary
CONTRAST: As used on this page, mainly it means the perceived difference between two colors displayed on a computer monitor. However, it's useful to point out that “Contrast” can be used to describe the differences of other perceptions: Contrast of size, contrast of position, contrast of speed, etc.
PERCEPTION: As it happens, perception is very much a mental attribute. That is, it happens in our brain. We perceive things a certain way, but what we perceive is essentially representational and not an absolute quantity of what we're seeing, feeling, or hearing. The important understanding here, is that what we perceive is subject to our neurological system's interpretation of the physical stimuli. This is where the term “psychophysics” comes from. Partly to do with stimulus in the physical world, and partly to do with how our brain interprets it.
POLARITY: In this context Polarity applies to the values of a background and the stimuli. In other words, is it dark text on a light background, or light text on a dark background.
BoW and/or NORMAL mode: means dark text on a light background (normal mode). Confusingly some researchers call this negative contrast, others call it positive display. I'm pushing to move toward “NORMAL” to describe black print on white (or maybe "paper mode") and then “REVERSE” to describe light text on a dark BG, which is how people often describe that.
WoB and/or REVERSE mode: means light text on a dark background (reverse mode).
WCAG: Web Content Accessibility Guidelines. In the context used here, I refer to the math used for the 1.4.3/1.4.6 contrast assessments, which is essentially just a simple ratio of luminance between two sRGB colors with a small offset.
SAPC: The “APC” stands for “Advanced Perceptual Contrast”, the “S” is either for “sRGB” or "Spatial" or “Somers” (name of the inventor ... ehrm, that would be me) ... it’s SAPC either way :) ... This is Major Iteration 7. The companion project is S-LAB, an L*a*b* type colorspace designed specifically for accessibility and emissive display uses.
