WCAG Contrast Checker

How to Use the Contrast Checker

The first run takes about ten seconds. Type a hex value into the Foreground field, or open the native color picker next to it, then do the same for Background. Six preset pairs give you a familiar starting point, from the site's own ink on cream to a phosphor green that looks straight out of a terminal window.

The live preview sits above the verdicts and renders a heading, a paragraph, two button styles, and a small caption in your two colors. It exists so you see the pair in context instead of as two abstract swatches. A pair that passes at 4.5:1 can still feel weak on a dashboard, and the preview is where you notice that.

Read the ratio and the four verdict rows below it. A green badge means the pair clears that bar; red means it does not. When a row shows Fail, tighten the pair rather than accepting it. The "Suggest an accessible foreground" button finds the nearest shade that reaches 4.5:1 against your background by stepping the current color toward black or white and keeping whichever direction raises the ratio fastest. Accept the result with "Use this color" and the field updates in place.

The swap button reverses the two colors. The ratio stays the same either way, because the formula always places the lighter luminance on top, but swapping is still handy when one hue does text duty in one view and background duty in another.

Every valid color expands to show copyable RGB, HSL, and OKLCH values. Those readouts matter more than they look: they let you move a verified color into a CSS file or a design token set without retyping the hex.

How the Ratio Is Calculated

A contrast ratio is a property of two colors, never of one. The checker converts both hex values to relative luminance, a weighted measure of perceived brightness. The conversion linearizes each sRGB channel first, then applies the WCAG coefficients: 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The exact definition lives in the W3C WCAG 2.2 specification.

The ratio itself is (L1 + 0.05) divided by (L2 + 0.05), where L1 is the luminance of the lighter color and L2 the darker. The added 0.05 keeps the fraction finite when one color is pure black, whose luminance is zero. The result spans 1:1 for identical colors up to 21:1 for black on white, and the tool rounds to two decimal places, which is more precision than any threshold asks for.

Two practical consequences follow. First, two grays can differ by a single hex step yet land on opposite sides of a threshold, so eyeballing never replaces measuring. Second, the ratio ignores hue. A vivid blue and a muddy brown can both reach 5:1 against the same background if their luminance matches.

The Four Thresholds, Decoded

WCAG 2.2 sets four bars: two conformance levels, AA and AAA, times two text sizes, normal and large. Body text must reach 4.5:1 under AA. Large text needs only 3:1 under AA, because WCAG defines large as 24 pixels and up, or 18.66 pixels and up in bold, and bigger glyphs tolerate lower contrast. The AAA tier raises both bars, to 7:1 for body text and 4.5:1 for large text.

The numbers did not change between WCAG 2.1 and 2.2. The newer version touched focus appearance, target size, and a few other areas; contrast stayed put.

For most products, AA is the working target. It is the bar named in the European Accessibility Act and the Section 508 refresh, and it is what most procurement checklists test. AAA is a quality tier, worth chasing for long-form reading, legal copy, and anything your audience reads in harsh light or on a small screen.

The verdict panel mirrors these four bars as rows. AA normal text and AA large text are the rows that matter for most projects. The two AAA rows are stricter, and a pair that clears AAA automatically clears AA. The large-text rows only apply where the type actually is large, so a pair can pass AA large while failing AA normal. That is the rule working as intended, not a quirk of the tool.

Example Ratios Worth Remembering

Memorizing thresholds is less useful than knowing a few anchors. These eight pairs were computed with the same formula the tool uses.

The middle of the table is where real projects live. #767676 on white reads 4.54:1, four hundredths above the AA line. One hex step lighter, #777777 drops to 4.48:1 and fails AA normal text. That tiny gap is the difference between a gray that ships and a gray that gets flagged in an audit.

The blue problem shows up on nearly every dashboard. #3B82F6 on white reaches only 3.68:1, fine for a 24px button label and not for body links. One step darker, #2563EB hits 5.17:1 and clears AA normal. When a brand blue fails, darkening it by a step often fixes the ratio without changing the character of the color.

The dark-background rows prove saturated colors can still pass. #38BDF8 on #0B0F1A measures 8.93:1 because the near-black surround does the heavy lifting. Bright text on dark backgrounds tends to pass easily; failures concentrate on light backgrounds with mid-tone text.

Exemptions and Edge Cases

Not every pixel on a page has to clear these bars. Logos and brand names, text that is purely decorative, and inactive interface states are exempt under Success Criterion 1.4.3. A gray placeholder on a disabled button, for example, does not need 4.5:1, though the moment that button becomes active, the text it shows does.

Separately, Success Criterion 1.4.11 asks for 3:1 on the boundaries of interactive controls and on graphical objects that carry meaning, such as icons and chart marks. Text and its background are only half the story on a real interface. A button that fails against the page background fails the user even when the label inside passes.

The tool measures solid colors on solid colors. Semi-transparent text has no single background, so blend the layers first and test the result. The same applies to 8-digit hex values: the checker reads the RGB channels and treats the color as opaque. Gradients are the same problem at a larger scale, so test the stops where text will actually sit.

Frequently Asked Questions

Where Contrast Fits in Your Workflow

Contrast is one link in a longer chain. The color palette generator lists a contrast ratio for every palette, computed with the same contrast library this page uses, so you can start from pairs that already hold up. The typography playground applies a pair to a real layout, with a contrast widget that updates as you change weights and sizes. Once a set of colors passes, the brand kit exports the verified hex values as design tokens, keeping one source of truth for the team.

For the wider picture, the accessibility statement explains how Font Blend itself meets WCAG 2.2 AA, and the WCAG 2.2 contrast requirements article walks through what changed in the new version and how to check your colors against it.