Color Contrast Checker: WCAG AA and AAA Ratio
Enter a text color and a background color to get their contrast ratio and see which WCAG levels the pair passes for body text, large text and interface parts.
The contrast ratio compares the relative luminance of two colors, from 1:1 for identical colors up to 21:1 for black on white. WCAG level AA asks for at least 4.5:1 for body text and 3:1 for large text, and level AAA asks for 7:1 and 4.5:1. Gray #767676 on white comes out at 4.54:1, so it passes AA for body text but not AAA.
This checker applies the WCAG 2.2 contrast formula to two flat sRGB colors. It does not test text over images, transparency, how bold or thin a font is, or how a page actually renders, and passing the ratio covers only the contrast criteria, so it is not a full accessibility audit of a site.
Colors
Large text sample
Normal body text sample, the size most of a page is set in.
Contrast ratio
4.54:1
- AA, normal text (4.5:1)
- Pass
- AA, large text (3:1)
- Pass
- AAA, normal text (7:1)
- Fail
- AAA, large text (4.5:1)
- Pass
- Icons and input borders (3:1)
- Pass
Large text means at least 18 point regular or 14 point bold, roughly 24px or 18.7px bold on screen. The ratio is shown rounded down, so a value that reads 4.50 always passes 4.5.
Embed this calculator on your site →
About the Color Contrast Checker
Type or pick a text color and a background color, and the checker works out the contrast ratio between them using the WCAG relative luminance formula. Each color's red, green and blue channels are converted from their 0 to 255 values to linear light and weighted, green most heavily, into a luminance between 0 and 1; the ratio is the lighter luminance plus 0.05 divided by the darker one plus 0.05. Order does not matter, which is why the swap button leaves the number unchanged. The result is graded against five thresholds: 4.5:1 and 3:1 for normal and large text at level AA, 7:1 and 4.5:1 at level AAA, and 3:1 for icons, focus rings and input borders. Large text means 18 point or larger, or 14 point bold. Pure red #FF0000 on white is a useful warning: it looks vivid but reaches only 3.99:1, enough for a heading and not for a paragraph. A darker blue such as #0066CC carries white text at 5.56:1, while the lighter #007BFF manages 3.97:1.
Frequently asked questions
What is the darkest gray that fails AA on white?+
#777777 on white is 4.47:1 and fails the 4.5:1 body-text level, while #767676, one step darker, is 4.54:1 and passes. For level AAA on white you need to go down to about #595959, which reaches 7:1.
Why is the ratio rounded down?+
The levels are minimums with no rounding allowed, so 4.499 fails 4.5. Showing the ratio rounded down to two decimals means a figure that reads 4.50 always passes, and a pair just under the line never looks like it clears it.
Does a passing ratio mean the colors are accessible?+
It means the pair meets the contrast criterion, which is one part of accessibility. Text over images or gradients needs checking at its weakest point, color should not be the only way information is shown, and thin or small fonts can still be hard to read at a passing ratio.
Which contrast level should I aim for?+
Level AA is the usual target for websites and the one most accessibility policies reference. Level AAA is stricter and worth using for long reading text. Interface parts such as icons, input borders and focus indicators need at least 3:1 against what is next to them.
Embed this calculator
Free to use on your own site. Paste this snippet where you want the color contrast checker to appear — it resizes itself automatically.
<iframe
src="https://manytools.co/embed/color-contrast-checker"
title="Color Contrast Checker by ManyTools"
data-manytools="color-contrast-checker"
width="100%"
height="640"
loading="lazy"
style="border:0;width:100%;max-width:720px"></iframe>
<script>
(function () {
window.addEventListener("message", function (e) {
if (e.origin !== "https://manytools.co") return;
var d = e.data || {};
if (d.type !== "manytools:embed:height" || d.slug !== "color-contrast-checker") return;
var f = document.querySelector('iframe[data-manytools="color-contrast-checker"]');
if (f && d.height) f.style.height = d.height + "px";
});
})();
</script><a href="https://manytools.co/dev/color-contrast-checker">Color Contrast Checker by ManyTools</a>