APCA algorithm and colour contrast: why compliance is not enough

[Renata] So let's give a warm applause to Juan Ruitiña.

[APPLAUSE]

[Juan] Hi.

[Renata] Hello. We're so happy to have you here. And, you have a background in journalism with our passionate UX Designer.

[Juan] Uh-huh.

[Renata] You are very interested in, ethical design and digital well-being,

[Juan] That's right.

[Renata] And you will tell us why we are calculating contrast wrong. That was completely new to me, so I'm very excited to hear what you can tell us about it. So the floor is yours.

[Juan] Thanks a lot. Hi, all. Yeah, now we're going to talk again about something fairly practical following the previous presentation as well. I'm going to be talking about colour contrast how we calculate it, why it is important, and most importantly, maybe how we're calculating it wrong.

There will be a twist by the end of the presentation, you will see that this is a bigger topic, right, about how we might be doing accessibility wrong in our organisations and how compliance might not be enough.

Oh, yeah. So first of all, just a bit of background on who I am. I'm a user experience designer in a tech company called Canonical. We're well known for our operating system Ubuntu, one of the most popular versions of Linux. And I also have a background, as Renata said, on journalism.

So I've been interested specifically in data visualisation for over a decade at this point, and it was when designing data visualisation guidelines for my organisation, they first became interested in accessibility.

I'm a practitioner. And when doing a visualisation, we're conveying information with colour, and I have a responsibility towards my users that they can read what I communicate them. So for that, it is very important, the topic of today, right, colour contrast.

Colour contrast is one of the most basic checks that we do on our website, right? You can read this slide because there's enough contrast, right? There's enough contrast between the black of the text and the white of the background.

And then, of course, sometimes that goes wrong when there is not enough contrast, and then it is, of course, harder to read.

I think colour contrast is also very interesting because it affects virtually every sighted user, right? So any user, any sighted user, that is reading this might have troubles, understanding what's going on.

But it is affected by other things as well. Right? Of course, the users that might have low vision, right? And one of the conditions that causes low vision is cataract, which affect roughly, like, 15% of the population, particularly they are older than 65 years old.

There is also colour vision deficiencies, more commonly known as colour-blindness. Right? So colour-blind people might perceive, colour combinations differently than the average.

And then there's some situational circumstances right, you might be outdoors in a bright day and struggling to see what's what's on your screen, right, or also it can happen that you're using a screen that maybe is not that good quality.

And while I've been there, like, I've been dealing with old monitors in my office, and struggling to differentiate a light grey from white, but also actually now here, the fact that this is a projector, and not a screen will cause also a different perception that I had when I was putting this together on a laptop, right? So

[Renata] I'm gonna ask you to speak a little bit slower for the SpeakSee.

[Juan] Sure thing.

[Renata] Sorry to interrupt you.

[Juan] So, how do we calculate what is enough contrast, right. I guess many in the audience are already familiar with WCAG, right? With the Web Content Accessibility Guidelines. So, this is the international standard for digital content, right? For the accessibility of digital content.

And it specifies what is the sufficient contrast for content, right? So it's 4.5 to 1 contrast ratio for the body text, most of the content that you put on a page, and 3 to 1 for the rest. And it also provides an algorithm for calculating that.

That algorithm is everywhere, right? There is plenty of tools online that you can use to calculate these. You enter a pair of colours and it gives you this contrast ratio. But it's also built in other tools.

Like, for instance, developer tools, you can use it on Google Chrome, but also even in mainstream editing tools like Microsoft Word, they incorporate now these checks.

And maybe even more importantly, maybe in your organisation, if you're using automated tools, then they might be using also this algorithm to check in if you have maybe a colour combination that is not accessible.

So now let's do an experiment. Let's look at these 2 buttons. Again, this is a projector. So maybe this might differ to how people might see it on a screen on their laptops or on their phones. And I'm going to ask you which one of the two is easier to read for you.

So we're a few hundred people in this room right now. So there will be many different perceptions by the size of the room, there's roughly a dozen people that are colour-blind, maybe.

So, yeah, there might be different perceptions. Still, we know that the majority of users would prefer the one on the right on the screen. However, when we pass these by the algorithm, we see that it fails the test.

Another example, and this is probably clearer in the projector. Same question, which of the two is easier to read. A majority of users will likely prefer, again, the one on the right. This is a pretty relevant example.

Blue is for links, links still have blue as their default colour. Once again, when we run it by the algorithm, it fails, right? By the way, this should pass like 4.5 to 1. So, yeah, it clearly fails.

So by intuition, many designers, and I'm included there, we realised that there was something off about the algorithm. For two companies in a row, I've had orange as my corporate colour, so I'm very familiar with that. Very Dutch colour, by the way. But I'm not the only one.

