Color contrast checker

WCAG color contrast checker

Test any text and background pair against WCAG 2.2 AA and AAA. If it fails, get the closest colors that pass.

Pick two colors


Try a pair

4.54 : 1

Passes AA

Meets the legal baseline for normal text.

Live preview

Make every page work for everyone.

Body text at 16 pixels, the size most of your content uses. If you can read this comfortably, the pair is a good start. The numbers below decide whether it is a pass.

Test a specific text size

The quick brown fox jumps over the lazy dog

Normal text

Under 24 px, or under 18.66 px bold

  • AAneeds 4.5:1
  • AAAneeds 7:1

Large text

24 px and up, or 18.66 px bold

  • AAneeds 3:1
  • AAAneeds 4.5:1

UI components

Borders, icons, focus rings, chart lines

  • AAneeds 3:1
  • AAAnot defined by WCAGN/A

Closest passing colors

Same hue, smallest change. Select one to apply it.

Color contrast checker

WCAG color contrast checker

Test any text and background pair against WCAG 2.2 AA and AAA. If it fails, get the closest colors that pass.

Content AALegal baseline AAAEnhanced WCAG 2.2 criterion
Normal textBody copy, labels, links 4.5:1 7:1 1.4.3 Contrast (Minimum)1.4.6 Contrast (Enhanced)
Large text24 px, or 18.66 px bold 3:1 4.5:1 1.4.3 Contrast (Minimum)1.4.6 Contrast (Enhanced)
UI components and graphicsInput borders, icons, focus rings, chart lines 3:1 Not defined 1.4.11 Non-text Contrast

Where AA is the legal bar

The European Accessibility Act, ADA case law and Türkiye's digital accessibility circular all point to WCAG 2.x Level AA. AAA is a stretch goal for specific content.

Contrast is not only text

Form field borders, icons and focus indicators need 3:1 against what sits next to them. Many sites that pass on text still fail here.

Exact values count

A ratio of 4.499 does not meet 4.5. This tool never rounds up before deciding pass or fail.

Good to know

Common questions

Short answers about contrast ratios, WCAG levels and what this checker covers.

WCAG compares the relative luminance of the two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result runs from 1:1 (no contrast) to 21:1 (black on white). We do not round up, so 4.499:1 is reported as a fail for 4.5:1.
Text that is at least 24 px (18 pt) regular, or at least 18.66 px (14 pt) bold. Large text only needs 3:1 for AA and 4.5:1 for AAA, because bigger letters are easier to read.
Logos and text in disabled controls are exempt. Placeholder text is not exempt: if it carries information, it needs 4.5:1 like any other text. Icons, input borders and focus indicators need 3:1 against the colors next to them.
Keep the brand color for large headings, buttons with large labels or decorative areas, and use a darker or lighter shade of the same hue for body text. The suggestions above find the closest shade that passes, so the change stays as small as possible.
No. This tool checks one color pair at a time. To find every contrast issue across your pages, run a full scan with the Corpowid accessibility audit.

Corpowid is recognized by Gartner

Corpowid has been recognized by Gartner, a leading global research and advisory firm, for our innovation and performance in digital accessibility. These badges reflect our commitment to creating inclusive, AI-powered web experiences.

Have questions about Corpowid?

Let’s connect.

We will get back to you as soon as possible.