CSS & Color
Color Contrast Checker
Check foreground-background color contrast against WCAG 2.1 AA and AAA thresholds for text and UI.
Contrast ratio
Normal text AA
Normal text AAA
Large text AA
Large text AAA
UI components AA
Why use this tool
03Enter two colors and instantly see the WCAG 2.1 contrast ratio plus pass/fail results for normal text, large text, and non-text UI components.
Color Contrast Checker computes the exact luminance-based contrast ratio between a foreground and background color.
It flags compliance with WCAG 2.1 AA and AAA thresholds for normal text (4.5:1, 7:1), large text (3:1, 4.5:1), and non-text UI (3:1).
How to use
03Quick checks before you copy
03Confirm the input is the format you intended.
Scan the result before using it in a document, URL, config, or message.
Copy only the output you need.
FAQ
03
What's the difference between AA and AAA?
AA is the baseline required by most accessibility regulations. AAA is a stricter enhanced level. For normal text, AA is 4.5:1 and AAA is 7:1; for large text, AA is 3:1 and AAA is 4.5:1.
What counts as large text?
WCAG defines large text as at least 18pt (24px) regular, or 14pt (18.66px) bold. Anything smaller falls under the normal text thresholds.
How is the ratio calculated?
We follow WCAG 2.1's formula: convert each color to sRGB relative luminance, then compute (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two. The ratio ranges from 1:1 to 21:1.
Related tools
01Color Converter→
Convert colors between Hex, RGB, HSL, and OKLCH with a live swatch and hue slider.