How can the contrast ratio have an impact on SEO?
Tags: contrastratio, lighthouse, a11y, seo
Published: 2024-01-29 08:20:36

**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](https://www.w3.org/TR/WCAG21/)) 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz76tjyiuj8x9p83wd07.png)

| Text type | AA  | AAA  |
| ----------|:-----:| -----:|
| Text < 24px | 4.5 | 7 |
| Text > 24px | 3 | 4.5 |
| UI (icons, graphs, etc.) | 3 | N/A |

### 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 ✔✔. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5q58ieotsjqmfor89170.png)

💡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](https://chromewebstore.google.com/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni?pli=1), or the [contrast ratio checker tool created by Alvaro Montoro](https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o).

## 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 type | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900  |
| ----------|:----:|----:|----:|----:|----:|----:|----:|----:|----:|
| Font Size ||   
| 10px | ⊘ | ⊘ | ⊘ | ©§™ | ©§™ | ©§™ | ©§™ | ⊘ | ⊘ |
| 11px | ⊘ | ⊘ | ⊘ | ©§™ | ©§™ | ©§™ | ©§™ | ⊘ | ⊘ |
| 12px | ⊘ | ⊘ | ©§™ | ©§™ | x100 | x90 | x80 | ⊘ | ⊘ |
| 14px | ⊘ | ⊘ | ©§™ | 100 | 90 | 80 | 60 | x60 | ⊘ |
| 16px | ⊘ | ⊘ | 100 | 90 | 80 | 60 | 55 | x50 | x50 |
| 18px | ⊘ | ⊘ | 90 | 80 | 60 | 55 | 50 | x40 | x40 |
| 24px | ⊘ | 100 | 80 | 60 | 55 | 50 |  40 | 38 | x35 |
| 30px | ⊘ | 90 | 70 | 55 | 50 | 40 | 38 | 35 | 30 |
| 36px | ⊘ | 80 | 60 | 50 | 40 | 38 | 35 | 30 | 25 |
| 48px | 100 | 70 | 55 | 40 | 38 | 35 | 30 | 25 | >20 |
| 60px | 90 | 60 | 50 | 38 | 35 | 30 | 25 | >20 | >20 |
| 72px | 80 | 55 | 40 | 35 | 30 | 25 | >20 | >20 | >20 |
| 96px | 70 | 50 | 35 | 30 | 25 | >20 | >20 | >20 | >20 |
| 120px | 60 | 40 | 30 | 25 | >20 | >20 | >20 | >20 | >20 |

**⊘:** 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuj7nhco64b2e9pe4de7.png)

## 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](https://chromewebstore.google.com/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni?pli=1)
3. [contrast ratio checker tool created by Alvaro Montoro](https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o).
4. [A11y – Color Contrast Checker Figma plugin](https://figma.com/community/plugin/733159460536249875)
5. [Contrast Figma plugin (with APCA beta support)](https://www.figma.com/community/plugin/748533339900865323)

## 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**_.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gh9o07o93ccflk95r1i.png)

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:

![Contrast ratio report in CSS Overview based on AA/AAA standard
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az7r5or69g3mw6tkfz1l.png)

![Contrast ratio report in CSS Overview based on APCA standard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owxqclpaw81zxoz6up7n.png)

## 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrqan8ti7di8n4amdl8c.png)

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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bshh2oy70n3hdrg0mw3p.png)

## 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](https://pagespeed.web.dev/)
2. Lighthouse in Google Chrome DevTools
3. [Lighthouse CLI](https://www.oxyplug.com/optimization/how-to-install-and-use-google-lighthouse-cli/)
4. Lighthouse Chrome extension
5. [GTmetrix](https://gtmetrix.com/)
6. [WebPageTest](https://www.webpagetest.org/)

## 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfepl9kmuyn84l5o8vdz.png)

## 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.