Contrast Checker (WCAG)

Quick answer: Contrast Checker (WCAG) is a free online contrast checker wcag that lets you check the contrast ratio between any two colors against WCAG standards — see instant AA and AAA pass/fail verdicts for normal and large text. It works instantly with no signup or download — everything runs privately in your browser.

Check the contrast ratio between any two colors against WCAG standards — see instant AA and AAA pass/fail verdicts for normal and large text.

What is the Contrast Checker (WCAG)?

Text is only readable if it stands out from its background, and the Web Content Accessibility Guidelines (WCAG) turn that intuition into a testable number: the contrast ratio. It ranges from 1:1 (identical colors — invisible text) to 21:1 (black on white — maximum contrast). WCAG requires at least 4.5:1 for normal text and 3:1 for large text to meet the AA level that most laws and company policies reference, and 7:1 / 4.5:1 respectively for the stricter AAA level.

This checker computes the ratio using the official WCAG relative-luminance formula — the same math auditors and browser devtools use — and reports clear pass/fail verdicts for AA and AAA at both text sizes. Designers use it to validate color pairings before shipping, developers use it to settle debates about gray-on-gray text, and anyone facing an accessibility audit uses it to document compliance. Because low contrast locks out users with low vision, color blindness, or a phone in bright sunlight, checking takes ten seconds and prevents real exclusion. All computation happens locally in your browser.

How to use the Contrast Checker (WCAG)

  1. Choose a foreground (text) color and a background color with the pickers, or type exact hex values.
  2. Click Check Contrast to compute the WCAG contrast ratio.
  3. Read the verdict cards: AA and AAA results for normal text and for large text (18pt and up, or 14pt bold and up).
  4. If a pairing fails, adjust one of the colors and re-check until it passes the level you need.
  5. Aim for AA as the minimum for body text; treat AAA as the goal for critical content.

Contrast Checker (WCAG) use cases

Accessibility audits

Verify every text/background pairing on a page meets WCAG AA before an audit or launch. Documenting the exact ratios turns a vague “looks readable” into evidence an auditor accepts.

Design systems

Lock in approved color pairs for buttons, links, and body text so the whole product stays compliant. Checking pairs once, centrally, beats fixing contrast bugs scattered across dozens of screens.

Legal compliance

Document contrast ratios for ADA, Section 508, or European Accessibility Act requirements. A recorded 4.5:1+ ratio is the kind of concrete, testable proof that compliance reviews and auditors actually ask for.

Dark mode

Check that muted grays and accent colors remain readable on dark backgrounds, where contrast fails most often. Many palettes that pass comfortably on white collapse badly on near-black surfaces.

Client work

Settle “is this readable?” debates with an objective number instead of opinions. Showing a client that their light-gray body text scores 2.1:1 ends the discussion faster than any argument.

Tips

  • Large text (at least 18pt, or 14pt bold) gets the easier 3:1 AA bar — but body copy must clear 4.5:1.
  • Brand colors that fail as text often still work for large headings or icons; check both verdicts.
  • Contrast is about luminance, not hue — bright yellow on white fails even though the colors look different.
  • Test the real pair users see, including hover states and text over images, not just the palette swatches.

Frequently asked questions

What is a contrast ratio?
It is a number from 1 to 21 describing how different two colors' brightness (luminance) is. 1:1 means identical colors; 21:1 is black on white. The ratio comes from the WCAG relative-luminance formula and predicts how readable text will be for people with low vision.
What is the difference between WCAG AA and AAA?
AA is the conformance level most accessibility laws and company policies require: 4.5:1 for normal text, 3:1 for large text. AAA is stricter (7:1 normal, 4.5:1 large) and recommended where readability is critical, though it is not legally required in most places.
What counts as large text in WCAG?
Text at least 18 points (24px), or at least 14 points (about 18.66px) when bold. Large text gets lower contrast requirements because its thicker strokes are easier to resolve at a glance, even for readers with low vision. Bookmark these thresholds for audits.
Does this checker match browser devtools?
Yes. Chrome, Edge, and Firefox devtools use the same WCAG relative-luminance formula, so a pairing that passes here will pass there too — assuming you test the exact same two colors. It is the same math in every tool. Consistency is guaranteed by the shared formula.
My brand color fails AA — what should I do?
Darken or lighten it until it passes for text use, or reserve the brand color for large headings, logos, and decorative elements (which have no contrast requirement) while using a compliant shade for body text. Most brands end up with a text-safe ramp of each core color.
Do icons and UI controls need contrast too?
Yes. WCAG 2.1 added a 3:1 requirement for meaningful graphics and UI components like form borders and focus indicators, separate from the text rules. Logos and purely decorative graphics are exempt from the requirement. Don't forget focus indicators in your audit.
Is any of my data uploaded?
No. The ratio is computed from the two color values with plain math in your browser. No colors, pages, or results ever leave your device, so you can check client palettes and unreleased designs freely. Everything stays in the tab you opened.