Contrasting Theories
A Response to “Visualizing Color Contrast”
Hi Roger,
I really like the plots you created there, it's a good way to visualize contrast. I'm writing because I wanted to touch on a few things, you mentioned your frustration at finding the right contrast for the mid grey, and a part of that frustration is the WCAG 2 contrast method itself. I hope to provide some clarity, and also a connection to a hidden factor I'm sure you'll find interesting. Let me explain.
Contrasting History
Nearly three years ago I was researching for a book I am (still) writing on modern color theory, and I came across the WCAG 2.0 contrast guidelines. My first response at seeing the equation they were using was "uh... hey... this is the wrong math." This led to issue thread #695 at the WCAG GitHub repo, and led to my joining the W3 as an invited expert, with the primary research project of finding a solution to this contrast problem.
The solution is the APCA which I'll describe in a moment, but first, let's talk a bit more about WCAG 2's contrast method (1.4.3). When WCAG 2 was being worked on nearly two decades ago, computers used CRT monitors, and the iPhone was still on the drawing board.
Back then, cell phones were nothing but a phone, websites were only on your desktop/laptop, and those sites invariably used the same core websafe fonts & HTML colors. Served over a phone line.
Today we are all essentially issued a hand-held computer that is on 24/7 and connected to all the world's knowledge, and which also happens to double as a live GPS map, Walkman, camera, video production system, stock ticker, database, calendar, flashlight, and uh... something else... lesse what was it…oh yea, a PHONE, too... in fact a video phone... the point being today's common tech was just fanciful science fiction back when WCAG 2 was created.
WCAG 2 contrast is not accurate in terms of human visual perception. With the monumental shifts in technology today, this contrast guideline is less than useful and not particularly relevant. In other words, it's time to hand WCAG-2-contrast a gold watch and wish it a happy retirement.
Back to your article
The frustration you were experiencing in finding one text color that fit all the background colors is directly related to my current work in this area, so I'll toss a couple insights your way before I get to to the real subject of this article.
First, #a0a0a0 is close to the average middle contrast on an sRGB display. But WCAG 2 places the middle contrast about at #767676.
4.5 Shades Of Grey
Because WCAG 2 is not a perceptual contrast measure, the actual perceived contrast of 4.5:1 is not consistent. When your background is #f0f0f0 a calculated 4.5:1 is a different actual contrast than when the background is #757575 and text is #000. I personally can not read the latter combination. Nor can I read a #000 background with #757575 text, though WCAG 2 says that's 4.56:1 as well.
Here's an experiment: Using the Webaim or the Snook contrast checker, enter #aaaaaa for the foreground text. and #ffffff for the background. Can you read it? It's about 2.3 to 1. Now set the background to #000. The #aaa text is now light on the black background. Look at the test sentence so your eyes adjust and adapt for 5 seconds or more, and you should be able to read the sentence. For most people, this sentence is about equally readable with either a white or black BG and the text at #aaa.
Here WCAG-2-math calculates when the BG is black the ratio is a whopping 9:1 cs the 2.3:1. That's a difference of nearly 400% for essentially the same readability. If you want to flip the polarity, set the BG at #b6b6b6, and the text at either #fff or #000 (mid contrast is polarity dependent) and here, the difference is 500%.
WCAG_2 math is frustrating because it is not perceptually uniform. For the kind of task you're doing with your color plot, you’d want a perceptually uniform method to see how things "line up".
Lost in Colorspace
The science of visual perception of color is abstract, not intuitive, and at times maddening. There are still areas of active research and areas of unsettled science.
So turning now to HSL and WCAG — HSL & HSV are not perceptually uniform, that is, any given numeric increase or decrease is not relative to perception. So, while:
"lightness is a constant 128"
It's really only constant per the math & setting, but not per perception, and not per the emitted luminance either, for that matter. Across the bottom of that plot, the actual lightness was about L* 95 in the yellows to a low of 29 in the blues. HSL/HSV are really just convenient ways to adjust color… But these models don't represent perception.
Where's this going?
But all that above is just the back story and foundation. The most interesting part of this journey here — the part I think you are going to find most interesting — is how this bit of math (L1 + 0.05) / (L2 + 0.05) and WCAG_2 contrast "ascended to the throne" because to be honest, I should point out.... that the maths for calculating WCAG 2 contrast ... ...are... ...substantially wrong.
And it is most wrong with dark colors, and it finds the "mid contrast" to be #777, which is actually too dark¹. Moreover, if using these maths, you'll end up with too many "black dots" on your plots because that math is over-rating the darker contrast pairs and under rating the brighter ones.
But How Did This…
Well, this is the main reason I'm writing this post: I read another article you wrote on a seemingly unrelated subject:
Cognitive Biases
For the last nearly two decades, these WCAG_2 contrast guidelines and the math they are built on have been largely supported by a mass confirmation bias; an interesting case study in itself, and so much so the Hans Christian Anderson story "The Emperor's New Clothes" comes to mind.
The permeating cognitive bias is strong enough that I've frequently questioned myself over the last few years of research, particularly in the beginning.
Before posting the infamous thread 695, I did a lot of digging and due diligence to make sure I wasn't missing something totally obvious. I reasoned, "how could a group end up using math that was not perceptually uniform"??
And this might lead us to thinking of the electro shock psychology experiment, where people followed the authority and pushed the "shock button" while the other "subject" was screaming in the next room. There has been a lot of “well it helps the color deficient.”
But I did my due diligence, I've conducted dozens of studies and hundreds of tests and experiments demonstrating that WCAG_2 is no better than a coin flip in many cases, and it does not actually help CVD in any special way (in some cases has shown to be unhelpful by selecting the worst choice for a color pair).
This is why I've been very proactive in outreach and education to demonstrate why APCA is a better technology. In the early days of investigating the issues and solutions I'd hear "well 2.x been working for 16 years, so it can't be that bad..."
Oh, but infortuntely it can. And here is where we learn about how tricky conformational bias really is.
I've mentioned that WCAG_2 contrast is a coin flip—But that was from an automated test utilizing a randomized set of colors. Thousands of random color pairs. That's not how a designer works though is it? No, the design team doesn't grab random colors, they make conscious choices about the colors.
In making those choices, they are not going to intentionally choose low contrast color pairs, right? No, and so the colors are in the "not likely to fail" category already. They are "pre selected to pass" so of course it will seem like the algorithm works fine — but it was never stress tested to validate these operations.
So all of that just leads us back to "confirmation bias with a healthy portion of hand waving" and "well it's okay"-ness... But meanwhile, the web is increasingly unreadable, and misunderstandings regarding contrast are at epic proportions.
"We can't see the confirmation bias because Forest Gump hid it in the trees."
TL;DR
In closing, here are some links relating to perceptually accurate color and contrast methods:
A recent CodePen which has but one purpose: to flip the text color from black to white at the perceptually correct luminance.
Fancy Font Flipping
https://codepen.io/myndex/pen/RwZJyPR
Contrast Tools and Articles
APCA
The SAPC research site has the "full matrix" version of the APCA, and also has a "research mode" you can click on for demonstrative experiments.
https://www.myndex.com/SAPC/
The simpler version is https://www.myndex.com/APCA/
Additional Articles on Contrast
Part I: Orange You Wondering About Contrast?
An article answering some contrast questions, and demonstrating a real solution to the infamous orange conundrum.
Part II: The Lighter Side of Dark Backgrounds
An article comparing some parts of APCA with the old WCAG 2 contrast methods.
Part III: WCAG 2 vs APCA Contrast Shootout
An article answering some recent questions regarding APCA, and comparisons and examples of the old (WCAG 2 1.4.3) and the new WCAG 3 with APCA.
Thank you,
Andy
Andrew Somers
W3/AGWG Invited Expert
Senior Color Science Researcher
Myndex Perception Research
Inventor of APCA
EDITS:
¹ Note: CSS `#777` is generally too dark as far as finding a “mid contrast" is concerned. Informed readers will know that `#777` happens to equate to about 18.4% relative luminance, commonly understood as the middle grade between Black & White, Ansel Adams zone V, and the middle point where we normally want zone V to have middle exposure density on film negative. But this middle gray relates to large patches of diffuse reflective color in a tightly defined environment. Large patches of color are a low spatial frequency, but text is a high spatial frequency, and on a self illuminated display high spatial frequency elements do not have the same center contrast.
A modern color and contrast overview article by this author:
