Color Contrast Checker (WCAG AA & AAA)
Enter a text color and a background color. You see the contrast ratio, whether it passes WCAG, a live preview, and the nearest colors that pass. Everything runs in your browser.
How the pair looks with each type of color blindness (Machado 2009 model, full strength) and in grayscale. The WCAG ratio is based on lightness only, so it changes very little here; but if two colors differ only in hue, these views show why that is not enough.
How to use this contrast checker
- Type or paste the text color and the background color. HEX (
#1e90ff,#fff,#0008),rgb(),rgba(),hsl()and CSS names such asnavyall work. You can also click the color square to use your system color picker. - Read the ratio and the pass / fail list. Normal text needs 4.5 : 1 for AA; large text and UI parts need 3 : 1.
- If a check fails, use a color from Nearest colors that pass. It keeps your hue and saturation and only changes the lightness as little as possible, so the brand color still looks the same. Or move the Lightness slider yourself and watch the ratio.
- Click Copy link to share the exact pair, or Copy CSS to get
colorandbackground-colorlines.
WCAG contrast rules in one table
| What | Level AA | Level AAA | WCAG rule |
|---|---|---|---|
| Normal text (under 24 px, or under 18.66 px bold) | 4.5 : 1 | 7 : 1 | 1.4.3 and 1.4.6 |
| Large text (24 px and more, or 18.66 px bold and more) | 3 : 1 | 4.5 : 1 | 1.4.3 and 1.4.6 |
| UI parts: input borders, focus rings, icons without text, chart lines | 3 : 1 | – | 1.4.11 (WCAG 2.1+) |
| Logos, disabled controls, pure decoration | no rule | exceptions | |
Level AA is the normal target. Most accessibility laws ask for it: the European Accessibility Act and EN 301 549 in the EU, Section 508 and ADA cases in the US, and similar rules in the UK, Canada and Australia. Level AAA is stricter. It is a good goal for long texts such as articles and documentation, but WCAG does not expect a whole site to meet AAA.
The rules are the same in WCAG 2.0, 2.1 and 2.2. "Large" is measured in CSS pixels: 18 point is 24 px, 14 point is about 18.66 px. Thin fonts (weight 300 or less) are harder to read than the ratio says, so give them more contrast.
Common color pairs and their ratios
Click a pair to load it into the checker.
| Pair | Ratio | Result |
|---|---|---|
| #000000 on #ffffff | 21 : 1 | Highest possible. Passes everything. |
| #767676 on #ffffff | 4.54 : 1 | The lightest gray that passes AA on white. |
| #777777 on #ffffff | 4.47 : 1 | Fails AA for normal text, even though it looks almost the same. |
| #595959 on #ffffff | 7.00 : 1 | The lightest gray that passes AAA on white. |
| #949494 on #ffffff | 3.03 : 1 | Large text and icons only. |
| white on #3b82f6 | 3.67 : 1 | A very common blue button. Fails AA for normal text; #2563eb gives 5.16 : 1. |
| white on #ff0000 | 3.99 : 1 | Fails for normal text. Black on pure red is 5.25 : 1. |
| white on #22c55e | 2.27 : 1 | Bright green needs dark text: black on it is 9.21 : 1. |
| white on #ffa500 | 1.97 : 1 | Orange and yellow almost always need black text (10.63 : 1). |
| #e2e8f0 on #0a0d14 | 15.76 : 1 | The text and page colors of this site. |
Mid-tone colors are the hard case. A medium gray such as #808080 has only 3.94 : 1 with white and 5.31 : 1 with black, so neither works well for small white text. Make the background clearly darker or clearly lighter.
How the contrast ratio is calculated
WCAG 2 compares the relative luminance (how much light a color gives, from 0 for black to 1 for white) of the two colors:
1. Each channel: c = value / 255 linear = c / 12.92 if c <= 0.04045 linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise 2. L = 0.2126 × R + 0.7152 × G + 0.0722 × B 3. ratio = (L of the lighter color + 0.05) / (L of the darker color + 0.05)
The result goes from 1 : 1 (the same color) to 21 : 1 (black on white). Green counts most and blue counts least, because our eyes see green light as much brighter. That is why yellow text on white (1.07 : 1) is almost invisible, while pure blue on white (8.59 : 1) is fine.
The ratio is the same whichever color is the text. Dark text on a light background and light text on a dark background with the same two colors give the same number.
What about APCA and WCAG 3?
APCA is a newer contrast method that also looks at font size, weight and which color is on top. It is planned for WCAG 3, which is still a draft. Today, laws and audits use the WCAG 2 ratio on this page.
Frequently asked questions
What is a good contrast ratio?
For normal body text, at least 4.5:1 (WCAG level AA). For large text, at least 3:1. If you can, aim for 7:1 for body text (level AAA), which also helps people with weak eyesight and anyone reading a phone in the sun. Black on white is 21:1, the highest possible ratio.
What counts as large text in WCAG?
Text that is at least 18 point (24 CSS pixels) in normal weight, or at least 14 point (about 18.66 CSS pixels) in bold. Large text only needs 3:1 for AA and 4.5:1 for AAA, because big letters are easier to read.
What is the lightest gray that passes on white?
#767676 has a ratio of 4.54:1 on white, the lightest gray that passes AA for normal text. #777777 is only 4.47:1 and fails. For AAA (7:1) the lightest gray is #595959, and for large text or icons (3:1) it is #949494.
Can I round 4.47:1 up to 4.5:1?
No. WCAG says the thresholds are exact, so 4.499:1 fails AA. This checker never rounds a failing ratio up: it cuts the number after two decimals instead.
Does contrast apply to buttons, icons and form fields?
Yes. Since WCAG 2.1, success criterion 1.4.11 asks for at least 3:1 between the parts of a control that you need to see (for example the border of a text field, or an icon without text) and the colors next to them. The text on a button still needs 4.5:1 against the button color.
How does transparency (alpha) change the contrast?
A semi-transparent text color is mixed with the background first, and the contrast is measured for the mixed color. For example rgba(0, 0, 0, 0.5) on white looks like #808080 and has 3.94:1. This checker does that mix for you. A transparent background is placed on white.
Is my data sent anywhere?
No. All math runs in your browser. The two colors are kept only in the address bar, so you can bookmark the page or send the link to a colleague.