What contrast ratio does the WCAG contrast checker require?

WCAG 2.x AA needs at least 4.5:1 for normal body text and 3:1 for large text (18pt or 14pt bold). AAA needs 7:1 and 4.5:1 respectively.

Why does the same color pair pass for large text but fail for normal text?

Larger glyphs have thicker strokes that the eye resolves more easily, so WCAG relaxes the threshold from 4.5:1 to 3:1 at AA and from 7:1 to 4.5:1 at AAA.

Does this tool support alpha (transparent) colors?

No — contrast ratio is undefined for translucent colors because the actual rendered color depends on whatever is behind them. Composite alpha against your real background first and pass the resulting opaque hex in.

Does the tool work on hex shorthand like #abc?

Yes. The three-digit shorthand is expanded to six (e.g. #abc to #aabbcc) before luminance is computed.

Is the calculation done on the server?

No. The luminance and ratio math run entirely in your browser, so no color values leave the page.

Contrast Checker

WCAG contrast ratio between two colors with AA/AAA pass/fail for normal and large text.

Written by Golam Rabbani, Founder & Lead Engineer

This interactive tool requires JavaScript. Read the formula and worked example below; you can compute the result by hand.

How to use this contrast checker

Set the foreground (text) and background colors using the color pickers or by typing a hex value.
Watch the live preview update with sample paragraph text in your chosen pair.
Press Check contrast to compute the exact WCAG ratio.
Read the pass/fail table for normal text (under 18pt) and large text (18pt+ or 14pt bold) at AA and AAA.
Use Copy result to copy the ratio plus the four pass/fail verdicts in a single line.

About this contrast checker

The contrast checker computes the WCAG 2.x contrast ratio between two colors and tells you whether the pair passes the AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) thresholds defined in the Web Content Accessibility Guidelines. It converts each hex color to sRGB, linearises the channels with the standard sRGB transfer function, weights them by 0.2126 R + 0.7152 G + 0.0722 B to get relative luminance, then applies (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.

Worked example: foreground #1f2937 (dark slate) on background #ffffff (white) gives relative luminance values of about 0.0271 and 1.0. The ratio is (1.0 + 0.05) / (0.0271 + 0.05) = 13.62:1, which passes both AA and AAA for normal and large text.

The tool runs entirely in your browser, with no network calls — useful when you are picking a button color in a private mockup or verifying a brand palette before handing it to engineering.

FAQ

What contrast ratio does the WCAG contrast checker require?: WCAG 2.x AA needs at least 4.5:1 for normal body text and 3:1 for large text (18pt or 14pt bold). AAA needs 7:1 and 4.5:1 respectively.
Why does the same color pair pass for large text but fail for normal text?: Larger glyphs have thicker strokes that the eye resolves more easily, so WCAG relaxes the threshold from 4.5:1 to 3:1 at AA and from 7:1 to 4.5:1 at AAA.
Does this tool support alpha (transparent) colors?: No — contrast ratio is undefined for translucent colors because the actual rendered color depends on whatever is behind them. Composite alpha against your real background first and pass the resulting opaque hex in.
Does the tool work on hex shorthand like #abc?: Yes. The three-digit shorthand is expanded to six (e.g. #abc to #aabbcc) before luminance is computed.
Is the calculation done on the server?: No. The luminance and ratio math run entirely in your browser, so no color values leave the page.