Contrast checker
Check whether text and background colours meet WCAG accessibility contrast levels.
In your browser
Large heading text
Body text at a normal size. The quick brown fox jumps over the lazy dog, and everyone can read it.
Small print and captions.
: 1
About this tool
Make sure text is readable for everyone. Enter a text and background colour to see the WCAG 2 contrast ratio and pass or fail results for normal text, large text and UI elements.
How to use it
- 1 Enter or pick the text colour.
- 2 Enter or pick the background colour.
- 3 Check the ratio and the AA and AAA results.
Questions
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA.
Is my data uploaded?
No. This tool runs in your browser, so your text and files never reach our server.
Is this tool free?
Yes. It’s free to use with no sign-up and no limits for normal use.
More in Colour & design
- Box shadow generator New Tune a CSS box shadow visually and copy the code.
- CSS gradient generator New Design a linear or radial gradient and copy the CSS.
- Color palette generator New Build a harmonious colour palette from one base colour.
- Color converter Convert a colour between HEX, RGB, HSL and CMYK.
- Color picker Pick any colour, from a palette, the screen, or an uploaded image, and get HEX, RGB and HSL.