G4GAME/DevTools

WCAG Contrast Checker

Enter a text color and a background color to see the contrast ratio and whether it passes WCAG AA and AAA — shown as clear PASS/FAIL labels, not just colors.

Last updated: · Runs 100% in your browser

// controls
Presets
18px
Live preview
Generated CSS
/* Contrast ratio: 14.24:1
   AA normal text (4.5:1):  PASS
   AA large text  (3:1):    PASS
   AAA normal text (7:1):   PASS
   AAA large text (4.5:1):  PASS */
.text {
  color: #00ff66;
  background-color: #0b0f0c;
}

// Example output

/* Contrast ratio: 14.24:1
   AA normal text (4.5:1):  PASS
   AA large text  (3:1):    PASS
   AAA normal text (7:1):   PASS
   AAA large text (4.5:1):  PASS */
.text {
  color: #00ff66;
  background-color: #0b0f0c;
}

// Features

  • ▸Exact WCAG contrast ratio
  • ▸AA and AAA results
  • ▸Normal and large text
  • ▸Live text preview
  • ▸Swap colors in one click via presets

// How to use

  1. 01Adjust the controls on the left or pick a preset to start the WCAG Contrast Checker.
  2. 02Watch the live preview update instantly as you change each setting.
  3. 03Fine-tune the generated CSS by hand in the code panel if you like.
  4. 04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Color Picker
Pick any color and get HEX, RGB, RGBA and HSL values as ready-to-use CSS custom properties.
CSS Color Converter
Convert colors between HEX, RGB and HSL instantly — paste any CSS color value and get the others.
CSS Button Generator
Design production-ready buttons with gradients, borders, hover effects and shadows, then copy the CSS.