Calculating contrast

The Success Criteria 1.4.3 of WCAG 2.1 at level AA can be summed up as:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.

But what is this contrast ratio?

It is the equation (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.

Cool, but what is relative luminance?

It is the perceived brightness of a color and even more math!

Example

Let’s take the pure color blue, represented in hex as #0000FF.

Hex codes represent three numbers in hexadecimal format. These numbers go from 0 (00) to 255 (FF). The first set of two digits are red, the middle two are green, and the last pair is blue.

So our blue color is 0 red, 0 green, and 255 blue. We now divide each of these by 255 getting 0 for red and green and 1 for blue.

As 0 is less than 0.03928, we divide it by 12.92 which results in 0. 1 is greater than 0.03928, so we add 0.055 and then divide by 1.055 and finally raise it to 2.4 to get 1.

These numbers can now be used in the luminance calculation which turns into 0.0722.

Now if we repeat for white, everything will be one so we can jump to the luminance calculation getting, 1.

Now for the final calculation of the contrast ratio. 1 is bigger than 0.0722 so it goes on top of the ratio. 1 + 0.05 is 1.05, and for blue it is 0.0722 + 0.05 which is 0.1222 and finally we divide this to get the final contrast ratio of 8.59.

And that is why there are a bazillion ratio calculators available online.