Free WCAG colour contrast checker
Make your message easier to read. Compare text and background colours, see a live preview and find out whether the pair meets WCAG contrast thresholds.
Choose your colours
Large text: at least 24 px, or 18.67 px when bold. A colour-pair pass is one part of accessibility.
About WCAG contrastLIVE COLOUR PREVIEW
Make your message clear.
Good contrast helps your words stand out. Try your colour pair on this normal-sized paragraph and the larger heading.
Small details deserve care, too.Check the final design at the size people will actually read it.
Make it part of your next design
Use your colours or prepared image in an editable template, or start from a blank canvas.
Explore templatesOpen editorHow to use Colour contrast checker
- Enter a text colour and a background colour as HEX values, or use the colour pickers.
- Review the ratio and the separate AA and AAA results for normal and large text.
- Adjust or swap the colours, then copy the pair into your design. The result updates immediately.
What do the thresholds mean?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Large text means at least 24 CSS pixels, or about 18.67 CSS pixels when bold.
Does a pass mean my whole design is accessible?
It checks this opaque sRGB colour pair only. Font size, weight, background photographs, transparency, layout and other accessibility requirements need their own checks. Results use the unrounded ratio.
Which colour values can I enter?
Use three-digit or six-digit HEX values, with or without the # symbol. Each value must describe one opaque colour. Invalid values are flagged and do not silently change your result.
Are my files uploaded?
No. Conversion takes place in your browser. Pixplet does not receive the files you choose. The result is not stored in your account, so download it before leaving this page.
Use the result as a starting point and check it in your final design. The original file remains unchanged.