Colour contrast checker
Enter two colours and get the exact contrast ratio, plus a pass or fail against WCAG 2.1 AA and AAA at both normal and large text sizes.
The quick brown fox
Large text sample
Contrast ratio
How to use it
- Enter a foreground and a background colour.
- Read the ratio and the pass/fail badges.
- Adjust until the combinations you need turn green.
Questions
Are my images uploaded anywhere?
No. Everything runs in your browser using the Canvas API — the file never leaves your machine, and the tool keeps working if you go offline after the page loads. There is no account, no queue, and no server-side copy to delete later.
What ratio do I actually need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text — 18pt, or 14pt bold. AAA raises those to 7:1 and 4.5:1. AA is the level most legislation references, including the European Accessibility Act.
Does this apply to icons and borders too?
Yes. WCAG 2.1 added a 3:1 requirement for non-text elements that convey meaning — icons, form field borders, focus rings. A grey placeholder border on a white background is one of the most common failures.
Related tools
- HEX to RGB converterConvert a HEX colour code to RGB and HSL, with a live preview. Free and instant.
- Colour palette extractorPull the dominant colours out of any image as HEX, RGB and HSL. Free, in your browser, no upload.
- RGB to HEX converterConvert RGB values to a HEX colour code with interactive sliders and a live preview.
This is one keystroke inside LayerShot
The desktop app captures the screen, applies your styling and puts the result on your clipboard without a browser tab, an upload, or a download folder full of files called Screenshot (3).png. One payment, one Mac and one Windows PC, lifetime updates.