THIS PAGE IS DEPRECIATED

Please See the Perception Index

For More Current Studies



Original Page Below, Some Information Obsolete



Studies of WCAG Contrast Maths

This page is a live experiment into the issues relating to
contrast, perception, legibility, and accessibility in web design.

GitHub issue URL: https://github.com/w3c/wcag/issues/695

Notice: This page is not fully responsive.
It is intended for desktop viewing as font sizes
are set in REM for research purposes.

   This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #00007F
with a background value of #008DE0
This is a "FAIL" per W3C math at contrast 2.9:1
This is a "FAIL" with contrast 2.9:1

The values for this pair are Foreground #43A6A4
with a background value of #FFF
This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #747476
with a background value of #000
This is a "FAIL" per W3C math at contrast 2.9:1
This is a "FAIL" with contrast 2.9:1

The values for this pair are Foreground #AA59A2
with a background value of #FFF
This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #AEB7FF
with a background value of #00F
This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #000063
with a background value of #808080
This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #808080
with a background value of #000063
This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #757776
with a background value of #FFF
This is a "FAIL" per W3C math at contrast 2.9:1
This is a "FAIL" with contrast 2.9:1

The values for this pair are Foreground #FFF
with a background value of #E77B00
This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #6062F0
with a background value of #000
This is a "FAIL" per W3C math at contrast 2.9:1
This is a "FAIL" with contrast 2.9:1

The values for this pair are Foreground #FFF
with a background value of #43A6A4
This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #0B0000
with a background value of #AF53A0
This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #FFF
with a background value of #9F60A1
This is a test of a normal font at contrast 4.5:1
This is a Bold Font with contrast 4.5:1

The values for this pair are Foreground #FFF
with a background value of #757776
Local Adaptation Test One
00
FF
EE
CC
B0
9D
8F
80
70
66
55
44
2A
00
80
FF
EE
CF
BB
A3
9D
7A
6A
5F
4E
3B
20
00
FF
FF
EE
CC
B0
9D
8F
80
70
66
55
44
2A
00
Local Adaptation Test Two
00
FF
EE
CC
B0
9D
8F
80
70
66
55
44
2A
00
80
FF
EE
CF
BB
A3
9D
7A
6A
5F
4E
3B
20
00
FF
FF
EE
CC
B0
9D
8F
80
70
66
55
44
2A
00


W3C Contrast Examples

April 14, 2019

In the above experiment, we set a number of panels to color-pairs with a contrast ratio of 4.5:1, this counts as a "PASS" for the W3C spec of minimum contrast for small text. Interspersed among these panels are color-pairs that the W3C criteria counts as a "FAIL" even for large text, with a contrast of 2.9:1

As you can see, many of the "PASS" color pairs are actually hard to read and of low contrast, while all of the "FAIL" pairs are substantially easier to read and of higher perceptual contrast.

The point here is that the "contrast ratios" created by the equations listed in the WCAG documents are not useful or meaningful for determining perceptual luminance contrast.

There are a number of reasons for this, outlined herein:

  • Using the "simple contrast" equation of Lw/Lk. This is only useful for determining the overall contrast of a monitor, from #000 to #FFF. It fails to determine perceptual contrast ratios near the midrange and the darkest colors as it does not adequately take perception into account.
    Edit May 2019: this original statement is flawed. It is better stated as: "simple contrast ratios do not accurately model human perception of text in a graphically rich environment, on an emissive display in real world ambient conditions."
  • It appears that some of these guidelines are in place due to following certain older standards documents, or taking those documents out of context. For instance, three standards listed below are both far out of date, and centric to CRT type displays:
    • ANSI-HFES-100-1988 This ANSI standard was written in 1988, when computer monitors were mainly monochrome (often green and black or amber and black), These simple graphics systems were essentially on/off, so the simple contrast equation of Lw/Lk was likely adequate as it serves to define the total contrast of a monitor from black to "on."
    • sRGB Working Draft 1996 W3C used the original working draft of sRGB which contains a number of inaccuracies and inconsistencies. While the correct standard (IEC/4WD 61966-2-1) is listed in references, the WCAG lists the incorrect equations and parameters used in the working draft instead of the correct equations in IEC 61966. The working draft is very CRT centric, and in some ways obsolete. This implies the W3C did not actually use the true IEC standards document despite listing it as a reference.
    • ISO-9241-3 As with the two above, this is an older, CRT centric standard. Interestingly, the ISO presents other contrast equations such as Michelson Contrast as well as Simple Contrast, yet WCAG is specifying simple contrast.
  • One of the problems with the CRT related data is that CRTs have a very different reflection and flare component than LCDs.

