Free Color Contrast Checker – WCAG AA & AAA Compliance

What a Color Contrast Checker Does and How It Works

A colour contrast checker measures how different a text colour and its background are, and tells you whether that difference is enough for people to read comfortably. You enter two colours and it returns a contrast ratio plus clear pass or fail marks against the Web Content Accessibility Guidelines, with a live sample of the text sitting on the background. Designers, developers, and accessibility reviewers use it to confirm body text, buttons, and links are legible, to fix pairings flagged in an audit, and to choose brand colours that will pass from the start rather than being reworked later. It matters because low-contrast text is genuinely hard to read for people with low vision or colour deficiency, and for anyone using a screen in bright sunlight. The check is not a guess; it follows the official WCAG method. Each colour is first converted from its RGB channels into a single relative-luminance number that reflects perceived brightness, weighting green most, then red, then blue, and applying a small gamma adjustment to each channel first. The contrast ratio is then (lighter luminance + 0.05) divided by (darker luminance + 0.05). The result runs from 1:1, meaning identical colours, up to 21:1 for black on white. WCAG sets thresholds against that number: AA needs 4.5:1 for normal text and 3:1 for large text, while AAA is stricter at 7:1 and 4.5:1. Large text counts as roughly 18pt, or 14pt when bold, which is why the checker reports normal and large separately. Here is a worked case. Take mid-grey text #767676 on a white #ffffff background. White has a relative luminance of exactly 1.0, and that grey works out to about 0.1812. The ratio is (1.0 + 0.05) ÷ (0.1812 + 0.05) = 1.05 ÷ 0.2312, which is 4.54:1. That clears AA for normal text by a whisker, since AA needs 4.5:1, but it is nowhere near the 7:1 that AAA demands. Lighten the text just a little to #8c8c8c and the ratio drops to 3.36:1, which now fails AA for body copy while still passing the 3:1 large-text rule. Darken it to #595959 instead and you get exactly 7.00:1, clearing AA and AAA for every text size. Enter any of these pairs and the badges update at once. The practical uses are constant. A developer checks that placeholder grey in a form field is still readable. A designer picks an accent colour for links and confirms it clears 4.5:1 on the page background. A team preparing for an accessibility audit runs every text-and-background pair to catch failures before a reviewer does. Someone building a dark theme verifies that light-grey text on a near-black panel keeps enough contrast, which is easy to lose when both colours are close in brightness. Brand colours are where this bites hardest. White text on the standard Facebook blue #1877f2 scores only 4.23:1, which fails AA for body copy despite looking perfectly normal to most people. White on the WhatsApp green #25d366 is far worse at 1.98:1, and white on the amber #ffc107 collapses to 1.63:1 — that last pairing needs black text, which scores a comfortable 12.88:1. In each case the number turns a subjective judgement into a clear yes or no. A few notes prevent mistakes. Contrast rules apply to text and meaningful graphics, not to decorative elements or disabled controls, which are exempt. A very high ratio like pure black on pure white can feel harsh to some readers, so slightly softened darks are often kinder while still passing. Remember the ratio depends only on the two colours, not on font family, so a legible ratio still needs a sensible font size and weight. And every calculation runs locally in your browser with the standard WCAG formula, so it is instant, works offline once loaded, and never uploads or stores the colours you test.

Color Contrast Checker Formula & Method

🔥 Trending Tools