So there was this researcher, Erica O'Connor, who did some research in her company. With some colour-blind users, colleagues, and she found out actually a majority of them, not all of them, but a majority of them preferred the one on the right.

As for the example in the bottom, we are currently, well, we have a dark theme. This very popular, dark themes, right? Nowadays on the web and on apps. And we are designing it. And so nailing down the shade of link may seem small, but it's super important, right.

You really want your users to get what they want to go or maybe to buy what they want to buy. Right?

So we know now that the algorithm is wrong, and why is that? Why is that exactly? So let me get a bit technical for a second because I'm going to get a bit into the science of it.

Let's talk about colour spaces. Colour spaces is a digital representation, if you like, of the colours that humans can perceive, right? So we've been trying to do this for centuries, actually.

This was done by Isaac Newton over 300 years ago, right? He tried to represent the colour spectrum in a chart, right? And we can see the colours that we're very familiar with, right? Even in English. Orange, yellow, green, blue, red.

And, actually, this is not that far from the colour space that is maybe the most common, which is the SRGB colour space, which stands for standard, red, green, and blue.

You might know this already, but every screen that you have on your phone, your laptop, it combines those 3 colours to virtually represent every other colour.

The issue with this is that this is a pretty basic colour space that doesn't acknowledge for the complexity of human perception. When we turn it into black and white, we see that colours actually have some intrinsic perceptual properties, if you like.

So actually, blue is we perceive it as darker than red and red as darker than green or yellow.

So the thing is that nowadays, there are better colour spaces, right, that account for all of these. They are called perceptually uniform. That means that we can create with some colours that are uniform that we perceive them on to be, for instance, to have the same brightness or luminance.

One of them is the hue. Oh, there's many of them they are called Hue Chroma Luminance.

And in this case, with these colour spaces, it is very easy to create alerts that as you can see here, when we turn into black and white, they have the same degree of luminance. This is super useful for data visualisation, by the way.

So why is all this important? Why it is important to use a colour space that understands, well, how we perceive luminance or colour? Humans. Right? So I'm going to hear an example from Andrew Somers.

So I'll be talking about him in a minute. You can see this picture of a parrot. It's fairly detailed. You can see the feathers, bright colours, the eye, many details. Right?

When we split the luminance or the lightness in the image and the colour, we can see that it is the luminance, the light, that holds the most information in terms of detail, right? So in terms of contrast, that is more relevant.

So if we go back to the previous examples, we will see that, you know, the colours are clearly different. Right? Nobody would say that orange is close to black. Or that blue is close to black.

But it is in the limited lightness contrast that we might struggle perceiving, reading the text in there compared to the one on the right-hand side.

Based on this better understanding of colour perception of humans, we have now better tools, right? And one of them is APCA, A-P-C-A, call it, which are what you like, which is the accessible perceptual contrast algorithm.

This algorithm was created by Andrew Somers, which is this person I just mentioned. He has a background. He has plenty of experience in the film industry, actually, but he has been focusing on colour contrasts and accessibility issues and readability for the last few years.

So this algorithm, is a model for better understanding, this contrast and better calculating the contrast between two colours, acknowledging all these things that we've been just discussing, right, the perception, and some other details. So why is it better?

For starters, it uses a better colour space. The WCAG algorithm uses SRGB, APCA uses the LUV perceptually uniform colour space and, hence, has these better understanding of lightness contrast, if you like.

But it also has some other details. Like, for instance, it acknowledges that it's not the same that there's, a text in black and background in a light background and the other way around. So it really matters which of the two you are assigning that colour.

And it also acknowledges, font weight and size in a very precise manner. We can provide some guidance.

It distinguishes between large text and non-large text and also between bold and regular font, but there's way more than that, right, there is light fonts there is, you know, sizes to the pixel.

And that's something that you can achieve with APCA. You know, the minimum size of text for a pixel for a given combination of colours that is accessible.

So now if we run the previous examples by APCA, by the new algorithm, we will see that, yeah, it actually matches our perception more closely. And that happens with orange, it happens with blue, and there're solid colour pairs.

Generally, it works better, particularly if you are using a darker background. That's where WCAG is failing most often.

So now it's the big question. Right? So, is APCA part of a standard already? Right? I guess most of the people in this room working on not most, but many work in government. So you might have strict compliance requirements. And this is an important question. Right? So the answer is clear. Right?

No. It's not part of a standard. This is a fairly new and evolving algorithm, it is not part of WCAG 2. It might become part of WCAG 3, but as you may know, that may take years to happen.

And we know also that, you know, because of regulation, you might be familiar also. I know here in the Netherlands that the standard, the EN 301 549 is a big thing, something that you need to comply with, and it explicitly mentions WCAG 2, right?