The upshot of all this is that if "contrast ratios" are going to be promoted as a means to define color for accessible design, then there needs to be a clear path to assess contrast based on human perception.

One idea we are experimenting with is to process the luminance with an power-curve exponent (perhaps ^1.6) then take 1/3rd the contrast result, using either weber contrast or perceptual contrast length. The purpose of the exponent is to shift contrast for black/dark text vs white/light text, this adjusts for our perception that light text on a medium or darker background has a higher perceived contrast than dark text on a medium background. The purpose for taking 1/3rd of the result is to bring the output numbers into line with the W3C standard of 4.5:1 contrast. Edit May 2019: This concept was interesting, but there are better solutions.

Another thought is to mandate that at least one color always be above #AAAAAA, this is 40% in terms of linear (relative) luminance. For an sRGB monitor set to 80 cd/m2, that is 32 cd/m2. This ties in with the abundant research that shows that (in general terms) increasing luminance of the brightest element is more important than increasing contrast in terms of legibility.

ADD: August 2019

While some of these initial conclusions may have some merit, further more recent research had determine a set of more complex factors at play. Among them, the relationship of stimulus size to perceived contrast, and the importance of global adaptation & total luminance, along with local adaptation and surround effects.

Some important findings are that it is not possible to make an arbitrary statement about the usefulness of a particular color pair in isolation, as the perceived contrast and resultant readability is critically affected by multiple factors of stimulus properties.




This is a test of body text. #70749B background: #FFF
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #000906 background: #777
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #605C90 background: #DDD
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #00DDF8 background: #555
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #757473 background: #000
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #000 background: #70709E
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #70DDB5 background: #555
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #C2CCC1 background: #555
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?

Below are two examples where one
of the two colors is at or above #999999

This is a test of body text. #313131 background: #999
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #999; background: #313131
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?

Below are some examples where one
of the two colors is at or above #AAAAAA

This is a test of body text. #3F3F45; background: #AAA
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #AAA; background: #3F3F45
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #77767B; background: #FFF
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #FFF; background: #77767B
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?

Below are some examples where one
of the two colors is at or above #AAAAAA
AND the contrast is reduced to 3:1

This is a test of body text. #555B52; background: #AAA
This text is using a WCAG contrast of 3:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #AAA; background: #555B52
This text is using a WCAG contrast of 3:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #959593; background: #FFF
This text is using a WCAG contrast of 3:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #FFF; background: #959593
This text is using a WCAG contrast of 3:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?

As a reference for the above, the two below are at the contrast 3:1,
but the brightest color is well below mid-grey.

This is a test of body text. #555B52; background: #000
This text is using a WCAG contrast of 3:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #000; background: #555B52
This text is using a WCAG contrast of 3:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?

