ADAGuard home
FREE TOOL

Color contrast checker.

Check any two colors against WCAG 2.2 — and get the nearest colors that pass.

px
Try:
The quick brown fox jumps over the lazy dog.
Accessible text is text everyone can read.
Contrast ratio
5.33:1
Passes AA for normal text
Counts as normal text
  • Normal text · AA 4.5:1Pass
  • Normal text · AAA 7:1Fail
  • Large text · AA 3:1Pass
  • Large text · AAA 4.5:1Pass
  • UI components and graphics · AA 3:1Pass

The rules.

  • Normal text4.5:1 for AA, 7:1 for AAA
  • Large text — 24px, or 19px bold3:1 for AA, 4.5:1 for AAA
  • Icons, borders, form controls3:1 (WCAG 1.4.11)

WCAG 2.2 success criteria 1.4.3 and 1.4.6 for text, 1.4.11 for non-text contrast.

Where contrast fails.

Checking two colors tells you whether a pair passes. On a real site the failures hide in places a design review doesn’t look — states that only appear after a click, a hover or a mistake. These are the ones that come up most:

  • Placeholder text

    Light grey placeholders on white — #999 is 2.8:1, #aaa is 2.3:1 — fall under the 4.5:1 that WCAG 1.4.3 asks for. A placeholder isn’t a label, but while it’s visible it is text a user has to read.

  • Error and help text

    Red or orange error messages on white often sit just under 4.5:1. They only appear after a mistake, so a design review of the default state never sees them.

  • Footer and secondary links

    Mid-grey text on dark or colored footers, often between 3.5:1 and 4:1 — subdued by design and just under the line.

  • Badges and labels

    “Sale” and “In stock” badges put small text on a brand color. Small text gets no large-text allowance, so it needs the full 4.5:1.

  • Focus indicators and form borders

    Input borders, icons and the keyboard focus ring are non-text contrast: each needs 3:1 against the colors next to it (WCAG 1.4.11). A site that removes the browser’s outline without a replacement also fails 2.4.7, Focus Visible.

Fixing what you find.

Your own CSS. Text, background and border colors are stylesheet changes. What your developer needs is the element, its two computed colors, the ratio it has and the ratio it needs — the checker above gives the nearest colors that pass, so the change stays close to the design.

Someone else’s widget. Text inside a third-party pop-up, chat button or checkout widget usually can’t be edited directly. Either override it with CSS (which can break when the vendor updates) or send the vendor a support request naming the element and the WCAG criterion.

Every state, not just the default. Check hover, focus, disabled and error states too. A scan of the rendered page measures the text as it is drawn, including content added by scripts.

Questions

What is a good contrast ratio for accessibility?

WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text (24px or larger, or about 19px bold or larger). Level AAA asks for 7:1 and 4.5:1.

What is the difference between WCAG AA and AAA contrast?

AA is 4.5:1 for normal text and 3:1 for large text — the level that accessibility laws and policies usually reference. AAA is 7:1 and 4.5:1, a stricter target that not every design can meet.

What contrast ratio does the ADA require?

The ADA itself names no ratio. The Department of Justice’s 2024 rule for state and local government sites sets WCAG 2.1 Level AA, and courts apply the same standard to businesses — so 4.5:1 for normal text and 3:1 for large text and UI components.

Can I use it for ADA, Section 508 or AODA contrast?

Yes. All three point to WCAG Level AA, and its text contrast rule (1.4.3) is the same in WCAG 2.0, 2.1 and 2.2: 4.5:1 for normal text and 3:1 for large text.

Does disabled text need to meet contrast?

No. WCAG 1.4.3 exempts text in inactive (disabled) controls. It still helps to keep it readable, and the control should make clear it can’t be used.

What contrast ratio do UI components need?

WCAG 2.2 success criterion 1.4.11 asks for at least 3:1 between UI components — form borders, button outlines, focus indicators, icons — and the colors next to them.

Check every color on a page at once.

A scan tests the contrast of all the text on your page, plus 100+ other checks.

Scan your site