Free Online Color Contrast Checker

A WCAG contrast checker computes the relative-luminance ratio between two colors and reports pass/fail against AA and AAA at both normal and large text sizes.

Your data is processed entirely in your browser and never sent to any server.

Instant results 100% private No signup needed

The quick brown fox jumps over the lazy dog. (Normal text — 14px)

The quick brown fox jumps over the lazy dog. (Large text — 18px)

Large bold heading

17.00:1
Contrast ratio
AA Normal (4.5:1)
Pass
AA Large (3:1)
Pass
AAA Normal (7:1)
Pass
AAA Large (4.5:1)
Pass

How to Use This Tool

  1. Enter or pick the Foreground (text) hex color.
  2. Enter or pick the Background hex color.
  3. Read the live contrast ratio (for example 4.71:1) in the result panel.
  4. Scan the four badges — AA Normal, AA Large, AAA Normal, AAA Large — for Pass or Fail.
  5. Tweak either color until you hit the level your design needs.

What Is a Color Contrast Checker?

WCAG 2.1 Success Criterion 1.4.3 requires a contrast ratio of at least 4.5:1 between text and background for AA compliance and 7:1 for AAA. Large text — 18pt or 14pt bold and above — gets the looser thresholds of 3:1 (AA) and 4.5:1 (AAA). The ratio is `(L1 + 0.05) / (L2 + 0.05)` where L is relative luminance, a gamma-decoded weighted sum of the sRGB channels per the WCAG formula.

Front-end engineers run a contrast check before committing CSS tokens; accessibility specialists audit shipped pages against AA at a minimum; brand designers verify that the corporate accent passes against the dominant background. Failing contrast is the single most common accessibility bug across the web.

The checker computes the ratio live as you change either color and renders a preview block in the actual pair, so you can verify the eye-level result matches the math.

Frequently Asked Questions

What contrast ratio is required by WCAG?
AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA tightens that to 7:1 and 4.5:1 respectively.
How is contrast ratio calculated?
Using WCAG 2.1's relative luminance formula. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's.
What counts as large text?
18pt (24px) and up, or 14pt (18.66px) bold and up. Anything smaller is treated as normal text and needs the stricter ratio.

Published by the WeGotEveryTool team. We build and test every tool in-house and update pages when the underlying spec, formula, or recommendation changes.

Reviewed: May 2026. Disclaimer: this tool is provided as-is for general informational use. For decisions with material consequences (medical, legal, financial, security) verify results against a qualified professional source.

Related Color & Design

Color Blindness Simulator

Simulate protanopia, deuteranopia, tritanopia and achromatopsia. See how your color choices appear to colorblind users.

Color Picker

Pick any color with an interactive picker. See hex, RGB and HSL values update live, then copy in one click.

Color Palette Generator

Generate complementary, analogous, triadic, tetradic and monochromatic color schemes from any seed color.

Color Shades Generator

Generate 10 shades, 10 tints and 10 tones of any color. Build a Tailwind-style 50–950 scale from a single seed.

Tailwind Color Palette

Browse the full Tailwind CSS v4 color palette — 22 hues × 11 shades. Click any swatch to copy the hex code.