Taking the last two, increase the
brightest color so that the WCAG contrast is 4.5:1.
(In this case the brightest color is below #777.)

This is a test of body text. #747476; background: #000
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?
This is a test of body text. #000; background: #747476
This text is using a WCAG contrast of 4.5:1
The font size is 1 rem, so it is at the user agent default (typically 16px).
Is this easy or difficult to read? Is the background too bright?
Do you think the text should be darker? What about size and weight?

Analysis

So increasing the contrast to 4.5:1 only makes these last two marginally better. But compare to the 3:1 with minimum #AAA versions. Those are substantially more readable than these dark 4.5:1 versions (depending partially on room lighting). The real difference is the highest luminance of these 4.5:1 dark examples is only 14 cd/m2, but the highest luminance of the 3:1 / min #AAA is 32 cd/m2.

Put another way, the difference in luminance between the darkest and lightest element in the "dark 4.5:1" version is 14 nits, and the difference in luminance between the darkest and lightest element in the "light 3:1" version is 23.7 nits.

Despite the WCAG math indicating that the "3:1 and min #AAA" is a lower contrast and fails, it has a higher total luminance and a higher difference in luminance than the "4.5:1 on black" version.

Now to clarify, I do realize that contrast ratios are not the same as luminance differences, but the point I am making is that contrast "ratios" are not the holy grail of improving legibility, at least not as an independent metric. And indeed, the research shows that above a certain contrast threshold, increasing contrast has little to no helpful effect. Moreover, too much contrast causes problems for normally sighted readers due to chromatic aberration, scatter, and ocular glare.

I am also NOT claiming that luminance difference is the correct metric either. (it isn't!! Luminance is not perceptually uniform) But it is useful to point out that Weber and Michaelson contrast BOTH use luminance difference as part of their calculation.

Weber*** Michaelson*** are the methods used in most research where contrast is defined, as well as standards like the ISO. The WCAG however uses simple contrast, which is widely acknowledged as inferior for this specific application. Simple contrast is useful to measure two absolute luminances, such as the max brightness and max darkness of a monitor (#FFF & #000) at these extremes, gamma does not come into play (though perception does relevant to ambient lighting). But as this page has demonstrated, simple contrast ratios appear not relevant in isolation in regards to actual legibility.

On the subject of AMBIENT LIGHTING, it should be clear that the ratio between ambient and screen luminance is important. Certainly #AAA background at 32 cd/m2 which is fine indoors with an ambient of 64 lux, would be overpowered by exterior daylight at 32,000 to 110,000 lux. But similarly, if you take your laptop to a dark room with all lights off (0 lux, except for the laptop's screen) then even the darkest 3:1 contrast example can become readable — though in this case we'd want to see it without the white surrounding background:

Look at this very dark text on black.

See how different it appears in a completely dark room.

This is a test of body text. #555B52; background: #000
This text is using a WCAG contrast of 3:1

The font size is 1 rem, so it is at the user agent default (typically 16px). Of course many phones, iPads, and laptops adjust the screen luminance, making them darker in a dark environment. Ideally, you should turn the auto-brightness feature off for this test.

The padding of this element has been substantially increased. This is so your eyes locally adapt to the black background. If possible, set the screen such that there is little to none of the page's white background showing while viewing this large black div.

ADAPTATION: The point is that the screen luminance of an element relative to where your eyes have adjusted is more important than an arbitrary ratio that does not take into account perception and adaptation. You'll notice I increased the padding of that above dark element so that local adaptation of the eyes would adjust to the black, and in combination with being in a dark room that text should become fairly readable. On the other hand above where it is surrounded with white it becomes harder as the eyes adapt to the brighter surround.

Preliminary Conclusions

This research is ongoing, and more work is needed. While much of the WCAG is well developed, this critical area of vision, contrast, and luminance is not well covered and methods (such as the math for determining contrast) are not appropriately designed. From investigations thus far it appears:

  • A clear need of a new contrast/legibility assessment method or model, with a revision of the standard to accurately assess perceptual needs.
  • Add guidance/standards on display polarization (light on dark vs dark on light) to the standard.
  • Along with polarization, guidance for local adaptation which is part of the issue with current contrast assessments. (Local adaptation is one reason that white on a darker background may look more contrasty than grey on a dark background even if the colors and are the same).
  • Depreciate standards or guidance based on outdated or obsolete references.
  • Emphasize font size for accessibility, with guidance for authors to avoid overriding the user agent's root font size. On this note, websites should never prevent a user from zooming in or magnifying — yet many do.
  • Lobby the ISO to amend sRGB to provide a standard for adjusting a display to the room. 80 cd/m2 is really to dim for many environments and not in keeping with current use cases.

In terms of modifying the math to enable automated assessment, some various ideas:

  • Specify that the lightest element be at or above #A0A0A0.
  • Use the Weber contrast formula: (Lw - Lk)/Lw***
  • Use the Michaelson contrast formula: (Lw - Lk)/(Lw + Lk)***
  • Use a modified perceptual contrast length equation (PCL).
  • If Weber, Michaelson, or PCL is used, possibly also apply an exponent to luminance to adjust the midrange values.
  • Adjust the flare correction factor in line with modern monitors.
  • Use a method using L* (perceptual lightness) instead of luminance.

I consider this important work, and I believe using a more functional model of perception in regards to contrast and luminance web designers will have clearer guidance on color and design choices. Ideally a new study would examine these issues using test subjects covering the spectrum of visual impairment.

*** Edit May 2019: recent experiments indicate neither a plain, unmodified Weber or Michelson contrast would provide any real benefit over the WCAG methods. But there is a modified Weber that is very interesting, as well as other experimental approaches that are showing promise.

ADD: August 2019

While some of these initial conclusions may have some merit, further more recent research had determine a set of more complex factors at play. Among them, the relationship of stimulus size to perceived contrast, and the importance of global adaptation & total luminance, along with local adaptation and surround effects.

Some important findings are that it is not possible to make an arbitrary statement about the usefulness of a particular color pair in isolation, as the perceived contrast and resultant readability is critically affected by multiple factors of stimulus properties.

Regarding Color Vision Deficiency (CVD)

In a discussion with one of the authors of the existing standard, it was learned that some of the choices made in the standards design related to a desire to exclude some color pairs to benefit the perception for those with certain forms of CVD. To that end we have developed a new equation that specifically addresses the needs of CVD without significantly offsetting well established standards for contrast.

This also parallels our view that classical graphics-design theories, which are historically intended for improved legibility, are an important part of any standards discussion on appropriate color pairs and should at least be acknowledged in standards documents.