Contrast Checker
Contrast Checker is a free browser tool that lets you wcag contrast ratio checker. Colour values are converted and contrast is measured in the page using the same maths browsers use internally. It is used most by product teams checking a dark theme reads properly. Values are sRGB — wide-gamut P3 colours are not represented. There is no account to create, no email to hand over and no cap on how often you use it.
Key features
- Contrast is measured against the WCAG 2.1 relative-luminance formula.
- Converts between HEX, RGB, HSL and HSV without drift.
- Works on desktop, tablet and phone — no separate app to install.
- Loads in under a second and gives its result in one action.
How to use Contrast Checker
- Set your colour: Pick with the swatch or paste a HEX, RGB or HSL value.
- Adjust and compare: Tune the value and watch the converted formats and contrast figures update.
- Copy what you need: Copy any format straight into your CSS or design file.
Frequently asked questions
- What ratio do I actually need? — 4.5:1 for normal body text at AA, 3:1 for large text, and 7:1 for AAA.
- How is contrast calculated? — With the WCAG 2.1 relative-luminance formula — the same one accessibility auditors use.
- Does it work in dark mode? — Yes, and it is worth checking both themes since contrast changes with the background.
- Can I use these colours commercially? — Yes. Colour values are not copyrightable — use them in any project.