Color Contrast Checker
Color Contrast Checker computes the WCAG 2.1 contrast ratio between any two colors and shows pass/fail for AA and AAA levels, with a live preview of your text on your background.
Last updated: July 2026
A color contrast checker computes the WCAG 2.1 contrast ratio between a text color and a background color. WCAG requires at least 4.5:1 for normal text (AA) and 7:1 for AAA; large text needs 3:1 and 4.5:1. This tool shows the exact ratio, pass/fail results and a live text preview instantly.
How to use Color Contrast Checker
- Pick or type a text color and a background color (hex).
- Read the contrast ratio and the AA/AAA pass/fail results.
- Adjust the colors (or swap them) until your combination passes.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold). AAA raises that to 7:1 and 4.5:1 respectively.
How is the ratio calculated?
Using the WCAG 2.1 relative luminance formula: each color's luminance is computed from its sRGB values, then the ratio (L1 + 0.05) / (L2 + 0.05) is taken.
Are my colors sent anywhere?
No — the ratio is computed instantly in your browser. Nothing is uploaded.
Related developer tools
Color Converter (HEX / RGB / HSL)
Convert colors between HEX, RGB and HSL, with a live colour picker and preview. Free, instant in-browser color converter.
RGB to HEX Color Converter
Convert RGB, HSL and HEX color values instantly with a visual preview. Free, private, in-browser.
CSS Gradient Generator
Create linear and radial CSS gradients visually and copy the code. Free, instant, in-browser gradient generator.
CSS Box Shadow Generator
Design CSS box-shadows visually with sliders and copy the code. Free, instant, in-browser box-shadow generator.