Skip to main content
KioTools
  • +100 Tools
  • 100% Free
  • 0 Pop-up Ads
  • No Sign-up
  • Runs locally

Related Tools

Color Palette Extractor

Pull dominant, vibrant and muted colors from an image.

CSS Glassmorphism Generator

Design frosted-glass UI cards with CSS or Tailwind output.

CSS Gradient Generator

Build linear or radial gradients with live CSS output.

Color Contrast Checker (WCAG)

What is this tool?

A WCAG 2.x contrast checker. It converts both colors to relative luminance, computes the contrast ratio, and checks it against the 3:1, 4.5:1 and 7:1 thresholds the guidelines define — with a live sample of the two colors together.

When to use it

  • Choosing readable text and background colors for a website or app
  • Auditing an existing palette for accessibility compliance
  • Deciding whether body text needs to be darker or larger
  • Checking button, link and icon colors against their background
  • Documenting which color pairs in a design system pass AA

How to use it

  1. 1Set the text color (type a hex or rgb value, or use the swatch)
  2. 2Set the background color the text sits on
  3. 3Read the contrast ratio and the pass/fail badges
  4. 4Use Swap if you entered the colors the wrong way round
  5. 5Adjust a color until the pair meets the level you need

Frequently asked questions

What counts as 'large text'?

WCAG defines it as 18.66px bold or 24px regular and up. Large text only needs a 3:1 ratio for AA, versus 4.5:1 for normal text.

Which color formats are accepted?

Hex (#rgb or #rrggbb) and rgb()/rgba() values. The alpha channel is ignored — contrast is defined for opaque colors.

Does it check AAA as well as AA?

Yes — it shows AA and AAA results for both normal and large text, plus the 3:1 threshold for UI components and graphics.

Is the check done locally?

Yes — it's pure math in your browser; no color data is sent anywhere.