Colour contrast checker (WCAG) and HEX, RGB, HSL converter
Check whether your text colour is readable on its background under WCAG 2 AA and AAA, see a live preview, and convert any colour between HEX, RGB and HSL.
Large heading text
Normal body text looks like this. Can you read it comfortably?
Runs 100% in your browser. Nothing you add is uploaded to any server.
Contrast ratio
HEX, RGB and HSL converter
Converted values
How to use it
- Enter or pick the text colour and the background colour.
- Read the contrast ratio and the AA and AAA results.
- Adjust the colours until normal text passes AA (4.5:1) at least.
- Use the converter to get the same colour as HEX, RGB or HSL for your CSS or theme settings.
Related reading: choosing website colours and fonts.
Want it done for you? See website redesign.
Colour contrast questions
What contrast ratio do I need?
WCAG 2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1.
What counts as large text?
Text of at least 18 point (about 24px), or 14 point (about 18.66px) when bold.
Which colour formats can I enter?
HEX like #7C3AED or #fff, rgb(124, 58, 237), and hsl(262, 83%, 58%).
Let's build your next website
Available for freelance projects, agency white-label work and long-term maintenance. Feel free to pass this along to your team or company.