WCAG Color Contrast Ratio Calculator
Measure the WCAG contrast ratio between a foreground and background color to confirm your text is readable and accessible.
Higher is more readable (max 21:1)
- 1
Fg relative luminance
0.2126×0.0103 + 0.7152×0.0103 + 0.0722×0.0103 = 0.0103Each sRGB channel is gamma-linearised (transfer function) then weighted per WCAG - 2
Bg relative luminance
0.2126×1 + 0.7152×1 + 0.0722×1 = 1 - 3
Contrast ratio
(1 + 0.05) ÷ (0.0103 + 0.05) = 17.40
How does this calculator work?
The WCAG contrast ratio is (lighter luminance + 0.05) / (darker luminance + 0.05), ranging from 1:1 to 21:1. Aim for at least 4.5:1 for normal text and 3:1 for large text to meet AA, or 7:1 and 4.5:1 for AAA. Enter two hex colors to check instantly.
Formula
How this is calculated
Enter a foreground (text) hex color and a background hex color. Both 3-digit shorthand (#fff) and 6-digit (#ffffff) forms are accepted, with or without the leading "#".
Each color is converted to its relative luminance. The 8-bit channel value is divided by 255, then linearized: if the result s is at or below 0.03928 it is divided by 12.92, otherwise it becomes ((s + 0.055) / 1.055) raised to the power 2.4. The linearized red, green and blue values are weighted 0.2126, 0.7152 and 0.0722 respectively and summed to give luminance L. The contrast ratio is (Llighter + 0.05) / (Ldarker + 0.05), where the 0.05 term models ambient flare. Ratios run from 1:1 (identical colors) to 21:1 (pure black on pure white).
WCAG 2.1 thresholds determine the pass results: AA requires at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt, or 14pt bold); AAA requires 7:1 for normal text and 4.5:1 for large text. The calculation is symmetric, so swapping foreground and background gives the same ratio. It evaluates color only and does not account for opacity, anti-aliasing, or overlapping layers.
Frequently asked questions
At least 4.5:1 for normal body text and 3:1 for large text (about 18pt regular or 14pt bold). For the stricter AAA level you need 7:1 normal and 4.5:1 large.
No. The formula uses the lighter and darker luminance regardless of which color you label as foreground, so swapping the two inputs produces the same ratio.
Pure white has a relative luminance of 1 and pure black 0. Plugging these into (1 + 0.05) / (0 + 0.05) gives exactly 21, the highest achievable contrast.
Also known as
TG we-Calculate Editorial Team. (2026). WCAG Color Contrast Ratio Calculator [Online calculator]. TG we-Calculate. https://we-calculate.com/calculator/color-contrast-ratio-calculator
TG we-Calculate Editorial Team. "WCAG Color Contrast Ratio Calculator." TG we-Calculate. 2026. https://we-calculate.com/calculator/color-contrast-ratio-calculator.
TG we-Calculate Editorial Team, "WCAG Color Contrast Ratio Calculator," TG we-Calculate, 2026. [Online]. Available: https://we-calculate.com/calculator/color-contrast-ratio-calculator
@misc{wecalculate_color_contrast_ratio_calculator, title = {WCAG Color Contrast Ratio Calculator}, author = {{TG we-Calculate Editorial Team}}, howpublished = {\url{https://we-calculate.com/calculator/color-contrast-ratio-calculator}}, year = {2026}, note = {TG we-Calculate} }
Did this calculator help you?