Color Contrast Checker — WCAG AA & AAA Accessibility Test

Check any two colors against WCAG standards — get the contrast ratio plus AA and AAA pass/fail verdicts, with one-click suggested fixes.

Color Contrast Checker — WCAG AA and AAA Accessibility Test
Home › Developer Tools › Color Contrast Checker

Color Contrast Checker: WCAG AA and AAA Accessibility Test

Pick your text and background colors to see the exact WCAG contrast ratio (1:1 to 21:1), instant pass or fail verdicts for every AA and AAA level, live text samples, and one-click suggested fixes that make your palette compliant.

Text color (foreground)

Background color

— : 1
Contrast ratio
—
AA Normal text
needs 4.5:1
—
AA Large text
needs 3:1
—
AAA Normal text
needs 7:1
—
AAA Large text
needs 4.5:1
—
UI components
needs 3:1

Live preview
Normal text (under 18pt)

The quick brown fox jumps over the lazy dog. Good contrast keeps every word readable for everyone, including people with low vision or color blindness.

Large text (18pt and up)

Design for everyone

Bold text

Bold callouts stay legible when the contrast ratio passes WCAG AA at minimum.

UI element (button)
100% private

Every calculation happens in your browser. Your color choices are never uploaded, stored, or tracked anywhere.

No signup

Open the page and start checking. No accounts, no email walls, no trial limits on the number of checks.

Free forever

Full WCAG math, live previews, and fix suggestions are free with no paywall and no watermark.

How to use the contrast checker

  1. 1
    Pick two colors

    Choose a text (foreground) color and a background color with the color pickers, or type/paste hex codes like #1A2B3C directly into the fields.

  2. 2
    Read the ratio and verdicts

    The exact contrast ratio from 1:1 to 21:1 updates live, with PASS or FAIL badges for AA normal, AA large, AAA normal, AAA large, and UI components.

  3. 3
    Preview real content

    See how your pair looks on a paragraph, a headline, bold text, and a button mock so you can judge readability beyond the numbers.

  4. 4
    Fix failing pairs

    Hit “Suggest a fix” and the checker darkens or lightens your text color just enough to pass WCAG AA for normal text. Use the swap button to test the reverse pairing.

Why designers use this checker

True WCAG 2.x math

Uses the official relative-luminance formula with the piecewise linearization curve, so your ratio matches WebAIM, Lighthouse, and axe-core results exactly.

All five WCAG thresholds

One view covers AA normal (4.5:1), AA large (3:1), AAA normal (7:1), AAA large (4.5:1), and non-text UI components (3:1) — no second tool needed.

One-click AA fix

The fix engine nudges your foreground color toward black or white in tiny steps until the pair passes AA normal text, preserving your palette’s intent.

Realistic previews

Normal, large, bold, and button samples render in your actual colors, so accessibility checks match what users will really see.

Built for US standards

Aligns with Section 508 and ADA digital-accessibility expectations commonly cited for US websites and government contracts.

Zero setup

No extensions, no plugins, no pasting screenshots into another app. It works on phones, tablets, and desktops.

Frequently asked questions

What is a good contrast ratio?
For normal body text, aim for at least 4.5:1, which passes WCAG AA. 7:1 passes the stricter AAA level. Large text (18pt or 14pt bold and up) needs 3:1 for AA and 4.5:1 for AAA. UI elements like buttons and form borders need 3:1 against adjacent colors.
What counts as “large text” in WCAG?
WCAG defines large text as 18pt (24px) or larger, or 14pt (about 18.66px) bold or larger. Because larger glyphs are easier to read, they are allowed a lower contrast ratio than normal text.
How is the contrast ratio calculated?
Each color is converted to relative luminance using the sRGB linearization formula: values at or below 0.03928 are divided by 12.92, and higher values use ((v + 0.055) / 1.055) raised to the power of 2.4. The ratio is (lighter + 0.05) divided by (darker + 0.05), giving a scale from 1:1 (identical colors) to 21:1 (pure black on pure white).
Why does my pair fail AAA but pass AA?
AAA thresholds are much stricter: 7:1 for normal text versus 4.5:1 for AA. AA is the legal baseline referenced by Section 508 and most accessibility policies, while AAA is a gold standard usually reserved for long-form reading. Failing AAA while passing AA is normal for brand colors.
Does this checker replace an accessibility audit?
No. Contrast is one part of accessibility. An audit also covers keyboard navigation, focus indicators, screen-reader labels, alt text, motion, and more. Use this checker to nail the color math, then run tools like Lighthouse or axe for the rest.
Can I check link colors or button states too?
Yes. Put the link or button text color in the text field and its background in the background field. For hover states, check the hover colors as a separate pair, and use the UI components badge (3:1) for button borders and input outlines.
Is my data sent anywhere?
No. All math runs locally in your browser with plain JavaScript. Nothing is uploaded, logged, or stored on any server.

Related tools

Hex to RGB Converter

Convert hex codes to RGB values instantly — handy when pulling colors from your design system.

 CSS Gradient Generator

Build accessible, beautiful gradients and check that their text overlays still pass contrast.

 Meta Tag Generator

Create SEO and social meta tags with proper previews, just like these live color previews.

 JSON Formatter and Validator

Pretty-print and validate JSON, another developer staple for shipping clean code.

 URL Encoder Decoder

Encode and decode URLs and query strings safely for links, APIs, and redirects.
Scroll to Top