What Is a Color Contrast Checker?

A color contrast checker compares two colors — usually text foreground and page background — and tells you whether the contrast ratio between them passes accessibility standards. The Web Content Accessibility Guidelines (WCAG) require a minimum ratio of 4.5:1 for normal text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 for level AAA.

Insufficient contrast is the most common WCAG failure on the web. This tool catches it in seconds — pick two colors, see a live sample, get clear pass / fail badges, and get a suggested adjustment if the ratio is too low.

About the WCAG Contrast Checker

Pick a foreground color and a background color with the color pickers (or paste HEX, RGB, RGBA, HSL, or named CSS color codes). The tool computes the exact contrast ratio per the WCAG 2.1 formula and renders both normal-text and large-text samples on the chosen background. Pass / fail badges appear for AA, AA Large, AAA, and AAA Large simultaneously. If the ratio is borderline, the tool suggests the nearest lightness adjustment to bring it into compliance.

WCAG Contrast Thresholds at a Glance

AA — normal text: ratio ≥ 4.5:1
AA — large text (18pt / 14pt bold or larger): ratio ≥ 3:1
AA — UI components & graphics: ratio ≥ 3:1
AAA — normal text: ratio ≥ 7:1
AAA — large text: ratio ≥ 4.5:1

Features

Live preview — both colors update the sample text as you adjust the pickers
Accepts HEX (#ff5733), RGB / RGBA, HSL / HSLA, and named CSS colors
Computes the WCAG 2.1 contrast ratio to 2 decimal places
Pass / fail badges for AA, AA Large, AAA, AAA Large rendered simultaneously
"Suggest fix" button: nudges lightness up or down until the next compliance threshold is met
Swap-colors button (reverse foreground / background) with one click
Eyedropper button (in supported browsers) to pick a color from anywhere on your screen
Dark mode that follows your system preference
Permalink — share your color combination with one URL

How to Use

Choose a foreground color (your text color) using the picker or type a HEX / RGB / HSL value.
Choose a background color the same way.
The contrast ratio appears in the centre, with badges for each WCAG level.
If anything fails, click Suggest Fix to see the closest passing combination.
Copy the colors or share the permalink with your team.

Use Cases

Daily workflows that depend on quick contrast checks:

Web & product designers — verifying every text / background combination before handoff to engineering.
Front-end developers — debugging Storybook or Tailwind palettes that look fine to you but fail an a11y audit.
Brand & marketing teams — choosing CTA button colors that don't fail WCAG against a coloured hero background.
Government & public-sector contractors — Section 508 and EN 301 549 both require WCAG AA compliance.
Accessibility auditors — quickly verifying issues raised in axe-core or Lighthouse reports.
Content creators & bloggers — picking caption colors for Instagram, YouTube thumbnails, or PowerPoint that stay legible for everyone.
Product managers — sanity-checking design proposals before they reach an engineering sprint.

Why Choose This Contrast Checker?

Standards-Accurate Math

The contrast ratio uses the exact WCAG 2.1 formula based on relative luminance. Numbers match what Lighthouse, axe-core, and the W3C's own tools report.

Live Visual Sample

A number alone isn't enough — you need to see the result. The live sample renders both normal text and large text on your chosen background so you can spot subjective readability issues that a pass / fail badge can't capture.

Privacy First

Everything happens in your browser. No colors, no permalinks, no behavioural data is sent anywhere. We don't know what you're checking.

Free Forever

No signup, no premium tier, no ads in your output. Open the page, pick two colors, ship accessible designs.

WCAG Contrast Checker — FAQ

What is a contrast ratio?

A number from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure black on pure white). It's calculated from the relative luminance of two colors using the WCAG formula (L1 + 0.05) / (L2 + 0.05) where L1 is the brighter color.

What's the difference between AA and AAA?

AA is the standard legal compliance level (US ADA, EU EAA, UK Equality Act). AAA is the higher "ideal" level recommended for content where accessibility is critical (government, healthcare, education). Most commercial sites target AA; AAA is much harder to meet, especially for branded color palettes.

What counts as "large text"?

Per WCAG: 18pt (about 24px) or larger, OR 14pt bold (about 18.66px bold) or larger. Large text gets a more forgiving 3:1 threshold at AA because larger letterforms are inherently more readable.

Why does my pretty brand color fail?Mid-saturation colors (especially yellows, greens, and cyans) are perceptually bright but have low luminance — great for backgrounds, terrible for body text. Use the Suggest Fix button to find the nearest passing shade, then update your design tokens.

Does this account for color blindness?

The WCAG ratio is a luminance-only check; it doesn't directly model color-blindness. However, sufficient luminance contrast usually also helps color-blind users distinguish foreground from background. For deeper checks, also test your palette against Deuteranopia, Protanopia, and Tritanopia simulations.

What about WCAG 3 / APCA?

WCAG 3 (still in draft as of 2026) uses APCA (Advanced Perceptual Contrast Algorithm), which is more accurate for dark mode and modern displays. We support WCAG 2.1 here because it's the current legal standard; APCA mode is on our roadmap.

Can I check icons and UI components, not just text?

Yes — the AA threshold for "non-text contrast" (UI components, focus rings, graphical objects) is 3:1. Use the same checker; just compare the icon stroke / fill color against the background color.

Does it work offline?

Yes — once the page is loaded, the contrast computation runs entirely client-side.

WCAG Color Contrast Checker — AA & AAA in Seconds