9
$\begingroup$

The Word Wide Web Consortium (W3C) has a formula for the contrast ratio of any two arbitrary colors, which they use to set minimum standards for text legibility: http://www.w3.org/TR/WCAG20-TECHS/G18.html

Step 1 of the process is relatively straight-forward - it uses a well known conversion from sRGB to XYZ and keeps the Y component for the next step. Step 2 is the same for the second color.

My question comes in step 3, where the ratio is determined as (L1 + 0.05) / (L2 + 0.05) with L1 and L2 being the luminances of the lighter and darker colors from steps 1 and 2. Where does the magic constant 0.05 come from? It's obvious that some constant offset is needed, otherwise pure black would have infinite contrast against every other color. But how is it derived?

Also, does this contrast ratio reasonably describe how easy it is to discern text against a background? Or is there a different formula that would be better?

I ask because it seems to favor black over white - where I see better results with white text, the formula suggests black is better.

https://www.w3.org/WAI/ER/tools/ gives a list of accessibility evaluation tools which includes a contrast checker and the WAVE tool by WebAIM checks the contrast ratios along with other accessibility features.

I'd like a clearer understanding on how this is calculated.

$\endgroup$
4
  • 1
    $\begingroup$ I came across this today which at least gives sources for the formulas: w3.org/TR/UNDERSTANDING-WCAG20/…. I haven't yet poked through the links to study the rationale. $\endgroup$ Commented Apr 21, 2016 at 20:24
  • $\begingroup$ Great question, @Mark! Unfortunate there still has been no answer to this. Thank you for the update, and maybe another 5 years later you have learned more? :) $\endgroup$
    – Steven Jeuris
    Commented Sep 27, 2021 at 9:16
  • $\begingroup$ @StevenJeuris thanks. I already had a better equation when I asked the question, so I wasn't too motivated to dig to the bottom of it. I also wonder if there was a better forum to ask on. $\endgroup$ Commented Sep 27, 2021 at 15:17
  • 1
    $\begingroup$ ux.stackexchange.com is an alternative, but cross-posting is not appreciated. If you want I can migrate it there, even though it is fully on topic here. I'll try adding a bounty first to see whether we can attract a bit of attention. $\endgroup$
    – Steven Jeuris
    Commented Sep 27, 2021 at 15:30

2 Answers 2

4
$\begingroup$

The W3C link provided by Mark in a comment on "Understanding WCAG 2.0" provides the source for the contrast ratio formula under the "Notes on formula" section.

The formula (L1/L2) for contrast is based on [ISO-9241-3] and [ANSI-HFES-100-1988] standards.

The ANSI/HFS 100-1988 standard calls for the contribution from ambient light to be included in the calculation of L1 and L2. The .05 value used is based on Typical Viewing Flare from [IEC-4WD] and the [sRGB] paper by M. Stokes et al.

Although [IEC-4WD] is a paywalled ISO standard, the free [sRGB] reference provides some additional information:

Typical Viewing flare is specified to be 5.0% of the maximum white-luminance level.

Although I have found no confirmation of your observation that this formula "seems to favor black [text] over white", I speculate that black text may be preferred by the formula since it accounts for ambient illumination and flare.

The reason that a viewing gamma of 1.125 is used instead of 1.0 is to compensate for the viewing environment conditions, including ambient illumination and flare.

It thus favors brighter environments, in which black on bright backgrounds are likely easier to perceive than white on darker surfaces (citation needed for this, though).

References

IEC-4WD: IEC/4WD 61966-2-1: Colour Measurement and Management in Multimedia Systems and Equipment - Part 2.1: Default Colour Space - sRGB. May 5, 1998.

sRGB "A Standard Default Color Space for the Internet - sRGB," M. Stokes, M. Anderson, S. Chandrasekar, R. Motta, eds., Version 1.10, November 5, 1996. A copy of this paper is available at http://www.w3.org/Graphics/Color/sRGB.html.

$\endgroup$
5
  • 1
    $\begingroup$ This is a great explanation for where the magic constant .05 came from, thank you! Unfortunately it doesn't answer the real question I had, which was why the formula correlates so poorly with my own real world experience. $\endgroup$ Commented Sep 28, 2021 at 14:33
  • $\begingroup$ @MarkRansom You are right, I overlooked that part of the question, but I understood it as a sub question. :) If that was the "real" question, maybe additional emphasis should have been on that, e.g., making it the question title. ;p Regardless, if I have time I'll see whether I can dig deeper and update the answer! I will keep you posted. For anyone else, this means there is room for improvement and the bounty is clearly still open. ;) $\endgroup$
    – Steven Jeuris
    Commented Sep 28, 2021 at 14:37
  • 1
    $\begingroup$ And you're right too, my question wasn't clear enough. It doesn't help that someone else made a recent edit and deemphasized my concluding line. $\endgroup$ Commented Sep 28, 2021 at 14:46
  • $\begingroup$ @MarkRansom I added some speculation which may explain your observation that the formula seems to favor black text on white, but could not immediately find citations to back it up. $\endgroup$
    – Steven Jeuris
    Commented Oct 4, 2021 at 8:59
  • $\begingroup$ @MarkRansom It doesn't correlate because it does not follow human perception of text on a self illuminated display. This problem has been the central focus of my research for the last four years resulting in APCA for WCAG 3. $\endgroup$
    – Myndex
    Commented Jan 28, 2023 at 22:04
