Colour contrast vs APCA
And why it is time to change from 4.5:1 to Lc 60
When it comes to accessibility the very first principle says that the designers need to maintain a minimum contrast of 4.5:1 between the text and its background. This is the AA level passing criteria, which makes the normal text element, or body text accessible. Today, let’s try to find out what this actually means!
What is contrast?
Oxford dictionary defines contrast as the state of being strikingly different from something else in juxtaposition or close association; focus on the word, strikingly. This means when looked at the combination, a person should be able to tell the objects apart, with ease. The easier it is to tell the objects apart, higher is the contrast. In the example below, I am sure everyone can see the contrast in action!
In case of black and white, calculating the contrast between two elements is straightforward. But this starts getting complicated, when we introduce colours!
… and then the devil said, thy shall make the displays colourful!
How the contrast is calculated for colours
If you observe the image in the last paragraph, you can see that the high contrast image has a high luminance object, placed on a zero luminance background. As the luminance of the objects starts reducing, the contrast between the object and the background also starts reducing. At the very end of the spectrum, when the luminance of the object matches that of the background, the contrast effectively drops down to zero.
When it comes to colour displays, the colours are formed by the levels of Blue, Red and Green wavelengths in them. We have used the RGB values to define colours especially when it comes to iOS development. It seems like Apple does not like to be hexed (Yes. It is a lame pun. I get it!)
The basic RGB colour theory operates on colour values ranging from 0 to 255, 0 being absence while 255 indicating 100% channel colour.
The above diagram showcases how these colours operate and how RGB values get assigned to each colour. In the diagram, we can see the construction of colours, yellow cyan and magenta.
Now that we have understood how the colour values are defined. Let's move on to colour contrasts. As we have learned earlier, the contrast is calculated based on the difference in brightness, which in technical terms is referred to as Luminance. Each of these colour wavelengths has a a different luminosity. If we add a layer on top of the above diagram, to remove the colour (hue) information, we can see, that the green band shines more brightly than the Red or the blue one.
This means that the luminance cannot just be calculated based on the RGB values of the colours, but we need to adjust the formula to cater to the luminance effect of green as well. The formula for the luminance looks something like this;
Luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B
Where, R, G and B are defined as ;
In the formula above, X is the derived value ( of R G and B), X act is the actual numerical value of the channel on the RGB scales. This formula is valid for all the values of X act >10. when the Xact values are less than 10, then the values of R,G and B are calculated as;
X = Xact/3295.
This shows that if the colour has more Green, the colour will be more bright or luminous as compared to the other two, provided all the other values are constant. With this formula, we can get the luminance of pure black #000000 or RGB 0,0,0 as Zero, while, we get the luminance of pure white #FFFFFF or RGB 255,255,255 as 1.
With this adjusted formula, we can now calculate the contrast ratios between two colours. The contrast is calculated by the formula
Contrast Ratio = (L1+0.05)/(L2+0.05)
where L1 and L2 are the luminance values of the colours that we wish to compare. If we place the values of Pure Black and Pure white in the formula, we get the highest possible contrast value of 21:1! (just to add here, the requirement for AAA level compliance is just 7:1 )
To be honest, nobody has to really go into the depth of how the contrast ratio is calculated to be able to apply them effectively. The WCAG guidelines have created compliance standards of contrast ratios for different text and button styles. For example AA compliance requires the contrast ratio of 3:1 where as AAA compliance requires the contrast ratio between body text and its background to be 7:1.
While using Figma, the contrast plugin is one of the best and handy ways of calculating the colour contrast between the foreground and the background. I have been using this for a long time now and you may see a lot of screenshots taken with the same plugin in the subsequent sections.
So where is the problem?
The contrast ratio work on the machine level information of the luminance of three channels combined. It does not work in accordance to the human eye. There are many colour combinations that pass the contrast requirements, but are not so easy on human eyes, despite the better contrast. This phenomenon can be explained very well with the famous orange button problem.
The last startup that I was working for had orange in their brand colour. We wanted to create the website and we were struggling to get the right colour for the text on the button. While the Black text passed the AA compliance with 6.3:1 contrast ratio, it was difficult to read in reality. White text on the other hand, failed to achieve the contrast ratio and failed the AA compliance. But in reality, White text was much easier to read on the Orange button!
There are other colour+ background combinations that are easy on eyes, but have failed to be compliant with the traditional contrast standards.
This put all of us in a dilemma, and thus began a hunt for more agreeable solution!
Enter, APCA!
While researching on the Orange button problem, I came across the APCA, or the Advanced Perceived Contrast Algorithm. The term perceived contrast indicates that the algorithm does not just rely on the luminance comparison, but also takes into account other factors that contribute to the way colours are perceived by humans! Let’s deep dive into why this is a better choice!
Inner workings of APCA
The colour combination
APCA takes into account which two colours are being compared. It does not produce the contrast ratio based on just the luminosity, but also the actual perceived colour of the elements. It converts the colours into a spatial relationship and analyses the way colours interact with each other to generate the readability score.
The text size, spacing and weight
APCA also considers the size of the text that is being placed. The WCAG guidelines mention the specific contrasts for specific sizes, but APCA has that built in. Larger letters are easy to read and can still work with lower contrasts. Same principle can be used for the text weight as well. Bolder text is easier to read when compared at the same sizes. Spaced out text is easy on eyes than a block of text with narrow spacing. These factors are used to refine the spatial readability assessment created by the colour relationship.
Readability Score instead of pure contrast
APCA produces a readability score instead of the traditional contrast score. It produces the final Lightness contrast score or Lc Score that predicts the readability of the combination of text and background. The minimum Lc score to be aimed for is 60, but it can vary based on other environmental factors. (Lc:60 can be assumed to be equivalent to AA standards)
The image above shows how the Lc values can still be within compliance limits, when the traditional methods of calculating contrast fail the colour combinations. The same button, which failed to maintain AA compliance on slightly coloured backgrounds, passed the minimum Lc requirements. Calculating the contrast this way can make a designer more confident about the choice of colours used for the text and the backgrounds. This also allows the designers to experiment more with the text weights and spacing to work within the colour constraints established by the branding guidelines. Another brownie point, this method of calculating the Lc is more accurate for the current trends of Dark mode designs.
When used with the same tool discussed earlier, the APCA through the contrast plugin provides guidance as to where this text + background combination can be used and where it should be avoided. If we conduct the contrast test on the same orange buttons in the previous example, these are the results
As you can see, the Black text on Orange button received a score of 45, while white text, which is obviously more readable, received a score of 64! This indicates that the the choice of selecting white text on orange buttons was a better one!
Yes, I have compiled books!
Every once in a while, the content gets a bit large for blog posts. So it is assimilated and published as a book (or a notion template). You can buy the existing books and find upcoming books on this page.
Conclusion
Although the traditional methods have guided most of the designers in maintaining healthy contrast ratios on the UI, it is time to make some changes in the way they are calculated. APCA is still under development (notice the Beta tag!) but has been delivering promising results. I will encourage all the new designers out there to start using APCA in your designs. You can try out various combinations on the myndex site (it looks ugly!) or if you are a Figma user like me, you can download the contrast plugin and start enhancing your designs with the new and advanced contrast checker, that works like humans do!