Color Contrast Checker
Check WCAG color contrast ratios for accessibility compliance (AA, AAA).
Keyboard shortcuts
The quick brown fox jumps
Normal text — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Large text headline
About this tool
Color contrast is the difference in luminance between foreground (usually text) and background. The WCAG 2.1 standard defines minimum ratios for accessibility: 4.5:1 for normal text at the AA level, 3:1 for large text (18pt+ or 14pt bold), and 7:1 for normal text at the stricter AAA level.
Example: white text (#FFFFFF) on the brand blue #1a56DB gives a ratio of about 6.3:1 — passes AA but falls short of AAA. The same blue against black (#000000) measures about 2.8:1 and fails even for large text.
Pick or paste your two colors and the checker reports the exact ratio, a pass/fail badge for each WCAG level, and a live preview so you can judge legibility at a glance. It is the fastest way to confirm that a design meets the requirements enforced by most accessibility audits and by laws such as the European Accessibility Act.
FAQ
What counts as 'large text' under WCAG? ›
Large text is at least 18pt (24px) for regular weight, or 14pt (18.66px) for bold. Large text only needs a 3:1 ratio at AA, compared with 4.5:1 for normal text, because larger characters are easier to read at lower contrast.
My colors pass AA but not AAA — is that a problem? ›
Usually not. AAA is a best-practice target, not a legal minimum in most jurisdictions. AA is the level cited by the ADA, Section 508, and the European Accessibility Act, so passing AA is the standard compliance bar.
Why is 7:1 the AAA threshold for normal text? ›
At 7:1 contrast, text remains readable for users with moderate low vision (around 20/80 vision). Research from the W3C found this is the point where legibility holds up for the broadest range of visual impairments without sacrificing design flexibility.
Does the ratio change if I use opacity instead of a solid color? ›
Yes. An opacity layer blends the foreground with the background, which lowers the effective contrast. Always compute the actual rendered color (for example, rgba(0,0,0,0.5) over white equals #808080) rather than checking the raw opacity value.
Can I share a color pair with a teammate? ›
Yes. The foreground and background are saved in the URL (?fg=…&bg=…), so you can copy the Share link or just send the address bar URL. Anyone opening it sees the same two colors and ratio.
The tool suggests a slightly different color — how does that work? ›
When a pair fails AA, the checker steps the foreground (then the background) one shade darker or lighter until it finds the nearest color that reaches 4.5:1. Click Apply to use it, or tweak it further by hand.
I need to convert a color between formats (HEX, RGB, HSL, OKLCH) first. ›
Use the <a href="/color-converter">Color Converter</a> to translate any color between HEX, RGB, HSL, OKLCH, and named CSS colors — paste in any format and get all others instantly, then come back here with the hex values to check their contrast ratio.