Maureen Stone, StoneSoup Consulting
The following reflects my efforts to comprehend the concept of contrast as it might be applied to applications such as text and graphic legibility. Since many designers use transparency (alpha blending) to control the perceived contrast of overlaid graphics such as grids, I've spent some time looking at the relationship between alpha and contrast as well. Ultimately, I hope to publish this all in a more formal form.
Luminance contrast is a perceptual measure that defines the difference between the perceived lightness of two colors. Contrast, more broadly, is a difference metric and can include differences in hue, but for this discussion, we will consider only the difference in perceived lightness. High contrast means the difference is large. In visual design, contrast controls legibility and layering. Therefore, design principles defined with respect to contrast metrics can provide a framework for automatically controlling these important properties.Fundamentals
A uniform contrast scale would allow visual differences to be specified numerically. An ideal scale would be uniform throughout its length. This would allow design rules to be specified in terms of contrast steps. Defining a uniform contrast scale is complicated, however, because the perception of contrast depends both on the size of the objects being viewed and the light/dark adaptation of the visual system.
Dependence on size
How contrast varies as a function of size (spatial frequency) can be demonstrated using a diagram such as shown in figure 1. This image is created by plotting a sinusoidal function of lightness, varying both the frequency (x axis) and the contrast (y axis).
Figure 1.Campbell-Robertson contrast sensitivity chart. Horizontal axis is spatial frequency, vertical axis is contrast. From the Izumi Ozawa, Berkeley Neuroscience Laboratory (Ozawa has a website where you can create your own)
Looking at Figure 1,the sinusoidal grating should be visible underneath a curve similar to those shown in Figure 2.
Figure 2. Contrast sensitivity as a function of spatial frequency, plotted for different ages. (USD website)
The contrast sensitivity function (Figure 2) predicts the threshold contrast for visibility for a specific spatial frequency. Where the function peaks depends on the age of the viewer, but maximum sensitivity is typically in the range 3-5 cycles/degree (ideal spatial frequency decreases with age). For reference, your thumbnail at arm’s length is about 1.5 degrees, and a single pixel on a 72 dpi display viewed at 24” is about 1/30 degree.
Dependence on adaptation
The human visual system adapts to the ambient light level, which allows us to see in viewing environments as different as moon-lit night and bright daylight. Imagine a pattern in dark gray on a black computer screen. If you’ve been sitting in a dim room looking only at the black screen, the pattern may be perfectly visible. Walk in from out-of-doors, and it may take some seconds before you can even find the computer screen, much less see the pattern on it. This is adaptation.
Weber’s law states that greater illumination differences are required to be perceived for greater luminance levels of adaptation. This can be written as:
ΔY/Y = constant, where Y is the symbol for luminance.
To return to the example above, the illuminance of a darkened display is a small number, so only a slight increase in brightness is needed to create a visible difference. If the display is brighter, then a correspondingly larger step will be required required.Common Metrics
Contrast can be specified as ratio, such at 3:1. An N:1 ratio means that dividing the brighter luminance by the darker luminance gives a number that is equal to N. This can also be specified as an equation:
Cr = Ymax/Ymin
For display systems, contrast ratios are white:black, and are often highly inflated by neglecting the impact of ambient illumination under typical viewing environments.
Another common metric is Weber contrast, a direct application of Weber’s law above, where the viewer is assumed to be adapted to the background:
Cw = (Yb – Yf)/Yb or 1 – Yf/Yb
Both of these metrics will become very large when the background is dark (divide by a small number). They will also become dramatically smaller as ambient illumination increases, which adds a constant to both the numerator and denominator of the fraction. For example, if the luminance of black is 0.5 cd/m2, and the luminance of white is 200 cd/m2, then the contrast ratio is 400:1 (typical for a flat panel display). If, however, you add 1.5 cd/m2 of ambient light, the ratio drops to 201:1.
Weber contrast is claimed to be accurate for small dark symbols on a light background, where the viewer is assumed to be adapted to the background. Positive contrast indicates dark symbols on a light background, negative contrast the inverse.
Michelson contrast assumes the viewer is adapted to the sum of the background and foreground, and therefore is well-suited to predicting the contrast of grids and other patterns without a clear background and foreground:
Cm = (Ymax – Ymin)/(Ymax+ Ymin)
This specification returns a value between 0 and 1, frequently specified as 0 to 100%. It is also much more robust under the addition of ambient illumination
It is easy to convert between a ratio contrast specification and Michelson contrast. Simply substitute NYmin for Ymax. in the equation. A 3:1 contrast ratio, for example, is equivalent to a 50% Michelson contrast. Michelson and Weber contrast will yield similar values if Yb is significantly less than Yf, but not otherwise. Algebraic manipulation can create general conversion formulas. Note that there are two cases, one where Yb is Ymin and one where it is Ymax.
It is reported that none of these formulations predict the appearance of light symbols on a dark background as accurately as they do the inverse (dark on light). This is partially the mathematics (divide by a small number), and may also indicate that adaptation is not as well modeled for the light on dark case.
Metrics based on uniform color spaces
A perceptually uniform color space such as CIELAB, CIELUV, or Munsell are designed such that for a given point (color) in the space, a unit step in any direction gives a color that is just noticeably different from the original one. That is, given two colors specified as points in a uniform color space, their perceived difference is proportional to the Euclidean distance between them.
All three of these spaces have perceived lightness as one dimension. In the Munsell space, this quantitiy is called Value and in the CIE spaces it is called L*. L* is a nonlinear function of luminance defined to be equivalent to Munsell value, so other than the range (0-100 for L*, 0-10 for Munsell Value), these scales are the same.
L* is normalized to a “reference white” so that it is always bounded to lie between 0 (black) and 100 (white). The viewer is assumed to be adapted to this white value.
The formulation for L* is:
If Y/Yn > 0.008856, then L* = 116(Y/Yn)1/3 – 16
Otherwise, L* = 902.48(Y/Yn)
where Y is the luminance of the color, and Yn is the luminance of the reference white.
Note that the scale, offset and linear segment near zero keep L* from being a simple cube root function of Y/Yn. The closest power function (established numerically by curve fitting) is actually (Y/Yn)1/2.43.
Contrast can be specified simply as:
CL*=L*max – L*min
Unlike the metrics above, CL* includes a specification for the adapting luminance that is distinct from the to colors being compared. If we assume Yb = Yn, and use the power function approximation to L*, we can see that:
Cw ±1 = Y/Yn
CL* ±1 = (Y/Yn)1/2.43
Where whether to add or subtract 1 depends on whether the background is lighter or darker than the foreground.
The use of delta L* to define contrast has been used informally by designers and color engineers, but I’ve not yet seen a formal evaluation of it I’ve used it in my work, and it is suggested by Larry Arend on the NASA Color Usage website (http://colorusage.arc.nasa.gov). Recently, however, a paper [Zuffi et. al] evaluated the threshold for readability of small text on a web page in terms of CL* They reported that between 25 and 30 appeared to be the threshold for legible text. This corresponds to a Michelson contrast of around 50%, or a contrast ratio of 3:1, which are generally accepted as the minimum contrast needed for text legibility.
The accuracy of the CL* specification will be influenced by adaptation.To return once again to the barely perceptible gray on a dark screen, a typical conversion from pixels to L* would use the display white as Yn. However, a viewer sitting in a dimly lit room staring at a dark gray symbols on a black display is more likely adapted to the room illumination than to the display white.
Alpha blending is supported on most display controllers and is offered in many applications as a way to provide transparency in computer generated graphics. Alpha controls a simple linear interpolation between a foreground and background pixel. This is usually written:
c = af+(1-a)b
where f is the foreground pixel value (ranging from 0 to 1), b is the background pixel value, and a ranges from 0 to 1. An a value of 1 is opaque (equals f), and a value of 0 is fully transparent, rendering the background color (b).
Geometrically, this is a linear interpolation between f and b, which is applied to the pixel’s red, green and blue values independently. The interpolated pixels follow a line whose y intercept is b, and whose slope is (f-b), or:
c = (f-b)a + b.
When the foreground color is black (f=0), alpha blending reduces to a linear interpolation between the background (b) and black (0), or: c = (1-a)b. Similarly, if the foreground is white, the resulting equation is: c= (1-a)b +b
Visual designers often adjust the alpha value of overlaid graphics to create a visual layer that is legible yet unobtrusive. How does alpha relate to perceptual contrast?
From alpha to contrast
On a display, the relationship between a pixel value and luminance is computed by first mapping the pixel to intensity, then computing luminance from a weighted sum of the R, G and B intensities. Let’s call this function Y(p). We want an expression for contrast in terms of Y(b) and Y(c), where c= (f-b)a + b. Rather than attempt a general solution algebraically, let’s look at some interesting special cases.
Let’s assume for the following discussion only achromatic colors, black, gray and white. Colorimetrically, we will be assuming f and b generate scaled values of the same color spectrum.
Case 1: Y(p) = p
Weber contrast can be written:
Cw = 1 – Yf/Yb
In terms of a:
Cw = 1 – ((f-b)a + b)/b
Cw = (b-f)a/b
For a constant (b-f)/b = k
Cw = ka
If f=0 (black)
Cw = a
That is, Cw is independent of the background and proportional to alpha.
Michelson contrast in terms of a is a little less simple:
Cm = (b-f)a/(2b-(b-f)a)
However, if f = 0, Michelson contrast is also independent of the background and can be predicted purely from alpha.
For Yf = (1-a)b:
Cm = (b - (1-a)b)/ (b+ (1-a)b)
Cm = a/(2-a)
Y(p) = p is true for a display system that has been “gamma corrected”to make pixel values proportional to screen intensity. To be precise, Y(p) = kp, where k converts from intensity to luminance. The value of k depends on the color, but is constant for all intensities of that color (same spectrum).
Case 2: Y(p) = pγ
For displays, Y(p) can often be approximated with a power function, pγ, where γ is the “gamma” of the display.
Cw = 1 – ((f-b)a + b)g/bg
Cw = 1 – ((f-b)a/b + 1 )g
If f = 0, then:
Cw = 1 – (1-a)g
Again, Cw is independent of the background and can be predicted purely by alpha. As in the linear case above, these equations assume that f and g are simply scaled values of the same spectrum.
If f = 0, Michelson contrast is also independent of the background and can be predicted purely from alpha.
For Yf = (1-a)gbg:
Cm = (bg - (1-a)gbg)/ (bg+ (1-a)gbg)
Cm = (1 - (1-a)g)/ (1+ (1-a)g)
Case 3: L* and a, Y(p) = pg
To look at the relationship between a and CL*, we will assume Y(p) = pg and that L*(Y) is (Y/Yn)1/2.43
For Yb > Yf :
CL* = (bg/Yn)1/2.43 – (((f-b)a + b)g/Yn)1/2.43
On a display, luminance is usually normalized such that Yn = 1
CL* = bg/2.43 – ((f-b)a + b)g/2.43
If Yf > Yb, the difference is reversed. In many cases, the sign is not important so we can use the absolute value as our metric:
CL* = abs(bg/2.43 – ((f-b)a + b)g/2.43)
As before, Y(p) = pg is accurate only when f and b are the same scaled spectrum.
For f=0 and Yf = (1-a)gbg:
CL* =abs( bg/2.43 – (1-a)g/2.43bg/2.43)
CL* = bg/2.43 abs(1 – (1-a)g/2.43)
Unlike the previous contrast metrics, CL* is not independent of background when f=0.
If the display gamma is 2.43, p = L*/100, for p in 0 to 1 :
CL* = abs(b – (f-b)a + b)
CL* = abs(b-f)a
This is interesting because 2.42 is only a little larger than the 2.2 recommended by sRGB and common to PC systems (1.8 is more common for Macintosh display systems).Limits to these approximations
Power function approximations to Y(p) and L* are weakest for the dark colors. Similarly, contrast metrics tend to be weak for dark backgrounds. So, we’re not improving things for modeling contrast on dark backgrounds.
On CRTs, black to white is a scaled spectrum, similarly for any scaled RGB triple. However, on LCD displays this is less accurate, especially as the color gets darker. So, once again, biggest error is in the dark colors.
Contrast and text legibility
Text legibility is typically defined in terms of luminance contrast. ISO recommends 3:1 minimum, and 10:1 for small text. According to a recent paper [Zuffi et. al], the threshold for readability of small text appears to correspond to an L* difference between 25 and 30.
ISO recommends 3:1 minimum contrast for legibility, with 5:1 preferred. For "small text," 10:1 is recommended. Now, I don't have their metrics for size, but my experience suggests that 5:1 is sufficient for regular body text in a document (typically 10-12 points), but the labels on pill bottles (5-8 points) definitely qualify as "small text," which is why it is so annoying they are often printed in low contrast colors.
On an sRGB display, a contrast ratio of 10:1 for colors on a white background is equivalent to an L* value of 37.8 (Photoshop will display this as 38). Lower L* values have higher contrast with white. Colors used for large symbols and borders can be lighter; an L* value of 48 will create sufficient contrast (6:1). Using Zuffi et. al's guidelines, L*=70 is minimally legible on white (I've used 80 successfully, however). 3:1 corresponds to an L* value of 64. Color contrast does contribute to legibility, so so these values will differ some with hue. Saturated blue on a black background, for example, is not legible at 6:1, whereas yellow text with an L* value of 90 is legible on a white background.
Here are some colors that would be 10:1 on an sRGB display. They correspond roughly to the corners of the RGB color cube, which are people's common defaults for color in information display. Use these instead, if you must color your text. As can be seen in the example, it is much easier to distinguish the color is you use it as a background or border, rather than as text.
These colors would all have a contrast ratio of 10:1 on a white background on an sRGB display. Font is Verdana, was originally 12 points (your size may vary). String below shows the colors in your default browser font.
10:1 Colors: Regular Regular Regular Regular Regular Regular Regular Bold Bold Bold Bold Bold Bold Bold
|89 89 89||136 73 0||182 0 0||161 28 128||108 42 219||0 69 231||0 97 123||15 104 0|
|0 0 35||32 100 53||0 100 71||315 83 63||262 81 86||222 100 91||193 100 48||111 100 41|
|38 0 0||38 22 47||38 62 52||38 61 -23||38 65 -78||38 47 -85||38 -14 -21||38 -43 43|
RGB, HSV and Lab values for the 10:1 contrast colors. Assumes an sRGB display.
Contrast is a relative metric, but the human visual system needs a certain minimum amount of light to function. The Federal Aviation Requirements for text legibility [Xing] recommends a Michelson contrast of 30% for text legibility, but only if one of the two values is at least 10 cd/m2. All formulations for contrast should include a similar limitation.
Silvia Zuffi, Carla Brambilla, Giordano Beretta, Paolo Scala, Human Computer Interactions: Legibility and Contrast, Proceedings of ICIAP 2007. Available through the IEEE Computer Society digital library. (http://www.computer.org)
Jing Xing. Developing the Federal Aviation Administration’s Requirements for Color Use in Air Traffic Control Displays. DOT/FAA/AM-07/10, May 2007. Online at http://www.faa.gov/library/reports/medical/oamtechreports/2000s/media/200705.pdf
Larry Arend. Color Usage Guidelines: Contrast. Online at http ://colorusage.arc.nasa.gov/luminance_cont.php