Color contrast checker

WCAG color contrast checker

Low contrast is one of the most common accessibility failures, and one of the quickest to fix. Enter your text and background colors to see the contrast ratio and whether it passes. WCAG 2.2 AA asks for at least 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1. If a combination falls short, you get the nearest shades that pass, so your palette changes as little as possible.

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.

WCAG levels

What the thresholds mean

WCAG measures contrast as the ratio between the lighter and darker color, from 1:1 (identical) to 21:1 (black on white).

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.