Accessibility is one of the important metrics that is measured strictly by almost all web page auditing tools such as Google Lighthouse. The accessibility report contains information like font size, font weight, contrast ratio, and everything else that can impact the readability of a text.

Contrast ratio is one of those accessibility metrics that focuses on the visibility of the text from the color contrast aspect. A web page elements’ colors should be visible enough to be seen and read for all the people with vision problems. In this article, the contrast ratio context is going to be discussed, and you will read about contrast ratio measurement methods.

What is the contrast ratio and how is it calculated?

The “contrast ratio” is a metric that shows an element's color contrast with its background. The higher contrast ratio an element has, the more visible it becomes. As a deeper definition, the color contrast ratio is the ratio of the element’s color based on the background or foreground luminance. For instance, the white color has a luminance of 100% and the black color luminance is 0%.

contrast ratio = (L1 + 0.05) / (L2 + 0.05)
# L1 = Luminance 1 = Light color relative luminance level 
# L2 = Luminance 2 = dark color relative luminance level

💡The contrast ratio can be a number between 1 to 21 that is shown as 1:1 or 1:21 (or 21:1 based on the background and foreground dark or light color).

Why is the contrast ratio important?

According to the statistics, 1 man in a 20-male population and 1 woman in a 200-female population are suffering from color blindness and vision problems. So, it is really important to provide suitable visibility and readability on web pages from a design perspective. As a result, contrast ratio as a critical accessibility metric should be of high priority in the web page UI/UX designing process. Google recommends following Web Content Accessibility Guidelines (WCAG) accessibility and contrast ratio standards.

AA/AAA contrast ratio standard

Concerning the WCAG standard, the minimum passing contrast ratio is 4.5 as AA, and the best contrast ratio is 7 which is considered as AAA in the AA/AAA standard.

💡The minimum contrast ratio should be at least 4.5:1 for individuals aged 80 or above, and people with color recognition problems. This contrast ratio for people with color blindness is at least 7.

Contrast ratio measurement in Google Chrome based on AA/AAA standard

Contrast ratio can be measured based on AA/AAA standard by using Google Chrome browser. To do so, you can follow the steps below:

1. Open the Chrome DevTools using Control+Shift+C or F12 on Windows, Linux, and Chrome OS, or Command+Option+C on macOS.
2. On the Elements tab, from the style section, select a color to open the color picker.

If the browser can recognize the background, you will see the selected color contrast ratio in the color picker box. If the contrast ratio is less than 4.5, which means failed, is shown with🚫sign, between 4.5 to 6.99 is considered as AA shown with one ✔, and 7=< is AAA and shown with ✔✔.

💡The two easiest ways for measuring contrast ratio based on the AA/AAA standard are using the Google Chrome DevTools color picker that is explained above, and Accessibility Insights for Web Chrome extension, or the contrast ratio checker tool created by Alvaro Montoro.

APCA contrast ratio standard

APCA stands for Accessible Perceptual Contrast Algorithm, which is another contrast ratio standard that considers font size, font weight, and text role on a page while calculating contrast ratio. The APCA standard is more accurate than AA/AAA. You can learn the details of APCA contrast ratio standard in the table below:

⊘: Text with those font-size and font-weight should not be on a page except decorative texts.

©§™: There can only be texts with non-content usages like copyright. Otherwise, there should not be any texts with those font size and font weight.

x: x-number like x100 indicates that font size or font-weight is not suitable to be used in the body of content on a page. It is recommended to use them for larger text elements such as headlines, titles, or large elements.

<20: It is recommended not to use the text with the mentioned font weight and font size.

Contrast ratio measurement in Google Chrome based on APCA standard

To measure contrast ratio based on the APCA standard, you need to first enable this option. You can enable this standard by following the steps provided here:

