{"id":430,"date":"2024-11-08T09:55:01","date_gmt":"2024-11-08T09:55:01","guid":{"rendered":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/?p=430"},"modified":"2024-11-08T09:55:01","modified_gmt":"2024-11-08T09:55:01","slug":"the-times-they-are-a-changin-for-how-we-measure-colour-contrast","status":"publish","type":"post","link":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/2024\/11\/08\/the-times-they-are-a-changin-for-how-we-measure-colour-contrast\/","title":{"rendered":"The times they are a-changin' (for how we measure colour contrast)"},"content":{"rendered":"

Accessibility is a vitally important part of designing modern web content and it\u2019s something we\u2019re passionate about on the Digital team. Colour contrast is perhaps one of the first things that comes to mind when talking about accessible web design even if you\u2019re not a web designer. There\u2019s for good reason for this \u2013 illegible text or shapes that are hard to distinguish against their backgrounds are problems that people encounter every day, whether using digital products or physical ones like magazines or signage.<\/p>\r\n

Making sure web content has sufficient colour contrast means that visitors can easily read text and identify the interactive elements on your pages (though good contrast is far from the only thing that makes interactive elements effective).<\/p>\r\n

Measuring colour contrast<\/h2>\r\n

Saying that elements must have sufficient contrast is all well and good, but how do you know if an element has sufficient contrast? How do we measure it?<\/p>\r\n

The University of Bath website aims to comply with version 2.2 of the Web Content Accessibility Guidelines (WCAG) which contains specific rules for ensuring that content has sufficient contrast. There are various criteria in these guidelines governing colour contrast, but all of them boil down to a rule that content of two different colours must have a colour contrast ratio of at least 4.5:1 for body text, or 3:1 for large text such as headings, or interactive elements like buttons. In simple terms, if two elements have a contrast ratio of say 3:1 then one of them has 3 times more contrast than the other. There are higher minimum contrast ratios for websites that aim to meet higher accessibility standards such as Level AAA, but the vast majority of web content that claims compliance with WCAG will be aiming at Level AA and thus these two ratios.<\/p>\r\n

What\u2019s the problem?<\/h2>\r\n

We\u2019re not experts on this, so we won\u2019t go into too much detail, but in simple terms, the mathematics behind calculating the contrast ratio used in WCAG is outdated and doesn\u2019t accurately model how humans perceive the contrast between two colours. It comes from a time when relatively low brightness CRT monitors were the norm and, according to some experts<\/a>, the mathematics has some fundamental flaws.<\/p>\r\n

Arguably the most important aspect of determining the readability of content is luminance and WCAG\u2019s contrast ratio doesn\u2019t do a good job of taking luminance into account. Because of this, it tends to overstate the contrast of darker colours that have little to no luminance. This can result in some colour combinations that pass the 4.5:1 ratio but are functionally unreadable. It\u2019s particularly bad if you\u2019re designing a product that supports dark mode. We\u2019ll see some examples of this later.<\/p>\r\n

There is also the problem of a binary pass\/fail result. Designers have long had a problem with WCAG\u2019s approach here. Humans are very different from one another and contrast, like anything that we see, is perceptual. A combination of two colours may look different between two different people for all sorts of reasons, including the ability of their eyes to resolve detail, how their brains process the image, whether or not one of them has any colour vision deficiencies, and more. Therefore a simple binary PASS or FAIL isn\u2019t that helpful and could actually be letting people with colour vision deficiencies down.<\/p>\r\n

APCA as the solution<\/h2>\r\n

The Accessible Perceptual Contrast Algorithm, or APCA, is a new way of calculating colour contrast. In contrast (pardon the pun) to WCAG, APCA is designed with self-illuminated RGB displays in mind and also accounts for different colour spaces, including high dynamic range RGB.<\/p>\r\n

ACPA generates a value for lightness contrast (Lc) for a pair of colours. This value is \u2018perceptually uniform\u2019. This means that unlike WCAG\u2019s contrast ratios, it works equally well for dark and light colours and doesn\u2019t overstate one over the other.<\/p>\r\n

By focusing on luminance, which is the most important characteristic of readability, APCA is also able to do a better job of accounting for text of different weights, or in the case of interactive elements like buttons, lines of different thicknesses. Text which is smaller and thinner effectively has less luminance than bigger or thicker text of the same colour. This is shown in the image below where the luminance of varying text size is plotted on a logarithmic scale chart with contrast sensitivity on the y-axis and spatial frequency on the x-axis. The curve of the plot takes on an inverse J shape with high luminance large text high up in the top left of the curve. As text size and weight decreases, their luminance values also decrease and they end up further along the curve.<\/p>\r\n

\"A<\/a>
Image from Myndex Research<\/figcaption><\/figure>\r\n

The APCA guidelines also recognise that not all use cases are the same in terms of luminance and readability. To address this, it implements a range-based scoring system for the Lc value with milestones along that range indicating some discreet values to aim for. Lc 90 represents a high lightness contrast and is the preferred value for normal or small body text with regular weights and a size of no smaller than 14px. Lc 45 represents the minimum level for heavier text like headings. Lc 15 is considered the absolute minimum level as it\u2019s considered invisible for some users and should only be used for non-text and non-interactive elements that are of low importance. There are many other levels between these three but we won\u2019t go into detail on those here.<\/p>\r\n

Examples of WCAG vs APCA<\/h2>\r\n

After all this theory, you\u2019re probably wondering what any of this actually looks like. Let\u2019s look at some examples to illustrate areas where WCAG falls short and APCA provides a better solution.<\/p>\r\n

First. we have a medium orange background with white (#FFF) text on top. At a size of 24px or greater, it\u2019s quite readable. However, this colour combination actually fails WCAG\u2019s blanket ratio of 3:1 for text at this size. In contrast, the APCA Lc value shows that it has enough luminance to be considered readable at this size.<\/p>\r\n

\"""\"<\/a><\/p>\r\n

Let\u2019s look at another example, this time one where WCAG incorrectly results in a pass. This is a good example of the \u2018dark mode\u2019 problem inherent in WCAG\u2019s colour contrast approach. We have a dark background with light grey text on top. Each of the four lines of text illustrates compliance with a different level and varies the text colour to meet the minimum contrast ratio or Lc.<\/p>\r\n

\"""\"<\/a><\/p>\r\n

The image above shows that while all of the colours meet their respective requirements, the WCAG text is less readable across the board, with the small text in particular being almost unreadable. Yet this would be considered a pass under WCAG.<\/p>\r\n

Where do we go from here?<\/h2>\r\n

It\u2019s clear that the APCA offers many benefits over WCAG\u2019s simplistic colour contrast model. In fact, even The World Wide Web Consortium (W3C) - the custodians of WCAG if you will \u2013 agree. They\u2019re planning on using APCA as their colour contrast model in the upcoming WCAG 3.0 standard. However, WCAG 3.0 is a long way off and is not expected to replace WCAG 2.2 for some time, probably years.<\/p>\r\n

Despite the unknown release date of WCAG 3.0 , the benefits of using APCA are clear, so we may well begin to use it in favour of WCAG\u2019s colour contrast model in the near future, phasing it in gradually. For the time being, we still have to comply with WCAG 2.2 so in instances where there is disagreement between the two approaches, WCAG\u2019s colour contrast model will have to take priority.<\/p>\r\n

Further reading<\/h2>\r\n

In writing this blog post, we fell down a bit of a research rabbit hole and made heavy use of several articles, including a few written by Andrew Somers, Director of Research at Myndex Technologies. He was even invited by W3C to consult on WCAG 3.0 as an expert in this field. His \u2018easy intro to the APCA contrast method<\/a>\u2019 and his article in Smashing magazine on \u2018the realities and myths of contrast and color<\/a>\u2019 are particularly good reads if you want to find out more about APCA.<\/p>\r\n

 <\/p>\r\n

 <\/p>\r\n","protected":false},"excerpt":{"rendered":"

Accessibility is a vitally important part of designing modern web content and it\u2019s something we\u2019re passionate about on the Digital team. Colour contrast is perhaps one of the first things that comes to mind when talking about accessible web design...<\/p>\n","protected":false},"author":1554,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[39],"tags":[43,42,46,44,47,45],"class_list":["post-430","post","type-post","status-publish","format-standard","hentry","category-accessibility","tag-a11y","tag-accessibility","tag-apca","tag-contrast","tag-perception","tag-wcag"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/posts\/430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/users\/1554"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/comments?post=430"}],"version-history":[{"count":0,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/posts\/430\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/media?parent=430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/categories?post=430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/tags?post=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}