
APCA calculates contrast differently from WCAG and is expected to be part of WCAG 3. Find out from APCA creator Andrew Somers the problem with WCAG contrast ratios, why APCA is more accurate and how you can make your colors more accessible.
Music: https://www.bensound.com
Show Notes
- CreativePro Design and Accessibility Summit
- 695 on GitHub
- Inclusive Reading Technologies
- Myndex GitHub
- Bridge PCA
- Draft guidelines
- Stark
- Link tree
- Free accessibility guides
Andrew Somers has more than 35 years of professional media experience in the Hollywood film and television industry. As a recognized industry guru and technology evangelist, he’s worked design, color, imaging, typography, lighting, cinematography, visual effects, and immersed himself in practical applications of technology in the field, including through the transition from chemical images (film) to digital imaging.
Several years ago, Andrew’s eyesight became severely impaired due to early onset cataracts and related complications. Not to allow decades of color knowledge go to waste, he refocused his research toward visual accessibility, becoming an invited expert with the World Wide Web Consortium, where he contributes as a co-author of the future WCAG 3 accessibility guidelines.
His research led to the APCA contrast method, rapidly being adopted in design systems and modern color tools. This year, he founded Inclusive Reading Technologies Inc., a nonprofit consortium focused on improving readability for all.
Getting to Know Andrew Somers
Colleen Gratzer: Welcome to the podcast, Andy!
Andrew Somers: Thank you very much, Colleen. How are you today?
Colleen: Good. How are you?
Andrew: Good, good, just fine. Thank you.
Colleen: I wanted to start off with a few fun questions like usual. Because of your background, I absolutely have to ask you what your favorite place to film has been.
Andrew: The snarky answer is “Everywhere the story is best told.” You know, I live here in Southern California. I live in the Los Angeles area, and it is such a great place to shoot simply because there’s a wealth of every kind of look that you might want.
In Downtown, there’s the new buildings, but there’s also the very old buildings. We can cheat Chicago down there. We can cheat New York down there and then half an hour to just an hour away, we’ve got the mountains or we’ve got the ocean and the beach. We’ve got skiing or we’ve got desert. Pretty much everything.
Colleen: Right.
Andrew: Really within just a short drive. I’d say one of my favorite places, though, recently is I’ve been been shooting drone footage. I took my drone out to to Tehachapi Wind Farm, and there’s just there must be 1,000 of these giant windmills. Each one is like 40 stories tall there. Really huge!
There’s like 1,000 of them just like this field of gigantic windmills out in the middle of the Mojave Desert. And it’s just like, you know, 45 minutes from here. So that was a really fun shoot just, you know, flying around have those things. So I’d say that’s probably my favorite place in the last year or so.
Colleen: Oh, that’s cool. Reminds me of Don Quixote with the windmills.
Andrew: Yes, tilting at windmills with little drone. Exactly. That’s funny, I didn’t think about that.
Colleen: Okay, the other question I had is what’s the worst job that you’ve ever had?
Andrew: There’s one that immediately comes to mind. That was right after the best film I ever worked on. The best one I ever worked on was Terrence Malick’s “The Thin Red Line” and the film that we worked on right after that was “Battlefield Earth.”
That film swept the Razzies, meaning it got worst film, worst director, worst writer, worst everything—except for sound. I happened to be working on the sound design. The spaceship sounded cool.
The funniest thing about that movie was, when The New York Times reviewer did the review of “Battlefield Earth,” he ripped it apart, panned everything. “This guy was terrible. That guy was terrible.”
I’m not going to mention names. You know who was in it.
He got to the very end of the review. The last thing of his review was the only thing professional about this film was the sound, which was excellent.
Colleen: Oh, wow.
Andrew: Me and the rest of the sound crew were like, “Hey!” If you’re working on sound… This was back in the 90s. You just don’t get a lot of attention, even though it’s more than half of the perception of the film, so there’s that.
Colleen: True. That’s interesting.
Andrew: Yeah.
Andy’s Interest in Contrast for Accessibility
Colleen: I’m really excited about this topic that we’re going to talk to today, which is APCA. I brought this topic up when I spoke last week at the Creative Pro Design and Accessibility Summit. Minds were blown. Designers’ minds were blown.
So I’m really excited for designers to hear about this, especially from the source. The first thing I wanted to ask that I was interested in is, how did you become interested in or even involved with contrast guidelines to begin with?
Andrew: Well, as you mentioned in your introduction, I developed early onset cataracts probably from sitting in front of three bright, wide-gamut monitors 12 hours a day. So I lost my eyesight, and it’s partially restored. I’m legally blind in my right eye and have very low vision in my left eye.
As a result of that, I’m not going to let 35 years of experience in color and digital imaging go to waste. So I started writing a book—and I’m still working on this—a book on modern color theory.
Colleen: Oh, wow.
Andrew: There really is not a good book on modern color theory that really is well science based but also from a point of view of an artist. My background includes both engineering and art.
Colleen: Interesting.
Andrew: It’s a unique combination—not unique in the film industry. That’s actually pretty common here, as you might guess, but otherwise fairly unique.
Problems With WCAG Contrast Ratio Measurements
Andrew: While I’m doing research for my book, I come across this thing called WCAG 2 and this WCAG 2 contrast. I see a number of designers are complaining about WCAG 2 contrast.
I looked into it a little bit. I took a look at the math and I go like, they’re using the wrong math.
So I brought that to their attention after looking into it for a couple of weeks, just to make sure that I wasn’t mistaken.
I started the infamous threads 695 on GitHub in the WCAG repository. For my troubles, they made me an invited expert. I spent the next 4.5 years or so working on developing the contrast algorithm and and guidelines.
It was very obvious that it wasn’t going to fit with the existing WCAG 2 without a major overhaul. There are problems with backwards compatibility that kind of interfere with that.
So it was pushed into WCAG 3. That’s many years away.
So what I’ve done more recently is I founded Inclusive Reading Technologies as a consortium specifically for visual accessibility and for developing these guidelines to help fast track them and get them out for people to be able to use them more rapidly and to be more flexible with emerging technologies.
Display and monitor technology… We’re right at the precipice of everything changing from the way it’s been for the last 30 years. A big paradigm shift.
We have high dynamic-range monitors coming out now and much wider color spaces than the sRGB, which was the standard until just last year, when CSS 4 and 5 came out.
So there are a lot of changes afoot. We need to be flexible in addressing that. That’s a big part of the Inclusive Reading Technologies mandate.
Colleen: Now, I know on your website you mentioned something about WCAG 2 and their calculations for contrast being out of date because of the monitors that we’re using today. Is that right?
Andrew: I don’t want to rag on WCAG 2 too much. Because when it came about in 2005…
In the film industry, we were having similar problems of misunderstandings going on in terms of how digital imaging should be done. As I mentioned, I started in the film industry back when we were shooting an actual film. That transition period was about 15 to 20 years from the 90s into the late 2000 teens. Now, pretty much everything is digital.
But around the year 2000 to 2005, everything was in transition, and everyone was going like, what do we do? 1s and 0s? How do we figure that out?
So there was a lot of work going along with that. That was about the same time that WCAG 2 came out. There was some choices made that ultimately weren’t flexible enough to move with technology. I guess to put it fairly.
Colleen: Sure.
Andrew: The reality is that some aspects of the guideline are referencing some obsolete 1988 standards for monochrome CRTs. Some parts of the guideline are looking at luminance and doing a luminance calculation that’s not really perceptually uniform.
When I say “perceptually uniform,” what I mean is that you’ve got your two colors. If they’re both really bright, it’ll give you one number. If you have two colors that look the same against each other, relatively speaking, it gives you a very different number.
As it gets darker, that number keeps going up. So it really grossly overcalculates or overestimates contrast for very dark colors as much as 200% to 250%.
That means that it can’t be used for dark mode. In the last few years, dark mode has become very popular because you save energy on your phone. You save battery life by using dark mode on your phone. That’s one of the reasons it became popular.
It’s also, for a lot of people, myself included, much less fatiguing work in dark mode than to work in light mode all the time.
If we have time, we might talk about something that I’m going to be releasing in the next month or two is something called The Paper Reading Experience, which is a set of guidelines for a web page in light mode that emulates the way we read on paper, so that you don’t have that eye-blazing fatigue.
I myself get migraines just looking at light mode, because on so many site they’ve set the background to #fff white. That’s just too bright.
When you think about a page of paper, it’s like 85% reflectivity. It’s a diffuse reflectivity of your overall environment.
If you look at a monitor, it’s like you’re staring straight into a light bulb with text on it. If you’ve tried to read the text on the end of a light bulb when it’s on, not so easy. A lot of websites have been doing that lately.
Then there’s misunderstandings out there about, “Oh, we should use light gray text.” The places I found that actually seem to be the source of this are sites of complete misinformation.
What their motivation is in putting the misinformation out there is probably a whole other discussion. But there’s a lot of misinformation out there.
So one of the goals with APCA and the AAPC readability criterion, which is the guideline under Inclusive Reading Technologies—it’s not part of WCAG, it’s separate—is to really reach out from an educational point of view and go like, “Here’s actually what the science says. We’ve been led astray on a lot of issues. We need to fix that.”
Right now, I don’t know about you, but I can’t read the Internet most of the time. I have to go into reader mode or I have to put on a custom user sheet for a lot of websites, including websites I use a lot like like Medium, just because they’re doing things that really interfere with the ability to read, I guess.
Colleen: When I was talking about this at the CreativePro Summit, two of the examples I showed were examples that fail WCAG based on their current calculations. One was black on a medium orange, (a little darker than what’s behind me) and white on that same orange.
I asked people is it the black or the white on the orange that you find easier to read? Most people were saying the white but the white fails.
The other combination was a medium blue with black text on it and white text. I’ve even had that same color combination used and a client say, “How can that black text on the medium blue pass the WCAG calculations?”
I’ve also seen research where it says for usability and readability purposes, most people find the white on those two particular colors easier to read.
I notice that with APCA that actually those combinations would pass.
But you did a lot of research. You were testing 500 randomly chosen color combinations from what I understand.
Andrew: Thousands actually! We had independent studies. I did a couple of studies using groups of 500 random colors.
A PhD at Cambridge in the U.K. did an independent study as part of the peer-review process. He used, I think, 5,000 colors.
Colleen: Oh wow.
Andrew: He found pretty much the same thing that I did—WCAG 2 was allowing…
Some 47% of the colors that it was passing really should have been rejected as not readable.
Paradoxically, at the same time, about 23% of the colors that it was rejecting were perfectly readable—in fact, better for people with color vision deficiencies.
This is one of the paradoxes that is most concerning to me. Some of the early adopters that I’m working with right now are people that have color vision deficiency. But it’s commonly known as “colorblind.”
They all have a problem with WCAG 2. It doesn’t help them.
If you think about blues… In classical design, you would never have blue as your lightest of two colors, not saturated blues. Saturated blues are always your darkest of two colors. That’s been known for hundreds of years and partly because there’s literally no luminance in blue. It doesn’t get decoded into luminance.
Luminance with just the achromatic lightness darkness is what we need. I’ll have some examples of that in a moment.
But reds and colors that have a lot of red in them like oranges and purples… Somebody with protanopia, who doesn’t see the deep reds, will see the red on an sRGB display about 50% darker.
So the oranges the purples, the reds that they see get much darker—in some cases, almost black.
If you’re pairing those colors with black, it gets much worse for them. That’s actually an incorrect way to work that problem.
Very saturated colors like that usually need to be paired with white with a large enough font, because you’re also going to have some other contrast issues in there.
You usually don’t want to have a very thin font when you have highly saturated colors.
There are a lot of reasons for that. That is also part of the first demonstration that I’m going to show you.
So the short answer is WCAG 2 is wrong as far as the contrast math. It’s not correct.
I’ve been on record with that since 2019, when I started this whole project. It’s been a long way to get to where we are now.
I thought I’d be done in like three months, six months. So naïve…
This is an underresearched area. There’s a lot of new science that we’re working on. That needs to be worked on in terms of studies.
As far as where we got things, it wasn’t just research. We’ve done empirical studies, and we’ve developed experiments for measuring the kind of contrast that we need to measure for text, which is different than a lot of methods that have been in used in the past like Michelson or Weber contrast, which are all about the threshold—a very thin line between visible and invisible.
That’s not where we want text. We want text above that—an area we call “supra-threshold.”
Our vision changes. The way we calculate this—or model this—is significantly different. It’s not a small thing. In fact, it accounts for most of how the WCAG 2 math skews in the wrong direction.
Anybody that’s a photographer might be familiar with the 18% gray card, often referred to as “middle gray.” It is middle gray in some ways—in terms of like just between black and white. If you have a spinning disk with black and white on it, it will mix into this middle gray, about 18%.
But that is not middle contrast. Middle contrast is somewhere else.
This is one of the key discoveries that led to the current APCA. Middle contrast is higher than that. You need to have that center point moved higher, to have a smooth range from black all the way to white.
That was one of the key goals—to be perceptually uniform. That allows us to use it in an automated capacity.
Right now, with WCAG 2, you don’t know what you’re going to get if you just feed into it 4.5 to 1. You don’t know if you’re going to get something that’s readable or not.
If the colors are very dark, it’s not going to be readable. So we need something that’s even and perceptually uniform across the entire visual range. That was one of the key goals and key achievements.
Perceptually Uniform Contrast
Andrew: So let’s talk about APCA. We’re going to discuss the importance of perceptually uniform contrast. Some of the things that we want to talk about and something I want to mention right away is “px” is not “pixels.” CSS px—that unit—is actually related to the canvas, not necessarily the pixels on a screen.
Colleen: Really?
Andrew: I’ll call them “px.”
Yes. It’s actually a different measure that is based on the visual angle, which is why I use it as a reference and it is what everything gets reduced down to.
As an example, a screen pitch on a phone is a much higher density, number of pixels. That’s designed to be relative to how far away you normally are using the device.
So how do you figure out how big that needs to be? You use the visual angle of how something gets projected onto the back of your eye onto your retina.
The CSS reference px is that unit, and it is based on… It’s 1.278 arc minutes of visual angle. There are 60 arc minutes in one degree. So it’s 1.278 of a 60th of a degree.
Luminance is king. That is what we need for reading.
Lightness is non-linear and darkness is… and contrast is very spatially oriented.
Those are the key things that I hope that we can get through today.
Luminance is king. Luminance is the achromatic (without color) lightness to darkness.
Most of what we see is actually very little color. Our vision system throws away most of the color information. Almost all of our fine details are in luminance. Let me demonstrate.
I use a parrot because they’re very colorful, and they have a lot of fine detail. This is the original image here.
In the next couple of slides, I’m going to show how the luminance is handled in our vision system separately from the color aspects of an image.
On the left is the original image. On the right is the luminance part only. It’s basically like a black-and-white TV with no color information in it.
As you can see, it’s a very highly detailed image of that same parrot just without color.
Let’s take a look at the color part. On the right is just the color information. It’s probably kind of hard to see because there’s no luminance associated with it. It’s just the pure color.
Putting just a flat amount of luminance at different levels here you can see what that color is—the amount of color information that’s associated with that image, which is not a lot. It’s very sparse.
Part of the reason is that each eye has 5 million photoreceptive cells called “cones.” You can think of each eye as a 5-megapixel camera. But we only have 1.2 million optic fibers, down our optic nerve from our eye to our brain.
How do you get 5 million down to 1.2 million? Nature is the first data compression and throws away most of the color information and reduces it down to mainly luminance with a little bit of color added on as flavoring. It’s processed separately as well.
Here’s the original image.
In the next image we’re going to blur only the luminance, but not the color. If you look really closely, you can see that some of the color edges are still there in the color information, but the luminance only is blurred.
Now on the next image, we’re not going to blur the luminance. But we’re going to blur the color the same amount that the luminance is blurred right now. So the color channels are blurred just as much as the luminance was on the previous slide. But now it looks like a normal picture.
Colleen: Right. It does.
Andrew: That’s because all of the detail is in the luminance channel and not in color.
On the left is the original, unblurred luminance. On the right is the blurred color only, with unblurred luminance.
When we’re talking about luminance, we’re really talking about where we get all of our detail information, all of our edge detection, all of our fine information. It’s all in a black-and-white channel called “luminance.” That’s the first thing to be processed in the visual cortex in our brain.
Color is processed later, like 70 milliseconds later, which is like almost two film frames delayed.
In fact, just as a fun fact, from the point that light hits your retina and your eye to the point that it is presented to your conscious mind as an image is about a fifth of a second, 200 milliseconds. So literally what you’re seeing right now happened a fifth of a second ago.
Colleen: Wow.
Andrew: Yeah, so moving on.
Colleen: Ooh, these hurt my eyes!
Andrew: Yes, intentionally so. This is an example… The first three ovals are maximum color contrast, but no luminance contrast. The bottom one is luminance contrast with no hue contrast. There’s some saturation contrast, but there’s no hue contrast. It’s mainly just luminance contrast.
Colleen: This is really hurting my eyes. Don’t stare at the sun!
Andrew: People talk about the Gaudi era of art. Here in Los Angeles, there’s a lot of Gaudi pieces at the Getty Museum. There a lot like this. They’re really hard to look at, because they’re just so like, “Turn that down, please” kind of a thing.
We’re not really meant to look at colors that are this saturated and this bright next to each other without the addition of luminance contrast. It’s the luminance contrast that gives us all of the shape and detail of our world.
Color, the pure color aspect, is something that’s very useful for discrimination and distinguishing between a ripe orange and a not ripe orange, which is one of the theories as to why we have that color as a survival trait. But not so great just having them like this as something you look at.
It’s really hard to read that. What it actually says is “bad design choice.”
I’m bringing this up because originally in WCAG 2, they called it “color contrast,” but they’re actually not doing color contrast there either. They’re doing luminance contrast, just a different kind of luminance contrast, which I’ll get to in a second.
That’s what we need for reading, because all the fine details are in luminance. Text is small and fine. So that’s what we need to actually see text properly. That is the only thing that gets sent to the visual word form area of the brain for lexical processing.
On the left side of our brain, it’s just text that is a function of luminance. By the time it gets to our language center on the left side of our brain, the color information is thrown out.
You might have played that game that’s called a Stroop test, where somebody shows you some words, like the word “red,” the word “green.” But on the word green, the letters are actually in the color yellow or red or something. They go like, “What color are the letters?” You’re going to say “green” because your language center has processed that as green, even though the actual color of the letters is red.
Once it gets to your visual word form, area, color information is actually not there. So it gets to your conscious mind through another route. So you’re going to first say the language that you read first, unless the letters are so big that you’re doing them a letter at a time, in which case, it’s more likely that information gets sent over to object recognition on the right side of the brain.
Just a whole other story.
The other aspect of vision that is not intuitive… I’m trying to bring up the things that are least intuitive that cause so many misunderstandings. One of them is that when we go from dark to light, perception is not a straight line. Now, in the real world, light is a straight line. Light is additive.
In other words, if you have 100 photons of light—a little bucket of photons—and you triple it, you have 300 photons of light. It’s very simple math. That’s how we do physical rendering and ray tracing.
But when it comes to how we actually see or perceive that light, we don’t see it as a tripling.
In this example here, the ampersand is the light gray that is three times brighter than the darker gray next to it. Then that white outline is three times brighter than that middle gray or nine times brighter than the darker gray.
The other thing I want to point out too is look at the ampersand and how well that stands out and then look at the thin text above it that says “example.”
Colleen: Right. The ampersand is really thick.
Andrew: Yeah, and it’s very easy to see even though this contrast here is actually pretty low because it’s three times. Technically, you could say it’s 300%. But that’s not really how we measure it. We don’t measure contrast that way, in any real way.
This is one of the problems with WCAG 2—when we get darker, that’s a big difference, that 300% difference, three times. It rates it as being a big difference. But it really shouldn’t be.
This is really only a difference of about… I want to say it’s Lc, I think it’s like Lc 30 or something like that. It’s at the low end of the range.
Colleen: Can you explain what Lc means really quick? I’ve seen it on your site, but just what it stands for.
Andrew: I’m going to get to that. So Lc is the APCA output, which means “lightness contrast.”
This is a representation of how we see from dark to light. Above is light in the real world. That’s a linear gradient, where you go a certain distance from left to right. No matter where you are in that distance, light is increasing by that same linear amount.
Below that, though, is linear to our perception. We perceive that dark to light differently, and it has a different curve. Stevens found in the 1960s that it’s a power curve. So that’s the blue curve on this graph—perceptual lightness. The pink straight line is actual physical light in the real world. It’s a straight line from 0 to max.
But we don’t see it as that straight linear line. What gets even more interesting is that there’s not just one curve. The curve depends on the environment that we’re in. It depends on the kind of monitor that we’re looking at. It depends on where we’re at in terms of lightness and darkness.
So if we have two dark colors, but they’re on a monitor that the rest of the monitor is very bright, or we’re in a bright room, we’re not going to see that with the same curve that we would see if we’re in a dark room.
Here’s the example. I don’t know if anybody goes to Saturday matinees anymore. I did when I was a kid. That’s how old I am.
You’re in this dark theater and you’re dark adapted to the very dark theater, because movies are actually shown at a very low light level. You walk out to the noon sun, and it’s like, for me, it was painful.
It takes like two or three minutes to adjust or what we call “adapt to” that brighter environment. It’s called “light adaptation.” So our light adaptation level, where we’re at in terms of darkness and lightness in our environment, speaks directly to how these curves become shaped.
Maybe a better way to say this is it speaks directly to how we perceive the lightness and darkness. It’s very keyed or tied into our environmental adaptation state. But the other aspect…
This is the biggest part. This has been known for a long time, but it hasn’t gotten into readability standards until APCA. So the understanding of spatial frequency and contrast sensitivity, as it relates to that has been known since the 60s, at least. Really before then. Stevens, again, was one who was very active in this area.
But it hasn’t really been applied to text until now. To make the abstract science more understandable, what I’ve done is I’ve taken text at different sizes and associated them with where they would land, more or less, on the blue curve. That is our contrast sensitivity curve, the human contrast sensitivity curve.
All of the text on the right side there is at the same exact color, #c7. It’s all the same color.
Colleen: Really? Wow.
Andrew: All of those pieces of text are identical. But they obviously don’t look identical. They don’t look identical, because they all have a different spatial characteristic. Technically, we’d say the spatial frequency is increasing when they get smaller and thinner.
But for us, working in the design world, we can just say that when things get smaller and thinner, we need to have a bigger color difference for the same amount of visual contrast or perceived contrast.
You can see that the difference is substantial. From that large headline down to the little bit at the bottom, we’re talking a change in contrast sensitivity by two orders of magnitude. It’s like 220 times different.
Colleen: Just going from large and bold to a little bit smaller, not so bold and so forth, down to this tiny, thin type.
Andrew: At the bottom there… You probably can’t read it, but it’s actually it’s 12 px at 300 weight. It’s really too small, even if you had maximum contrast.
The point here is, as things get smaller and thinner than 4 to 8 px, our contrast sensitivity to that element plummets rapidly. This is the main area that APCA is working with—this range where it goes from a fairly low spatial frequency to a very high one. We need to come up with some guidelines, because we’re usually pushing that edge. Body text is usually pushing that edge.
As an example for body text, we typically want somewhere around 16 to 18 px. That’s right on the edge of what our perception capabilities are, even if you don’t have an impairment. When you have an impairment that can affect your acuity or that can affect your contrast sensitivity or your color perception, that all plays into this as well.
To make this an easier-to-grasp example…
On this page, everything is at 3 to 1 per WCAG 2.
On the top row, the examples are an outlined font with an outline of 1 px thick. The smaller font above that has a stroke that is also about 1 px. It’s Montserrat, which is a fairly geometric font. Below the samples are at 2 px, 3 px and 4 px.
Even though everything on this page is at the exact same 3 to 1, as we go down and they get thicker and bolder, they become much more visible. The contrast goes up because of that spatial change.
For this 3:1 example, the bottom three pass WCAG 2, although only the bottom two barely pass APCA.
The next slide is exactly the same text and exactly the same outlines, but at 7 to 1.
Do you see the difference? It looks almost the same, doesn’t it? This is 7 to 1. This is the AAA level.
For the 7:1 example, all four rows pass WCAG2, but the topmost row fails APCA for that font weight.
Colleen: They look more pronounced. But the little bit they look a little bit more pronounced. But the top one I don’t see a difference.
Andrew: Right. Exactly.
You’ll see that really the biggest difference here is not so much the color contrast difference, but the weight contrast difference, the spatial difference. It’s not exact here, but more or less, the 2 px on the 3 to 1 looks kind of like the 1 px on the 7 to 1.
Colleen: Sure.
Andrew: The 4 px on the 3 to 1 is kind of like the 2 px on the 7 to 1. That depends, of course, how far away you are from your monitor when you’re looking at it. You get closer, that’s actually going to shift, to change.
This is one of the things that comes up. So how do we make a decision of how thick is for a certain level of contrast?
Colleen: Right.
Andrew: Before I mentioned, in research, we use the visual angle, because that doesn’t matter how far away it is. The visual angle is going to be the same. We just make things smaller as they get closer to have that same angle.
The CSS reference px is, in theory, based on angle. A lot of manufacturers do just assign it to a device pixel.
But for Retina display, that’s not the case. For a Retina display, you have 4 or 9 device pixels for 1 CSS px. Apple doesn’t even use px in their developer guide. They use points, which is a whole other story.
The point here though is that we know that the px is designed to be a certain angle at a typical viewing distance.
If you had a 96 PPI monitor, that would be 28 inches away as an example. That’s just like the standard point where people would normally use it. That’s what we base how much contrast we need for one of these things on. Then somebody might move closer or farther away as they need to to adjust for themselves personally. But that’s how we come up with that.
So here, just carrying through with the same idea… On the left side of this image, each line of text is 100 weight higher than the right side of the image.
The only other difference is the left side of the image is Lc 15 less than the right side of the image. If you look at this from about the right distance—about the normal operating distance—you probably won’t see much of a difference between the left and the right. It becomes 100 weight lower, but the contrast is pushed up by Lc 15 to compensate.
That’s about the approximate balance. I say “approximate” because if you get closer to it (so that it’s larger), the bias will be more toward the actual color difference. But farther away, the bias moves more toward the weight and thickness, as they become thinner in our view as distance increases.
Colleen: Okay, so now I see more of the difference there. But the visual… Lc 45—that text at 900 weight looks very similar to the 24px in the 800 weight that’s Lc 60.
Yeah. And then same for Lc 60 and 75 at the higher the 900 and the 800, respectively, there.
Andrew: The 900 and 800 are probably the worst example. They probably match the worst.
If you look more in the middle, like around the 400, 500, 600 range, you may be squinting your eyes a bit. I know I certainly do to go like, is it different? Am I looking at the right thing?
That middle range is where our sensitivity is plummeting, because of the spatial frequency aspect of becoming too thin. The important spatial aspect here is about the thickness or thickness of the line or the stroke more than anything else.
That’s actually what sets contrast is the thickness, or the thickness of a line, before the color. The color is like a secondary thing.
That is the most important aspect that I wanted to get through today.
How APCA Is Different From WCAG
Andrew: Let’s take a look at APCA, the Accessible Perceptual Contrast Algorithm. Here’s why we came up with this, to answer your earlier question regarding WCAG 2 contrast. It’s not uniform to perception. So that little square of black there with the very difficult-to-read text, all of that passes WCAG 2.
Colleen: Yes. Okay.
Andrew: Right. That big text that’s most easy to read is AAA. The other stuff is AA. The AA I can’t read at all. I can tell that there’s text there.
Colleen: Oh, OK. I can.
Andrew: Yeah, you probably have better eyes than I do. Keep in mind that I’m blind.
I do still have difficulties reading. Obviously, I’m one of the test subjects of the people that do the studies. I have actually a different impairment in each eye. I kind of have an opportunity to do a lot of experimentation just because I can close one eye or the other and get a different view point.
Colleen: Right.
Andrew: For something like this, for somebody who has low vision like me—and I’ve got have some contrast problems—or somebody who has glaucoma or something like that, where they have contrast issues, they’re not going to be able to read this.
It’s just impossible to read, but it passes WCAG 2. This is really the core of the problem.
Colleen: Are you saying at AAA, they would have issues reading that as well?
Andrew: For dark mode like this, where the background is black, yes, absolutely. There’s not enough contrast.
Colleen: A lot of designers might say, “Well, that’s AAA. So that should be even better.” But you’re saying people would still have a problem with that, even though it’s AAA. So AAA is not always…
Andrew: That’s correct.
The WCAG 2 contrast only works when the background is very light or white, and the text is much darker.
That’s really the only time it works. It doesn’t work in any of the reverse situations, and it doesn’t work in dark mode.
When it was originally conceived, like I said, we had similar problems here in Hollywood in terms of understanding how some of these things work in digital monitors. When it was conceived in 2005, they knew that there were some problems, but they were wrestling with them.
There’s a lot of other things in WCAG 2. This is something I want to say that is really important, and I want to be clear about. There’s a lot in WCAG 2 that’s very good and very important for accessibility—just not the contrast. The problem with that is that the contrast is bad enough that it pulls the rest of the document down. But, really, you need to use the entire document and then use something else for contrast. You could just use it on top of the WCAG 2.
Colleen: Right.
Andrew: Add APCA on top. There are a couple of weird edge cases where WCAG 2 is incorrectly rejecting colors that APCA does not incorrectly reject. It correctly passes them. Those edge cases are a little odd.
But other than that, using APCA and the readability criteria, if you’re using it correctly with the correct font sizes, you will exceed WCAG 2—even AAA. You will actually create a much more accessible result and a result that everybody has a better time reading.
That’s one of the one of the important things to answer that question.
Colleen: Yeah. One of the things that I mentioned, Andy, at the CreativePro Design and Accessibility Summit, was…
I didn’t want designers to get confused or overwhelmed by hearing, oh, now there’s these other…
I said, “Look, this is not legal yet. WCAG 3 isn’t here yet. But what you can do now…”
A lot of people have that legal requirement, right? If they’re running a checker on a website and trying to measure contrast and it fails, that could be a potential legal issue.
So my suggestion was measure in WCAG but also measure in APCA, so you have met that legal requirement there with the colors—or conformance rather.
Then you’ve got this extra, more usable color pair because you’ve also checked it with APCA. So if it passes both places, that should be good.
Andrew: Yeah, absolutely. If you’re passing both places, it should be good.
There are a lot of things that we’re doing, like for dark mode. There’s no maximum contrast for light mode. There should be a maximum luminance. But that’s something we’re dealing with with the paper reading experience.
For dark mode, there is a maximum contrast. Right now, we’re evaluating for small text, [Lc] minus 90.
Incidentally, with APCA, when you’re in dark mode—the text is lighter than the background—your Lc value will always be negative. That’s why you know that it was calculated correctly for dark mode as opposed to light mode, because the numbers for two colors are different in APCA.
That is why the numbers are different, because APCA recognizes that dark mode and light mode have different needs. That is the one reason why APCA is not backwards compatible with WCAG 2, because it doesn’t do that.
Before I forget, we do have something called Bridge PCA, which is fully backwards compatible with WCAG 2 with enhanced guidelines and completely backwards compatible. Also, it’s forward compatible with APCA bronze mode.
What you lose when you do both is you lose some design flexibility, because APCA and the APC readability criterion is based around human perception and including people with different kinds of impairments.
APC actually will come up with fewer colors in terms of numbers. But the colors it comes up with are all usable, whereas, as I mentioned, WCAG 2 might come up with a bunch of colors, but they’re not all usable.
WCAG 2 is currently the recommended standard of the World Wide Web Consortium. It is not law in a lot of places yet. There are a few places that have adopted it. They brought it into law. So WCAG 2 technically, by itself, is just a voluntary guideline.
Colleen: Right.
Andrew: But there are some countries, like France and Germany, who actually took the guidelines and pulled them out and renumbered them and put them in their own law. The E.U. did this with EN 301. That actually doesn’t fully take effect for everybody until, I think, 2030.
So there’s still wiggle room on some of these things.
In the United States, there’s the Section 508 rule, which really only applies to government websites or government-funded websites. But it has an important exception in it. Section 508 is part of the U.S. Access Board.
They need to have an exception like this in Europe as well. They don’t yet.
The exception to 508 is equivalent facilitation. If you have a way to equivalently come up with, say, contrast, as an example, and you’re actually improving accessibility overall, that counts. You don’t have to use WCAG 2 with 508, if you’re using something else that is also qualified as being something that is improving accessibility.
APCA absolutely does that.
I’ve spoken to a number of people who agree with this, and it actually is in the 508 standard equivalent facilitation. The other one is commercial availability, for like apps. If a government entity wants to buy an app, and it doesn’t fit accessibility… A lot of things don’t because with WCAG 2, there are aspects of it that are very difficult to meet, especially for apps.
If it’s not commercially available, then that’s excluded, or excepted, from that particular law.
In Ontario, and as an example, in Canada, they’re fairly strict about it. I think, Germany, France and—I want to say Finland, I think—is one of the one where it’s getting enacted into law, but most places it’s still a voluntary guideline.
Like I said, there’s a lot of WCAG 2 that’s important to incorporate—things like semantic HTML and ARIA, things like that. It’s just that the contrast has some issues with it.
Bridge PCA, like I said, is fully backwards compatible, but you lose some design flexibility that needs to be in there. The reason is APCA has a much higher contrast requirement for things like body text, where it’s really needed, in order to be good readability.
Well, if we’re going to make that a higher contrast, we need to relax it in some other areas where it doesn’t need to be as high, like big bold headlines, like we showed on that contrast sensitivity graph. That text didn’t need to be nearly as high contrast as the smaller text did.
What we’re doing right now with Inclusive Reading Technologies Inc., a California nonprofit consortium of other industry stakeholders… This is not the official announcement yet, so I’m not saying who’s involved, but a number of major stakeholders are. We’re working specifically to bring this not just to the web, but as a visual accessibility guideline for everything digital—all apps and anything else that that you need to be able to read or discern.
This is going to apply to all of those different use cases and scenarios. That’s a big part of this.
We have draft guidelines up right now. It’s a public working draft. There should be links there that indicate where to go to talk about it.
We are really encouraging feedback on this, any problems that people might have or any comments of any kind.
On GitHub, we have a repository with a discussion area where people bring up issues or comments, so that we can really make this work well for everybody.
To help people get started, we have the bronze level conformance, which is designed to be just as simple as WCAG 2—just a few levels and a few minimum font sizes to think about to get people used to working with perceptually uniform contrast.
Colleen: Would you say that bronze level is kind of like the WCAG AA and then your silver level is like AAA, or is there not even a comparison in terms of different levels?
Andrew: I’ll put it to you this way. The bronze simple level is conceived so that people who have well designed sites now will pass without having to really do a whole lot.
One of the things that we were concerned about early on was, if we really do things most correct in terms of things like classical design guidance of how we normally used to do things…
We never would use gray ink in a printer. When you’re setting up for an offset press run, you’re always going to be using black ink. It was pretty rare to use anything else. You might use one other color, some spot color, like red or something.
Colleen: Yeah, so then I was wondering, okay, so you have the bronze and the silver level. Okay.
Andrew: And a gold level.
Colleen: Oh, and there is a gold level too. Okay.
Andrew: There are three levels.
Colleen: That’s akin to WCAG.
But there are some differences, and we’ve gone over quite a few of them. But the way it calculates… Like you were talking about, there’s a positive or negative number. The positive number is if the foreground color is lighter than the background color, and then it’s vice versa?
Andrew: The positive number is if you’re in light mode, where you have a light background with dark text.
Colleen: Oh, ok.
Andrew: The negative number is if you’re in dark mode. I know this is confusing, because there is negative and positive contrast, which is actually the opposite of negative and positive screen contrast.
I went with screen contrast, because in talking to people, that seemed to be what they understood more intuitively. That’s why dark mode is negative and light mode is positive.
That’s there mainly to give the designer an indication that the number that they’re looking at relates to this in a particular polarity, because that does change how we perceive the amount of contrast that’s there.
With a particular pair of colors, if you’re in light mode, if you just flop those two colors around, you’ll have a higher perception of contrast than you did in the other direction. So that’s why there’s a difference there. You’ll get a different Lc number with that too.
With the Bridge PCA mode… I’m going to be incorporating this into the main APCA tool soon as a switch that will go into non-polar mode, which is basically like the backwards mode to emulate WCAG 2, so that if you need to, you could be working in an APCA-related environment. But you’re in a mode that is backwards compatible.
I hesitated doing that, but I know that right now, there are concerns, as you mentioned, about legalities in some areas, because it’s going to be at least another four years, I think, until WCAG 3 is the actual recommendation. There’s a real need for this right now, because dark mode is more popular, because there’s the CSS color-contrast() function that got pushed to CSS 6 (color) now, because it doesn’t work with WCAG 2 contrast math, because it’s not perceptually uniform. It has to have a perceptually…
Anything that you want to do automated, if you want to automate something, where you don’t want to have to have a person looking at it to validate it, where it’s going to be automated, you need a model that fits perception, so that you know what you’re going to get. So you need that perceptual uniformity. That’s what APCA does.
Four years is a little bit too long for everyone to wait for that. With everything that’s going on right now with all the new emerging technologies in terms of displays and high dynamic range and so forth, P3 and everything like that. So that’s one of the reasons why Inclusive Reading Technologies was developed in order to help push this along a little bit faster.
WCAG 3 is not just doing contrast. They’re doing an enormous number of other things for accessibility. It’s a huge undertaking. It’s absolutely massive.
My focus has only been on contrast. So by setting up Inclusive Reading Technologies, I can focus on what is my strength in terms of color and vision and these things and without being bogged down with everything else that’s going on with WCAG 3.
They have so much going on, because they’re not just coming up with new standards. They’re coming up with a new paradigm of how standards are presented to people and how you actually work with them. That’s a lot.
Last summer, they more or less went back to square 1 again and are reworking things. I think they’re at a much better place now. But, currently, like I said, I think four years is maybe even optimistic.
But people need better contrast now. They’ve been clamoring for it.
I was not expecting actually… The response has been really positive, and a lot of people are very eager to be using it.
So that’s where some of these concerns about… Can we? Part of this is coming up with ways that, yes, we can.
I was hoping by the end of the year… I don’t think we’re going to make it on the end of this year. But first quarter of next year, we hope to have the new guidance out on the site.
Right now, there’s an early draft up at www.readtech.org. We’re going to have a much newer draft that’s going to include a “this is how this connects to WCAG 2.” If you follow this one path, you will be backwards compatible.
We’ve been working on that the last couple of months, and a couple of users had brought up “What if we do it this way?” What if we turn off the polarity sensitivity, as an example—WCAG 2 doesn’t do that—that will actually make it so that everything under Lc 75 will beat 4.5 to 1 and do so handily, if you’re in this non-polar mode. We’re going to add the non-polar mode.
Two other things we’re adding in the next couple months are a specific module for dealing with certain kinds of color vision deficiencies and also a direct output of how thick your line should be for non-text.
Then the paper reading experience is just a set of guidelines that… If you look at the www.readtech.org website, most of it is in this style that is set up where you have a bright white border that’s thick, like at least 6 px thick, that anchors your eye and an adaptation point for brightness.
But then the text is on a background that is at about 85% of that, which is about what paper is. So you end up with a background for the text at the lightness of diffuse paper. The bright border locks your eye in terms of your perception.
Let’s say you set your background to #ddd, which is a little dark. But let’s say you just did that. Well, your eye, if that was the only color for your background, is just going to make that white, and you’re going to adapt to that. That’s going to become your peak white. That’s not going to help you for fatigue.
The problem with fatigue is you adapt to whatever the brightest thing is on your screen. If that’s too bright, it’s like looking into a light bulb. You’ve adapted to this bright light, and you end up with visual fatigue after an hour or so or however long it takes for some people. For me, it’s like 20 minutes.
But if you can make this part that you’re actually looking at so that your periphery is anchored with a bright white border, but the text is against 80%/85%, you won’t have that same eye-blazing fatigue that you get looking at sites with a white background—that I get, at least. Not everybody does. Some people prefer that, particularly people with younger eyes.
Colleen: I prefer it. Well, my eyes aren’t so young anymore, but I prefer light mode.
Andrew: I know people with astigmatisms, and I have an astigmatism. I still prefer dark mode. But a lot of people with astigmatisms don’t like dark mode.
It takes a little bit of getting used to. The funny thing is that back when I first got into computers, which was in the 1970s, everything was dark mode. We didn’t have color screens. Everything was like either green and black or yellow and black or…
Colleen: I remember that.
Andrew: Yeah, exactly. So you were always working in that kind of dark mode way.
Then when color screens came along… Actually, really it was Mac… Well, actually, Xerox, PARC and then Mac came up with the whole “let’s make it paper white.”
Those were little CRTs. They weren’t that bright, so they weren’t really eye blazing. But these new modern monitors can be so bright, you can use them outdoors. They’re so bright. It’s literally like the “staring into a light bulb” effect or the “snowblind” effect is what I sometimes refer to it as.
It’s not as bad as being snowblind. That’s actually ultraviolet damage. You’re sunburning your eyes. But it feels like that to me sometimes.
I guess the last thing to mention is that on dark mode, one of the reasons that a lot of people don’t like it is because there’s too much contrast between the light letters and the dark background. Especially as you get older, the ocular medium in your eyes, your lens starts to get a little cloudy, you get a lot more scattering and halation. Everything looks like it has a glow around it.
That’s often due to just too much contrast between the background and the light letters. That’s why we’re experimenting right now with maximum contrast for dark mode. So there’s that.
Colleen: People with Irlen syndrome can have issues when they have that really high contrast.
Andrew: There’s some controversy about it. But certainly some people are helped by colored lenses. I don’t think you need to spend $300 to have proper colored lenses. That’s kind of where the controversy goes. Really what we need right now is we need some more research and study in that area.
It’s also referred to sometimes as “scotopic sensitivity syndrome,” which, again, doesn’t make a lot of sense to me, because it’s always happening in the photopic level of vision. Scotopic is our night vision, but it’s actually happening in when people are day reading, and they see that swimming letter effect.
But, again, there is not enough research right now to really give some definitive answers.
I haven’t incorporated this in Bridge PCA yet, but it will be soon. That is the non-polar mode for backwards compatibility, just so that people have something that’s even more like what they’re used to, as we’re moving forward, because I recognize that this is a big paradigm shift.
It’s a lot to say rip the bandage off all at once. So trying to try to do things in a staged way where there’s easier-to-grasp concepts and then as you as you develop…
A lot of this you’ll recognize as classical design guidelines really. A lot of this stuff goes back to things that we’ve learned over the last several hundred years of print work as as that can be applied.
But you’ll see that the guidelines at www.readtech.org/ARC couched in these concepts like use cases of…
Here’s an example: your columns of body text need to have very high contrast, because it’s small, thin text, and you want people to be able to read that. We assume that you want people to be able to read your articles.
But what about a copyright bug (the little R) or stuff in the footer? Does that need to be the same contrast? No, it doesn’t.
In fact, you don’t want that same contrast, because you want to have a visual hierarchy that draws your eye through the important content, and you’re not distracted by unimportant content.
If everything was all at high contrast, then that makes it very difficult to look at the page. In fact, this is one of the problems I have. I need more contrast.
But high contrast modes are very often way overdone, where everything is of some blazingly high contrast. I can’t tell what I need to be looking at.
We as designers want to be using contrast to guide the viewer where we need them to be looking for the content and having that visual hierarchy.
That, by definition, means that not everything should be at the same high contrast. Some things need to be at lower contrast.
Because WCAG 2 is not perceptually uniform, there’s no way to use that contrast metric to come up with a good visual hierarchy because it’s too off. By the time you get to dark colors, it just doesn’t make sense.
With APCA, it’s built around the concept of Lc 15—lightness contrast 15. Those are increments that we find are perceivable by most people, including people with impairments, as a difference between something that’s more contrasty or less contrasty. That gives you a number of different levels of contrast that you can use, depending on if it’s important content or if it’s something that’s a throwaway, like a copyright bug or a disabled [inactive] control.
WCAG 2 doesn’t have anything specified for disabled controls, but we do in APCA. We have guidance for that. We have guidance for the placeholder text and if it’s a label or not a label, and so on and so forth.
All of these things are important. They’re important to have at least some general guidance on.
Like I said, one of the big things here is having that visual hierarchy to help people really understand what’s going on. This is one of the problems we have today.
There are websites out there that have so many blazing colors that it’s very distracting and really hard to look at. People with ADHD might have problems with that. They need something that’s much more subdued and much more pastel, if you will.
But they also need things that are ordered in such a way, with contrast in such a way, that they know where they need to be looking. This is something that—this is way in the future, I think, certainly not this coming year—is the idea of automation.
We’ve talked about we know we need a light mode and dark mode. But you actually need two dark modes, at least, we know—dark mode for daytime use and a dark mode for nighttime use.
We need a couple of different light modes, depending on how much contrast somebody might need.
We need daltonization modes. Those are modes where colors are shifted to help people with a colorblindness or a color vision deficiency. We need a lot of these different modes.
That’s a lot of work for a designer to come up with all these different modes. It’s just too much. You can’t do it.
To make that happen, we need a perceptually uniform measure, so that we can automate those things. So the designer can come up with one or two schemes, and all the other schemes can be created automatically from those two base schemes in a way that will be predictable.
We have a model now that follows human perception, and, using this human perception model, we can bring in automation and automate a lot of these tasks that right now require a designer to…
I mean, I’ve seen some design systems where there are 130 colors. That’s a lot to go through to come up with a different scheme, where you have 130 different color variables that you need to work with. If that was all automated, and you just need to maybe fix a couple—or hopefully not have to really fix any… That’s an enormous workload that should be automatable, but can only be automatable with perceptual uniformity.
So that’s what we’re bringing to the table right now. I’ve tried to hint that we’ve got a lot more going on and a lot more fun stuff coming up that’s going to be helpful, including another method that we’re working on is called SA-CAM, which is the is the is the SJUV Accessible Color Appearance Model.
It’s not just luminance, but it deals with hue and saturation as well. It’s a more complete model for coming up with palettes, not just for contrast. That’s in the lab right now. We’ve been working on that off and on. It’s not our highest priority, because we have a lot of these other things that we need to get out sooner.
But those are the things that are in the future that we’re working on to help designers come up with better, more effective palettes that are accessible for everybody. Eventually, we want…
Really, the holy grail of accessibility is personalization, so that everybody can have, what they’re experiencing—their lived experience online, which is so much of our lives now—is tailored to what they need.
There are so many aspects of visual perception in particular, where what some person needs is a blocker for somebody else or technically harmful for somebody else.
The only way to fix that problem is you don’t want to have a lowest common denominator solution, where everyone is brought down. You want to bring everyone up to the most they can be. To do that, you need real personalization. You need people to be able to select the mode that they want. Really, that’s the direction that we’re aiming all of this eventually.
Colleen: That’s great.
Andrew: Yeah.
Colleen: It’s very interesting. Lots of things going on, a lot of research. It’s really interesting to hear that side of things too.
APCA Contrast Checkers
Colleen: Let’s tell everyone where they can find the APCA contrast checker, so they can start checking their colors.
Andrew: There are a number of third-party tools. There are a bunch in Figma. Most of the other third-party tools actually have both APCA and WCAG 2 on them, so you can select between them.
One of the ones that I like a lot is the tool from Stark. Stark is an accessibility company. They were one of the first to adopt, in addition to WCAG 2, there’s a selection on their contrast checkers that allow you to use that. It’s a great tool. Stark tools are really well developed.
There are also some other tools on Figma.
Learn More About APCA
Andrew: At git.myndex.com, there’s a list of resources. Actually, probably the better one to give you would be the link tree of the essential resources that includes tools and third-party tools and things like that and some articles.
Then for the readability guidelines is readtech.org. That’s where most things are going to be moving in the next year or two.
I’m myndex on GitHub. You can find me there and see the repos that we have going on. The SAPC APCA repo is the main one for documentation.
Colleen: Thanks so much, Andy. This has been really insightful, really interesting.
Andrew: For me too.
Colleen: Thanks.
I think, like you said, more designers need to know about this. I say that all the time too. But I think this is also going to give them back some color pairs that they have not been able to use, because they were previously considered inaccessible. I think that will be really exciting for them too.
So thank you so much for coming on.
What’s the best way for someone to get in touch with you if they have any questions, if they want to follow up?
Andrew: So on GitHub, we have a discussion area at the SAPC APCA repo. We have a lot of repos associated with this, but that’s the one for documentation. We have a discussion area there. I monitor it every day. Any questions that are asked there I usually try to answer within a day.
I also do try to field questions that are either sent to my Twitter account.
Sometimes I’ll take emails too, if I have time. The emails, though, sometimes get lost just because I get so many a day, usually for things that have nothing to do with this. Just there’s so much spam these days.
But I try to be responsive no matter where people try to get at me with any any questions, because I recognize that it’s very new. So part of the mission here is to help get this education and information out to everybody.
Colleen: Right. All right. Well, thank you again, so much. I really appreciate it.
Andrew: All right. Thank you.
Learn More About Accessibility
If you’re interested in learning more about accessibility, check out my free accessibility guides.