1. Open the Chrome DevTools using Control+Shift+C or F12 on Windows, Linux, and Chrome OS, or Command+Option+C on macOS.
2. Click on the settings icon ⚙️ on the top right side of the DevTools.
3. From the left side, select the Experiments tab.
4. Select Enable new Advanced Perceptual Contrast Algorithm (APCA).
5. Reload DevTools for new changes to be applied.

After enabling the APCA in Chrome DevTools, head over to the Elements tab and select a color from the style section. If the background of the element was known by the browser, then in the opened color picker, you will see the contrast ratio, which is a number in percent, based on the APCA standard.

Contrast ratio measuring tools

There are different ways for measuring contrast ratio based on the AA/AAA standard or even APCA standard. Here are our suggestions as the contrast ratio measurement tools:

1. Google Chrome DevTools color picker (with APCA support)
2. Accessibility Insights for Web Chrome extension
3. contrast ratio checker tool created by Alvaro Montoro.
4. A11y – Color Contrast Checker Figma plugin
5. Contrast Figma plugin (with APCA beta support)

Checking the contrast ratio of a page with CSS Overview in Google Chrome

CSS Overview is another feature with which the contrast ratio of a whole page will be measured. This feature is available on Google Chrome and can be enabled using the instructions below:

1. Open the Chrome DevTools using Control+Shift+C or F12 on Windows, Linux, and Chrome OS, or Command+Option+C on macOS.
2. In DevTools, open the command palette by pressing Control+Shift+P on Windows, Linux, and Chrome OS, or Command+Shift+P on macOS.
3. In the command palette, search “CSS”, then select Show CSS Overview.

In the CSS Overview tab, press the Capture overview button to see the page’s contrast ratios. Whether you use AA/AAA or APCA contrast ratio standards, here are both reports:

Automatic contrast ratio report in Google Chrome DevTools

Another way to investigate the contrast ratio issues on a page is to use Google Chrome DevTools automatic contrast ratio report. To enable this automatic report in the DevTools:

1. Open the Chrome DevTools using Control+Shift+C or F12 on Windows, Linux, and Chrome OS, or Command+Option+C on macOS.
2. From the top right side, click on the ⚙️ icon.
3. Select Experiments from the left side.
4. Look for Enable automatic contrast ratio reporting and enable it.
5. Reload DevTools.

By enabling this feature, if a page has contrast ratio issues, the number of the issues will appear on the top right side of the DevTools, then by clicking on it, the list of issues will be available.

Checking the contrast ratio of a page with Google Lighthouse

Google Lighthouse is a free page auditing tool with which a page is audited from performance, accessibility, SEO, and PWA perspectives, and it will suggest some best practices to improve the page status. Contrast ratio issues are listed In the accessibility report of the Lighthouse as shown in the image below:
To use the Lighthouse auditing tool, here are some methods you can try:

1. PageSpeed Insights
2. Lighthouse in Google Chrome DevTools
3. Lighthouse CLI
4. Lighthouse Chrome extension
5. GTmetrix
6. WebPageTest

How to emulate color blindness in Google Chrome?

Color blindness is a health issue that about 5% of people around the world are suffering from. Some people have some color recognition problems like red, green, or blue, and others are not able to recognize any colors. Google Chrome has the color blindness emulation feature which helps websites find a better view about a specific vision issue. Therefore they can provide a better user experience. You can enable the Emulate vision deficiencies following the steps below:

1. Open the Chrome DevTools.
2. Open the command palette window by using Control+Shift+P on Windows, Linux, and Chrome OS, or Command+Shift+P on macOS
3. Search rendering and add Show rendering to the DevTools.
4. From the opened list, find Emulate vision deficiencies, and select the suitable option from the dropdown.

Sum up

UI/UX designing is an important step in creating a website. During this process, every aspect of website accessibility from appearance aspect must be considered to provide the best view experience for all types of users. Contrast ratio is a critical part of the website accessibility and can be easily measured and respected using online tools and browsers like Google Chrome capabilities.