Contrast checker

#63c

What do the numbers mean?

✔︎ Passes AAA: Contrast of 7 or above passes the strongest level of Web Content Accessibility Guidelines (WCAG).
✔︎ Passes AA: Most text needs contrast of 4.5 or more to meet the minimum required on UK public sector websites and apps.
✘ Fails with exceptions (fx): Larger text (at least 18pt, or 14pt bold) and interactive components need contrast of 3 or more. Regular text fails at this level.
✘ Fails (F): Contrast below 3 fails to meet the standard.

Each colour code has three or six digits, split into red, green and blue components. Use the colour list to help find a code.

Colour list

Only named colours are currently visible.

These colours are sorted by hue, then how colourful they are, then darkest to lightest.

reds

name	hex code	hue	check

yellows

name	hex code	hue	check

greens

name	hex code	hue	check

cyans

name	hex code	hue	check

blues

name	hex code	hue	check

magentas

name	hex code	hue	check

greys

name	hex code	hue	check

About

I regularly check colours for accessibility but when I started making this, there were very few other ways to check for several colours at the same time, so this became a learning project to make an accessible contrast checker. This was made using "vanilla" Javascript on a canvas element and without AI 🧠.

Other contrast checkers

The following tools are all free and help you check colour contrast on the web.

Eightshapes contrast grid is elegant and allows you to name your own colours.
Contrast Checker by Dave House and Nick Colley (formerly of Government Digital Service) is simple and elegant, and checks 3 colours at a time.
Colour Contrast Checker by Pushedskydiver fills the whole page with colour, and has sliders for hue, saturation and lightness.
WebAIM's contrast checker has a dropper tool to help you choose colours and many other accessibility resources on their site.
Colour Contrast Analyser by TPGi (The Paciello Group) is a downloadable tool that lets you pick any colour visible on your screen. We use it often for our accessibility audits.
The WAVE and Axe browser extensions automatically check for contrast and several other accessibility issues.

Credits

The contrast checker "borrows" code from several places and these are highlighted as comments in the Javascript file.

Colour names come from a number of sources, and I've made up a few. Particular thanks to:

Wikipedia's lists of colours
The Secret Lives of Colour by Kassia St Clair
Encycolorpedia

Latest updates

This is an updated version of the contrast checker. The main changes in this version are:

The list of colours has been completely revamped and made more accurate.
The complex "tint" system has been removed in favour of a simpler list of colours.
The last-entered colour can be removed.
Focus management on the contrast checker has been removed.
The colour chart is separated out into a separate poster.