Contrast Checker (WCAG + APCA)
Check if your text is readable, and get a fix when it is not.
Large heading text
Body text at 16 px. The quick brown fox jumps over the lazy dog, and small details like 0O, 1l and I should stay easy to tell apart.
Small print at 13 px, the size often used for captions and footnotes.
| WCAG 2.x | Level | Needs | Result |
|---|---|---|---|
| Normal text | AA | 4.5:1 | - |
| Normal text | AAA | 7:1 | - |
| Large text | AA | 3:1 | - |
| Large text | AAA | 4.5:1 | - |
| UI parts & icons | AA | 3:1 | - |
Same hue, adjusted lightness. Click to use.
How to use the Contrast Checker (WCAG + APCA)
- Enter a text color and a background color, or pick them with the color pickers.
- Read the WCAG contrast ratio and see which AA and AAA levels pass for normal text, large text and UI parts.
- Check the APCA Lc score for a more modern, perception-based view of readability.
- If the pair fails, click a suggested text color to apply the closest shade that passes.
About this tool
Low-contrast text is one of the most common accessibility problems on the web, and it affects everyone reading on a phone in sunlight, not only people with low vision. This checker compares a text color with its background and tells you immediately whether the pair meets the Web Content Accessibility Guidelines (WCAG 2.1 and 2.2). AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) and for icons and form borders. AAA raises those to 7:1 and 4.5:1.
It also calculates APCA (Accessible Perceptual Contrast Algorithm), the method being developed for future WCAG versions. APCA accounts for the fact that light text on a dark background is perceived differently from dark text on light, and expresses contrast as an Lc value from about 0 to 106. As a guide, Lc 75 or more suits body text, 60 suits larger content text, and 45 is a floor for headings.
When a pair fails, the auto-fix keeps your hue and saturation and moves only the lightness of the text color to the nearest shade that passes, so your design stays on brand. Remember that WCAG is the current legal and contractual benchmark in most places; use APCA as an extra guide.
Frequently asked questions
Are my colors sent anywhere?
No. All calculations happen in your browser. Nothing is uploaded or stored on a server; your last colors are only remembered in this browser.
What counts as "large text" in WCAG?
Text at least 18 point (24 CSS pixels) in regular weight, or 14 point (about 18.7 px) in bold. Large text only needs 3:1 for AA.
Should I follow WCAG or APCA?
Meet WCAG 2 AA, because it is the standard referenced by accessibility laws and audits today. APCA is a draft for the future and is useful for fine-tuning, especially with dark themes.
Why is the APCA value negative?
APCA uses a negative Lc for light text on a dark background and positive for dark text on light. Compare the absolute value against the guidance.
How are transparent colors handled?
A semi-transparent text color is blended over the background first, and a transparent background is blended over white, so the ratio reflects what is actually shown.