Design & Creative
Contrast checker
Pick a text colour and a background colour to see their contrast ratio and whether the pair is easy enough to read.
- Free, no sign-up
- Runs in your browser
- Nothing uploaded
Colours
HEX, rgb(), hsl() or a colour name such as navy all work.
Result
Contrast ratio
-
Large heading text
Normal body text should be easy to read for everyone.
ButtonBuilding a brand or a client deck?
Keep the colours that pass with the rest of the project in BeginRooms, next to the brief, files and tasks. The 11-day trial needs no card, and this checker stays free.
How to use this tool
- Enter or pick the text colour.
- Enter or pick the background colour.
- Read the ratio and the AA and AAA results.
- If it fails, click a suggested colour that passes, then copy the result.
How it works
Light grey text on white can look stylish on a big screen and be impossible to read on a phone in sunlight. This checker tells you how far apart two colours really are. Enter a text colour and a background as HEX, rgb(), hsl() or a colour name, or pick them, and you get the contrast ratio with a pass or fail against the WCAG 2 AA and AAA levels for normal text, large text and buttons or icons. A live sample shows the pair as a heading, body text and a button, so you can judge it by eye too.
If a pair fails, the checker suggests the nearest darker or lighter text colour that reaches the level you choose, keeping the same hue. It suggests a background change only when no text colour can reach it. Click one to try it. The maths follows the WCAG 2 relative luminance formula and runs in your browser, with no account. It is our own code; see the third-party notices for the software used elsewhere on these tools.
Frequently asked questions
What contrast ratio do I need?
Under WCAG 2, AA asks for at least 4.5:1 for normal text and 3:1 for large text and for buttons, icons and other UI parts. AAA asks for 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Roughly 24px regular or about 19px bold and above. Headings usually qualify, body text usually does not.
Does a pass mean my design is accessible?
It means that colour pair is readable enough on contrast alone. Accessibility also depends on size, spacing, focus states and more, so treat this as one check among several.
Can I enter colours other than HEX?
Yes. rgb(), hsl() and colour names such as navy work too, or use the colour picker. Transparency is ignored, so test the final, solid colours.
Why is the ratio rounded down?
So that 4.499:1 never shows as a pass. The checker cuts the ratio to two decimals instead of rounding up.