Contrast Checker
Installation
Contrast Checker (opens in new tab) is a website that will measure the contrast ratio of your product or webpage.
How to use
The site will tell you whether the colour combination passes or fails any of the WCAG minimum criteria.
You will need to provide the foreground and background colours for text or graphic objects on the website to get the results.
How to get colour codes from a webpage
There are a number of ways to get the colour codes from a webpage
You can use the browser dev tools to inspect the element and get the colour codes.
In Edge or Chrome, right click on the element you want to get the colour code for and select 'Inspect' from the context menu. This will open the dev tools panel.
From the dev tools panel, you can select the 'Styles' tab to see the colour codes for the element, they will probably start with a # symbol and contain 6 alphanumeric characters. For example: #F3F2F1.
Watch a video on how to get colour codes from a webpage:
This video does not have audio.
Results
Example of some content to check the contrast ratio.
When you have the colour codes, you can enter them into the Contrast Checker website to get the results.
The black text has the code #1D1D1B and the yellow background has the code #F9B401.
Contrast Checker shows this is a contrast ration of 9.29:1 of black text on yellow. This passes all the relevant WCAG criteria.
What to do next
You need to check or verify that the accessibility issues the tool finds are issues, rather than false positives or false assurances.
If an issue is genuine, speak to your developer or design team to consider, then implement, a fix.
You can read guidance for how to manage and prioritise issues in the knowledge hub.
Information about this page
- Created
- 5 August 2024
- Last reviewed
- 5 August 2024
- Last updated
- 5 August 2024
- Reason this page exists
- This page exists to help people understand how to use tools to test for, and understand accessibility issues in a product.
- Suggest a change or comment
- Issue 37