WCAG Color Contrast Checker
Pick a text color and a background color to see the exact contrast ratio and whether the pair passes WCAG AA and AAA accessibility requirements for normal and large text.
How the contrast ratio is calculated
This checker implements the exact algorithm from the Web Content Accessibility Guidelines (WCAG) 2.1. The contrast ratio between two colors is defined as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).
Relative luminance is not a simple average of the RGB channels. Each channel is first normalized to the 0–1 range, then linearized with a gamma correction: if a normalized channel value c is at or below 0.03928 it becomes c / 12.92, otherwise it becomes ((c + 0.055) / 1.055) ^ 2.4. The linearized red, green, and blue values are then weighted by human eye sensitivity using the formula L = 0.2126 R + 0.7152 G + 0.0722 B. Green carries the most weight because our eyes are most sensitive to it, while blue contributes the least.
Once the ratio is known, the tool compares it against four thresholds. WCAG AA requires at least 4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold). The stricter AAA level demands 7:1 for normal text and 4.5:1 for large text. A green pass or red fail badge updates instantly as you change either color, and the live preview panel shows your chosen text directly on its background so you can judge readability by eye as well as by number. Everything runs entirely in your browser with no data ever leaving your device.