WCAG Color Contrast Checker
Check foreground and background colors against WCAG 2.2 contrast thresholds for normal text, large text, and UI components.
Enter foreground and background colors as 3- or 6-digit hexadecimal values. The ratio is calculated locally using the WCAG relative-luminance formula.
Readable text preview
The quick brown fox jumps over the lazy dog.
WCAG thresholds used
For WCAG 2.x, normal text needs at least 4.5:1 for Level AA and 7:1 for AAA. Large text needs at least 3:1 for AA and 4.5:1 for AAA. Graphical objects and user-interface components covered by non-text contrast use a 3:1 threshold at Level AA.
What this tool does not decide
A passing color pair does not by itself make an interface accessible. Font size/weight, text over images, gradients, disabled controls, states, focus indicators and actual component boundaries still need review. This checker evaluates only the two supplied solid colors.
Privacy
No colors are uploaded or stored. All calculations happen in the browser.