← Back to the lab

Contrast Checker

Check the contrast ratio of any text and background color against WCAG 2.2 AA and AAA, then fix a failing pair with one click. Free, no sign-up.

What it does

  • Contrast ratio plus pass/fail for AA and AAA, normal and large text, and UI components
  • One-click fix that adjusts the text or the background just enough to pass
  • Live preview with headings, body text, buttons and icons
  • Shareable URL for every color pair

FAQ

What contrast ratio does WCAG require?

WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and for UI components. AAA requires 7:1 for normal text and 4.5:1 for large text.

How does the one-click fix work?

It keeps the hue and saturation of the color you choose to change and moves only its lightness, the smallest amount needed to reach the next failing threshold.

More free tools

  • Palette Generator — Pick a hue, choose a color harmony, and get a full accessible palette with live AA/AAA contrast checking.
  • Image → Palette — Drop in an image, pull out its dominant colors, and see which pairs are safe to use together.
  • Color Blindness Simulator — See a palette through protanopia, deuteranopia, tritanopia and achromatopsia — and catch colors that collapse.
  • Type Scale Generator — Pick a base size and a ratio, get a full type scale with live preview, fluid clamp() and tokens to copy.
  • Gradient & Mesh Generator — Linear, radial, conic or blobby mesh gradients — drag the points, shuffle the colors, copy the CSS.
  • Component States Explorer — Buttons, inputs and cards in every state — hover, focus, pressed, disabled, error — side by side with contrast checks.
  • Design Token Converter — Paste W3C tokens, Tokens Studio or Figma Variables JSON and get CSS, SCSS, Tailwind v4 or SwiftUI — aliases included.
  • Motion & Easing Playground — Drag cubic-bezier handles, tune a real spring, watch them race, and export motion tokens as CSS linear(), Framer Motion or SwiftUI.
  • Auto-Trim — Drop in PNGs and get them back without the empty transparent edges — in bulk, in your browser, as one ZIP.
  • Text Expansion Stress Test — See how a UI breaks in German, Spanish or pseudo-localized text — and which CSS fixes make it survive translation.
  • Mini A11y Audit — Paste HTML and find missing alt text and labels, unnamed buttons, heading jumps, tiny tap targets and low contrast.
  • Multi-size Preview — One message laid out across social and display-ad sizes, with platform safe zones and a draggable focal point. Export every PNG.