2
$\begingroup$

Short Answer

The WCAG 2.x addition of 0.05 to the simple ratio calculation was intended to serve two purposes:

1) Prevent the ratio from calculating as infinite when one of the colors was black (zero).

2) The justification for the value 0.05 is based on "Typical Viewing veiling glare is specified to be 5% of the maximum white-luminance level" on the front of the glass CRT display, as recited under "typical" viewing conditions in IEC 61966-2-1.

Longer Answer

WCAG 2.0 was developed by W3C WAI AGWG (which is short for "World Wide Web Consortium Web Accessibility Initiative Accessibility Guidelines Working Group") And includes a number of a "success criteria" (SC) That are intended to improve accessibility for web based content.

Arguably, the most controversial of these is SC 1.4.3, which makes certain demands regarding contrast between text and a background.

It is controversial because it references some cherry-picked but nevertheless obsolete standards (ANSI 1988), and makes assertions or claims that are not actually based in rational science, have no empirical study, and no peer review.

Significant flaws have been demonstrated, including:

  • WCAG 2.x contrast calculation is not perceptually uniform for supra-threshold contrast of text on a self-illuminated display.

  • WCAG 2.x contrast can define color pairs that are more harmful to readability¹ for some color vision deficiencies (the very people it was claimed help) than some related color pairs it improperly rejects.

  • WCAG 2.x contrast can not properly calculate dark mode.

  • WCAG 2.x contrast SC and thresholds are somewhat arbitrary, not consistent over the visual range, and not spatially aware.

As a result, for any given color pair the math and the related SC might be "okay", or might be grossly insufficient, or might be much more than needed.

I discuss the origins of the math and the 4.5:1 threshold in an issue thread at the WCAG GitHub repo² including links to some of the original references.

A Brief History of Web Contrast

In the early 2000's, some conjectures discussed in a conference paper by a well-regarded optometrist and vision scientist were put forth. The ideas were:

  • Derive luminance by using the Y result from the IEC's sRGB to CIEXYZ matrix, using the piecewise linearization and not the defined display gamma.
  • Simplifying the Weber Contrast by inverting it and then adding a glare component to both inputs.
    • The end result is a simple ratio equation with 0.05 added to the text and to the background.
  • making the assertion that a certain threshold level of contrast would accommodate poor acuity².
    • The threshold was set at 7:1

Importantly, his equation was intended to be used with a threshold of 7:1.

But subsequently, the AGWG changed these to 4.5:1 and 3:1, which might be OK when the background is white, but this math grossly over-rates contrast when the colors are dark³. While it might not be noticed so much at 7:1, it renders lower contrast levels unreadable with dark colors.

Circa 2007, problems were evident⁴, and objections were raised by stakeholders including IBM, yet nothing seems to have come of the objections, The SC was ultimately pushed through, becoming part of the WCAG AA level recommendations in 2008.

Up until that time, most sites were using pure black text, which is ideal. Eventually, after the specification was set to 4.5:1 in 2008, those same sites shifted to the current fallacy of light grey text⁵.

In 2017, the vision scientist who suggested the original 7:1 wrote the provocative paper "Rethinking ADA signage standards for low-vision accessibility" and describes many of the problems with contrast maths and contrast thresholds, particularly as they apply to architectural signage, but the concepts discussed apply here as well.

In April 2019 I went on record regarding the deficiencies of the WCAG contrast math and guidelines in issue thread #695 at the GitHub WCAG repo. Subsequently developing methods to improve readability on the web, resulting in the APCA (Accessible Perceptual Contrast Algorithm)⁷.

Disclaimer and conflict of interest statement

While I am an invited expert of the W3C/AGWG, opinions stated are mine alone and do not necessarily reflect those of the W3C.

As research lead of a series of projects aimed at improving readability of content on self-illuminated displays, I created the APCA, and am focused on furthering the goal of improved readability⁸.


Notes:

REFERENCES:

  1. What’s Red & Black & Also Not Read? / TangledWeb
  2. Issue thread discussing history of 4.5:1 / GitHub WCAG repo
  3. Positive and negative polarity contrast sensitivity measuring app / PubMed
  4. A Contrast of Errors / TangledWeb
  5. Please Stop Using Grey Text / TangledWeb
  6. Rethinking ADA signage standards for low-vision accessibility / PubMed
  7. Why APCA / GitHub APCA repo
  8. Better reading on the web / UX Collective
$\endgroup$
2
  • 1
    $\begingroup$ So there's a possibility this might get better someday? Thank you! $\endgroup$ Commented Jan 29, 2023 at 4:44
  • $\begingroup$ Hi @MarkRansom yes, if the trolls and corporate interests stop interfering, LOL. $\endgroup$
    – Myndex
    Commented Jan 29, 2023 at 5:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.