Color Contrast Checker
Check whether any text and background colour pair passes WCAG 2.2 AA and AAA — instantly, in your browser. Free, no sign-up.
What contrast ratio do I need?
| Standard | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
Large text means 24px and up, or 18.66px and up if bold. Low-contrast text is the single most common accessibility failure we find on small-business websites in Singapore.
Add it to your own site
The checker is an open-source, zero-dependency Web Component. Drop in the script and use the element in plain HTML, React, Vue, Svelte or Astro:
<script src="https://sgbp.tech/tools/contrast-checker.js"></script>
<contrast-checker foreground="#1a1a1a" background="#ffffff"></contrast-checker>Frequently asked questions
What is a color contrast checker?
A color contrast checker measures the contrast ratio between text (foreground) and its background, then tells you whether it meets WCAG accessibility requirements. It is the fastest way to catch text that is too light to read.
What contrast ratio do I need to pass WCAG?
WCAG 2.2 AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text.
What counts as “large text”?
Large text is 24px and above, or 18.66px and above if bold. Large text only needs a 3:1 ratio for AA.
How do I fix a failing colour pair?
Darken the text (or lighten it on dark backgrounds) a few steps until it passes, and never rely on colour alone to convey meaning. Headings can use a lighter shade because they only need 3:1.
Is this color contrast checker free?
Yes. The tool runs entirely in your browser, is free to use, and is open source (MIT) as a drop-in Web Component you can add to your own site.