Check WCAG Color Contrast Online: AA, AAA and Large Text

A #999999 gray on white gives a ratio of roughly 2.85:1 — well below the AA threshold of 4.5:1. Yet it's one of the most common design choices for secondary text, placeholders and captions.

"Soft" brand colors (pastel blue, mint green, light orange) are often chosen for visual identity without ever being tested with white text on top.

A white headline works over the dark part of a hero photo's sky, but becomes unreadable over the bright part of a cloud — contrast varies depending on where the text sits on the image.

outline: none with no replacement breaks keyboard navigation — and non-text contrast (SC 1.4.11) also applies to focus indicators, not just to text.

WCAG 1.4.3 (Contrast Minimum) requires a ratio of at least 4.5:1 for normal text at level AA. The stricter AAA level (criterion 1.4.6) raises the bar to 7:1. AA is the level targeted by nearly every legal accessibility requirement (Section 508/ADA in the US, EN 301 549 in Europe, RGAA in France); AAA remains recommended but is rarely mandated site-wide.

WCAG defines "large text" as text at least 24px (18pt), or at least 18.67px (14pt) when bold (weight ≥ 700). Below those thresholds, text counts as normal even if it looks visually imposing. FastMinify automatically computes which threshold applies based on the size and weight you enter.

Since WCAG 2.1, criterion 1.4.11 (Non-text Contrast) requires a ratio of at least 3:1 for UI components (form field borders, checkboxes, meaningful icons, focus indicators) against their adjacent color — not just for text.

The WCAG 2.x ratio compares the relative luminance of the two colors (a value from 0 to 1 derived from linearized RGB channels, weighted 0.2126 for red, 0.7152 for green, 0.0722 for blue — the human eye perceives green far more intensely than blue). The final ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. That's why two colors that look "clearly different" can end up with a close ratio, while two hues that look similar can have very different luminances.

The WCAG 2.x ratio has a known limitation: it treats "black on white" and "white on black" symmetrically, which doesn't always match real perception. APCA (Advanced Perceptual Contrast Algorithm), a candidate for WCAG 3, accounts for polarity (light text on dark background vs. the reverse) and font size for a finer-grained judgment. FastMinify offers an optional APCA overlay alongside the official WCAG 2.2 ratio — not as a replacement, since WCAG 3 isn't a published standard yet.

Open the contrast checker, paste your foreground and background color in any CSS format (HEX, RGB, HSL, OKLCH, named). The ratio and the AA/AAA/non-text badges update live. Adjust text size and weight to see the "large text" threshold kick in automatically.

A primary button usually has three color variants (normal, hover, disabled) that often go untested individually.

Instead of testing a design system's combinations one by one, paste your list of text colors as rows and your list of background colors as columns (up to 16 colors per axis). The result shows a grid with a verdict for every intersection, filterable by conformance level (AAA / AA / AA-large / fail).

Every check (colors, text size, matrix or pair mode, APCA options) is encoded into the URL. Copy the link from the address bar and paste it into a pull request, a ticket, or a message to your designer — the page reopens in exactly the same state.

A manual checker is perfect for designing a palette; to prevent regressions, contrast should also be verified automatically on every pull request. axe-core and Lighthouse CI catch most contrast failures on static text (they struggle more with text over images or gradients).

Fast manual checks, no install, no data sent anywhere. The matrix mode, unique among these options, lets you audit a whole design system in a single pass, and the shareable URL makes design/dev collaboration easy. Trade-off: it's a manual check that doesn't replace an automated CI audit, and it doesn't detect contrast on an image or a complex gradient.

The built-in color picker shows the contrast ratio directly on the selected element on the live page, with computed styles — no external tool needed. Trade-off: one element at a time, which gets tedious across a full palette, with no matrix mode or link sharing.

An automated audit built into the CI pipeline systematically catches contrast regressions on every pull request, and covers accessibility beyond just contrast. Trade-off: it doesn't replace the upfront palette design phase, and can produce false negatives on text overlaid on an image.