Color Contrast Checker
Enter a foreground and background color to check the WCAG contrast ratio with AA and AAA pass/fail badges for normal and large text.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
How It Works
Pick a foreground and background color using the color swatches or type hex values directly. The tool computes the relative luminance of each color using the WCAG 2.1 formula — a weighted sum of the sRGB channels after gamma decoding — and divides the brighter luminance by the darker one (plus 0.05 in the numerator and denominator to avoid division by zero for pure black). The resulting contrast ratio runs from 1:1 (identical colors) to 21:1 (pure black on pure white). Four WCAG badges show pass or fail: AA for normal text (≥ 4.5:1), AA for large text (≥ 3:1), AAA for normal text (≥ 7:1), and AAA for large text (≥ 4.5:1). A live preview panel shows sample sentences in both normal and large text so you can visually verify the result. The calculation runs entirely in your browser with no server round-trip, and every change to either color updates the ratio and preview instantly.
Use Cases
- Checking a brand color palette for accessibility compliance before shipping a website redesign
- Choosing button and link colors that remain legible against a dark or light theme
- Meeting WCAG 2.1 AA or AAA requirements for Section 508, EN 301 549, or ADA conformance
- Reviewing a mockup sent by a designer to flag unreadable text before development begins
- Teaching accessibility concepts by showing how small luminance differences cause large contrast failures