WCAG Color Contrast Checker
Enter a foreground and background color to instantly compute the WCAG 2.1 contrast ratio and AA/AAA pass status.
How to Use
Use the color pickers or enter HEX/RGB for foreground (text) and background.
The result card shows the contrast ratio from 1:1 up to 21:1, plus a preview of how the text looks.
Pass/fail flags for normal text (4.5:1, 7:1) and large text (3:1, 4.5:1) appear side by side — green for pass, red for fail.
FAQ
What are the WCAG thresholds?
WCAG 2.1: normal text needs AA 4.5:1 / AAA 7:1, large text (≥18pt or ≥14pt bold) needs AA 3:1 / AAA 4.5:1. Non-text UI components and graphical objects use a 3:1 threshold.
How is the ratio computed?
Compute relative luminance (L1, L2) for each color, then `(lighter + 0.05) / (darker + 0.05)`. The result ranges from 1:1 (identical) to 21:1 (black on white).
What about transparent colors?
WCAG ratios assume opaque colors. Use the actual composited color (foreground blended over the real background) for accurate results.
How is "large text" defined?
Text is "large" at 18pt (24px) or bolder 14pt (18.66px). Larger text passes at lower ratios.
Is anything sent to a server?
No. All computation happens in your browser; the colors never leave the page.
