A free accessibility colour checker. Check whether your text and background colours have enough contrast to meet WCAG 2.2. Enter two colours as hex codes (like #1C4B8E), colour names or rgb() values, or use the colour pickers. Your results update as you type.
Results
–
| What you’re checking | Needs | AA | AAA |
|---|---|---|---|
| Normal text | 4.5:1 (AA), 7:1 (AAA) | ||
| Large text (24px, or 18.5px bold) | 3:1 (AA), 4.5:1 (AAA) | ||
| Icons, borders and form controls | 3:1 | n/a |
This is normal body text. Can you read it comfortably?
This is large text.
Transparent colours are treated as solid. Contrast is calculated with the WCAG 2.x relative luminance formula. Passing the ratio doesn’t guarantee your text is readable, because font, size and weight matter too. A manual audit checks all of that.
What the results mean
- Normal text needs a ratio of at least 4.5:1 to meet WCAG 2.2 Level AA, the standard most Australian organisations are expected to meet.
- Large text (at least 24px, or 18.5px if bold) only needs 3:1, because bigger letters are easier to read.
- Icons, input borders and focus outlines need 3:1 against whatever is next to them, so people can see and use them.
What is a contrast ratio?
A contrast ratio compares how light or dark two colours are. It runs from 1:1, which is the same colour on itself, to 21:1, which is black on white. The higher the number, the easier the text is to read.
Common contrast failures and how to fix them
- Light grey text on white. The lightest grey that passes for normal text on white is #767676, at 4.54:1. Anything lighter fails.
- White text on a bright brand colour. White on orange (#FF6600) is about 2.9:1. Use a darker shade of the colour for buttons, or switch to dark text.
- Placeholder text in forms. It needs 4.5:1 like any other text. Most browser defaults fail.
- Text over a photo. Contrast changes across the image. Put a solid or semi-transparent panel behind the text and check the text against that.
- Link text that is close in colour to body text. Underline links so colour is not the only clue.
- Pale borders on form fields. The border of a text field needs 3:1 against the background so people can see where to type.
What does not need to pass
- Logos and brand names in a logo
- Buttons and fields that are disabled
- Text that is pure decoration and carries no meaning
How to choose colours that pass
- Start with your darkest brand colour for text and your lightest for backgrounds.
- Check each pair you plan to use together, not just each colour by itself.
- Check the hover, focus and visited colours of links and buttons as well.
- Write down the pairs that pass and share them with whoever makes your documents and social media graphics.
Common questions
Is AA or AAA the level I need?
Level AA. It is the level Australian organisations are expected to meet. AAA is stricter and is worth aiming for on long passages of body text.
Does contrast apply to documents as well as websites?
Yes. The same ratios apply to PDF, Word and PowerPoint files.
My colours pass. Is my website accessible?
Not yet. Contrast is one of 55 criteria in WCAG 2.2 Level AA. A site can pass every contrast check and still be impossible to use with a keyboard or a screen reader.
Check the rest of your website
Failing? Our guide How to fix low contrast text on your website walks through practical fixes. For a full picture of your site, try the website accessibility checklist.
Get a full WCAG 2.2 accessibility audit
Not ready for a full audit? Send us your web address and we will tell you the three biggest barriers on your homepage, free.