So I guess that's something to keep in mind.

But that doesn't mean that we cannot use it, right? There's many ways in which we can use APCA already that are not that risky, right.

So the first of all is actually to check with both algorithms, right, at the very least, we want to avoid to have false positives, right. There's nothing worse than thinking you're doing things right, that you run every test, it's supposed to be accessible, but it isn't, right?

So that's definitely something that you can do straight away.

There's also this tool called BridgePCA also created by Andrew Somers. Which, lets you use the algorithm in a backwards compatible way.

And what I mean by that is that you can enter the value for two colours and it would return the contrast value, for instance, at 4.521, for the colour pair in a way that you can understand more easily with APCA.

And this is helpful because of all the details, and the nature of the algorithm, there is a steeper learning curve to this algorithm, right? And actually, that's what we are going to be talking about in the afternoon session so if you're joining.

And finally, the other thing that we'd invite you to do is to experiment with real users, right.

Regardless of what algorithms say, it is always helpful to test, maybe, I would encourage you to locate some colleagues willing to help with this hopefully, even some colour-blind colleagues, I recently found out I have a friend, called Sarah, who is a colour-blind. I'm definitely using her advice on these. So, yep.

So if we look for instance, about this example I was talking about, the fact that we are looking into the colour of links in dark themes, right. If you cannot find a colour combination that satisfies you, you can always rely on alternatives, right, that's something we do in accessibility.

Maybe you cannot rely on colour alone, and maybe it's not even advisable, so you can convey meaning in other ways, right. That could be by using icon, by using underlining.

But then, there's also context, right, and this is something that's acceptable within WCAG. There's a reason why we don't underlign links in navigation. It's because users already know what a navigation looks like, and they can infer the function of it.

But then there's another question. Can I just be not compliant? So as part of researching for this case of the colour of links. I was very curious to see what competitors were doing. Right? I'm talking big players here.

So when doing this benchmarking, I could see, for instance, well, this is GitHub, and this is an iPhone screenshot.

And we could see, we noticed that the colour combinations there are perfectly accessible, theoretically. If you run the colour of the blue, by the tool compared to the white of the text, of the dark background, it passes the WCAG test.

But interestingly enough, we also were able to locate some feedback from the community saying, this is not readable, right, it's particularly relevant in case for an iPhone, right? You want your iPhone to be really accessible, right? Because you're using it every day.

So we look into some other examples from big players to Microsoft, what they are doing in VS Codes, their app, or perhaps my favourite example, Google search, right, still the biggest website in the world, probably that will change soon whatever we have new AI tools taken over.

When we look into the choices that they made, we see, for instance, that theoretically, that blue, the blue in the links doesn't have enough contrast with the text that is to the side, right?

So in other words, theoretically, yeah, it's harder to discern or differentiate the link from the text, but it seems that Google took a very opinionated take on these. They favour readability.

So when you look at these and compare it to the previous examples, it is undeniable that those links are clearly readable, right?

So I'm not going to give you any legal advice. I'm not a legal expert, but I think that decisions like these can be done ethically.

So if you test, if you research, if you communicate your decisions, maybe, to the community and remain open to feedback this is the kind of compromises that might be worth considering.

Again, I understand that many of you work, with strict compliance requirements, so you might not be able to do this, but it's worth considering. And in any case, you also have the alternatives.

So we've been talking about in very practical terms about what this algorithm being wrong means to us. But in the end, I think this leads us to a wider conversation on the way we are doing accessibility.

This is a cautionary tale warning for us for not becoming too reliant on standards, on automated tools, on algorithms for every single decision.

Accessibility is a practice, right, and accessibility is as complex as human nature. So, it is good to remain slightly sceptical about all this and keep searching to improve the standards. They will ever be evolving and we should remain informed about all these issues.

Researching is important. Doing research in your organisation and having this willingness to make the right decision. I know this may make us a bit uncomfortable. Sometimes we cannot do it. Sometimes we need to make compromises. But it is worth trying.

So in the end, I guess that it is more important that, for instance, my friend, Sarah, she has a newborn baby it's more important that she can find some relevant information maybe about health on a government website, than me just feeling comfortable, checking all the boxes having an automated tool telling me I'm doing it right and going by the letter of the law.

Because in the end, real accessibility is more important than just compliance.

So, yeah, I want to thank my colleagues, Hayden, Lubon, Max for contributing in what we are now for this presentation, Andrew Somers for not only for the APCA algorithm, but also for publishing so many research to the public, and to Erika Seastrom, there is some Marie Fine, and I forgot the name of that one, damn.

And Lisa Chandler to move for this research, and thank you all for your time and trust.

Thank you.

[Renata] Thank you.