Contrast Checker

How to check color contrast for accessibility

Set a text color and a background color — type a hex code, paste one, or use the native color-picker swatch next to each field — and the ratio updates live as you type. The four badges below it tell you, at a glance, whether that exact pairing passes WCAG 2.1 level AA and AAA for both normal body text and large text (18pt and above, or bold 14pt and above). The two preview blocks on the right render real sample copy in your chosen colors, so you can judge readability by eye as well as by the number. Got the foreground and background backwards? The swap button between the two fields flips them instantly.

What WCAG contrast ratio do you actually need?

The Web Content Accessibility Guidelines define contrast as a ratio from 1:1 (identical colors) to 21:1 (pure black on pure white). For most body copy you need 4.5:1 to meet level AA, the bar most accessibility audits and legal standards reference. Large text — 18pt/24px regular weight or 14pt/18.5px bold — only needs 3:1, because bigger, heavier strokes stay legible at lower contrast. Level AAA is stricter still: 7:1 for normal text and 4.5:1 for large text, and is generally treated as a "nice to have" rather than a hard requirement outside of specialized accessibility-first products. UI components and graphical objects (icons, form borders, focus rings) have their own, separate 3:1 minimum under WCAG 2.1's non-text contrast criterion.

Contrast checker use cases

• Accessibility audits — verify every text/background pairing in a design system meets AA before launch.
• Choosing an accent color — test a brand color against both white and black text to see which one actually reads.
• Dark mode design — light text on a dark background needs the same 4.5:1 minimum, easy to lose track of without checking.
• Legal and compliance review — WCAG AA is the baseline most accessibility statements and regulations (like the ADA and EN 301 549) point back to.

Testing a color you haven't finalized yet? Explore its shades and tints in the color picker — every shade has its own contrast, so a slightly darker or lighter version can turn a failing pair into a passing one — or preview how the same pairing looks under color-vision deficiency in the color blindness simulator. Need a whole accessible palette rather than one pair? Start from a seed in the palette generator.

Contrast for buttons, icons and focus states

Text isn't the only thing that needs contrast. WCAG 2.1's non-text contrast rule (1.4.11) requires a 3:1 ratio between a UI component and its surroundings — the border of a text input against the page, the fill of a toggle in its "on" state, the outline of a focus ring against both the component and the background. This is easy to miss because a light-gray input border on a white page can look fine to a designer and still fail. Run the component color and the adjacent color through the checker the same way you would text and background; if it clears 3:1, the control is perceivable. Focus indicators in particular are worth over-building, since keyboard users rely on them entirely.

Common contrast failures and how to fix them

The usual offenders are placeholder text (often set to a mid-gray that lands around 2.5:1), disabled buttons that still need to be readable, light text over a photographic hero image, and colored links that pass against white but fail against a tinted section background. The fix is almost always a lightness change rather than a hue change: darken the text or lighten the background until the ratio clears 4.5:1. If a brand color simply can't hit the ratio at a usable size, reserve it for large headings (which only need 3:1) and use a darker shade of the same hue for body copy — open the color in the color picker and step down the Shades tab until the ratio passes. For placeholder and helper text, aim for at least 4.5:1 anyway; "decorative" is not an exemption users agree with.

Contrast checker FAQ