💡Have you ever wondered why the WCAG colour contrast ratio doesn't always seem to work?💡

Well it actually has to do with how we calculate colour contrast and is super interesting.

Hold on to your butts, this is a 🧵
Before we dive deeper, we should remind ourselves how colour actually works.

On screens we build a colour by adding together three different colours, Red, Green and Blue.

This is called additive colour.
For instance, this peachy colour is:
100% 🔴 + 50% 🟢 + 50% 🔵

On the web, we can get 16.7 million combinations of these values - so 16.7 million different colours.
Back to contrast... what is it actually?

Well, it's the difference in relative luminance of two colours.

Relative luminance is how bright a colour is relative to pure white, the brightest colour.
The way we calculate this is simple:

1. Get the luminance values of our colours.
A value between 0% (black) and 100%(white).

2. Divide the two values.
This gives us a ratio with a max of 21:1 and a min of 1:1
Okay, that's cool and all but why does this goof up in some cases?

Well the first problem is the way we figure out how bright a particular RGB colour is, using this equation:

Luminance = 0.2126*R + 0.7152*G + 0.0722*B
Notice how we multiply every channel by a slightly different value?

That's to accommodate for the way we perceive the brightness of the red, green and blue spectrums.

We perceive green as brighter than blue, for instance, and the equation compensates for this.
BUT, there's some dispute over how we should correct for this.

Some alternative algorithms weight the channels differently to better accommodate for human perception.

A new WCAG working draft uses this weighting:

Luminance = 0.299*R + 0.587*G + 0.114*B
Given the same colour these two approaches will produce quite different luminance values which has knock on effects for the contrast calculation:
The second problem is the contrast calculation itself, which looks like this:

Contrast = (L1 + 0.05) / (L2 + 0.05)

Where L1 and L2 are the luminance values of the respective colours.

(the +0.05 is a gamma correction thing which I don't get 100%)
The problem here is that human perception of contrast isn't linear.

For example, these two sets of colours have the same contrast but we perceive the one on the right as having more contrast than the one on the left.
This is because we have a tendency to perceive higher contrast between brighter colours than between darker colours.

Modelling our perception accurately is super tricky but there are a few other ways to calculate contrast.

Here's how one of them (CIE ∆E*) effects these results
This is all compounded when you consider how old these specs are.

The sRGB spec uses an 80 nit monitor as a reference but modern displays can easily be 300 nits.

(By the way, the Pro XDR is 1000nits, 1600nits peak 🤯)
So where does this leave us?

Well the good news is lots of smarter people than you and I are working to make this better.

But it's going to take a while. Standards are difficult to change for a reason.
It's also worth pointing out that you shouldn't just ignore the WCAG contrast guidelines completely.

They are still really useful.
They just don't get it right 100% of the time.
If you want to learn more, there is an incredibly in depth discussion on the WCAG GitHub:


• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Dan Hollick 🇿🇦

Dan Hollick 🇿🇦 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @DanHollick

30 Dec 20
💡You might have seen a lot of chatter on here about React Server Components recently.

If you're like me, and you didn't quite understand what the hell they are, you'll find this thread helpful 🧵 Image
In essence, React Server Components are just that. React Components that can be rendered on the server before being sent to the client.

But isn't that what Server Side Rendering is? And haven't we been doing that with Next.js for a while? Image
Yes, and no. To explain lets's look at how React apps are usually rendered.

Imagine we are trying to render the Github issue UI and the components look something like this Image
Read 14 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!