Colour Contrast CheckerBeta

Check the accessibility of your colour scheme by entering multiple colours and seeing which combinations pass/fail.

Colour 1
Colour Picker
Luminance
Colour 2
Colour Picker
Luminance

The five boxing wizards jump quickly

Normal Text


WCAG AA:

Pass

WCAG AAA:

Pass

Large Text


WCAG AA:

Pass

WCAG AAA:

Pass

User Interface Components


WCAG AA:

Pass

The five boxing wizards jump quickly

Normal Text


WCAG AA:

Pass

WCAG AAA:

Pass

Large Text


WCAG AA:

Pass

WCAG AAA:

Pass

User Interface Components


WCAG AA:

Pass

Export

Export your colour combinations HEX, RGB or HSL for you to use in your project. We are hoping to have more export options coming soon!

HEX

#000000

#ffffff

RBG

rgb(0, 0, 0)

rgb(255, 255, 255)

HSL

hsl(0, 0%, 0%)

hsl(0, 0%, 100%)

What is this?

Feel free to select your foreground and background colours using RGB hexadecimal codes or simply pick them with our Colour Picker tool. Play around with the Luminance slider to get the perfect shade that passes WCAG standards. You can add as many colours as you like to discover different colour combinations that work!

Remember, large text is defined as 14-point (typically 18.66px) and bold or larger, or 18-point (typically 24px) or larger. The User Interface components refer to icons and form fields.

You can filter your results by background colour (so they are grouped), or by whether they have passed WCAG AA or WCAG AAA.

You also have the option to share your results with a colleague or friend (if your friends like that sort of thing) by hitting the share button, or you can export your tested colours in various ways by hitting the export button.

Happy designing!

2024 © Colour Contrast Checker, created by Jo Loveridge & Zoe Aubert

About

The idea for this tool came to me a couple of years ago. I use colour contrast checkers online all the time but became frustrated that there wasn’t a way to check more than 2 colours. I found myself creating a colour contrast guide manually in Figma to show clients which colours passed and which didn’t.

I happened to show my designs to Zoe one evening, and lo and behold she had already built a similar colour contrast checker prototype already. So we got together to make this very project happen! We’re very happy to now share it with the world, to make it a more accessible place for everyone!

- Jo L

2024 © Colour Contrast Checker, created by Jo Loveridge & Zoe Aubert