Color Contrast Ratio Calculator
Sample text preview
Contrast Ratio17.40:1
AA Normal TextPass
AA Large TextPass
AAA Normal TextPass
AAA Large TextPass
The Color Contrast Ratio Calculator checks whether text is readable against its background by measuring contrast the way the Web Content Accessibility Guidelines define it. Enter two hex colors and it linearizes each sRGB channel, computes relative luminance, and returns a ratio between 1:1 (identical colors) and 21:1 (black on white). It then reports pass or fail against the WCAG AA and AAA thresholds for both normal and large text.
Formula
ratio = (L1 + 0.05) / (L2 + 0.05), where L1 ≥ L2 and L = 0.2126R + 0.7152G + 0.0722B
- L1
- Relative luminance of the lighter color
- L2
- Relative luminance of the darker color
- R, G, B
- Linearized sRGB channels in the range 0 to 1
How it works
- Enter a foreground (text) color and a background color as hex values, either #RGB shorthand or full #RRGGBB.
- Each channel is converted to linear light, weighted 0.2126 red, 0.7152 green, and 0.0722 blue to get relative luminance, and the lighter and darker luminances form the ratio.
- The ratio is compared with the thresholds: 4.5 for AA normal text, 3 for AA large text, 7 for AAA normal text, and 4.5 for AAA large text.
Worked example
Pure black text (#000000) on a pure white background (#ffffff).
- Black relative luminance = 0; white relative luminance = 1.
- Ratio = (1 + 0.05) ÷ (0 + 0.05) = 1.05 ÷ 0.05.
- Ratio = 21.
Contrast is 21:1, the maximum, passing AA and AAA at every text size.
Frequently asked questions
- What contrast ratio do I need to pass WCAG AA?
- AA requires at least 4.5:1 for normal body text and 3:1 for large text (roughly 18pt, or 14pt bold). The stricter AAA level requires 7:1 and 4.5:1 respectively.
- How is relative luminance calculated?
- Each sRGB channel is divided by 255, linearized (c/12.92 below 0.03928, otherwise ((c+0.055)/1.055) raised to 2.4), then combined as 0.2126 red plus 0.7152 green plus 0.0722 blue.
- Why is green weighted so heavily?
- Human eyes are most sensitive to green light, so it contributes most to perceived brightness. The luminance coefficients reflect that sensitivity, which is why green dominates the formula.
- Does color order matter?
- No. The formula always divides the lighter luminance by the darker one, so swapping the foreground and background colors produces the same contrast ratio.