🎨 Contrast Ratio Calculator
Enter the RGB values of two colors to calculate their WCAG contrast ratio for accessibility checks.
How WCAG contrast ratio is calculated
The Web Content Accessibility Guidelines (WCAG) define contrast ratio as the difference in relative luminance between two colors, most commonly text and its background. This calculator converts each color’s RGB values into relative luminance using the official WCAG formula, which applies gamma correction to each channel before weighting red, green, and blue by their contribution to perceived brightness.
The contrast ratio itself is calculated 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. Ratios range from 1:1 (no contrast) to 21:1 (black on white).
- WCAG AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.
- WCAG AAA requires at least 7:1 for normal text and 4.5:1 for large text.
Enter the RGB values (0-255) for both colors to see the ratio and whether it meets common accessibility thresholds. This tool is for general design and accessibility planning purposes.