About the Contrast Ratio
Contrast ratio measures how easily text stands out from its background, using the sRGB relative luminance formula defined by the Web Content Accessibility Guidelines (WCAG). It ranges from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — pure black text on a pure white background).
The formula
Calculating contrast ratio takes two steps. First, each color's relative luminance (L) is derived from its sRGB red, green, and blue channels:
- Normalize each channel to a 0–1 scale: c = channel ÷ 255.
- Linearize it: if c ≤ 0.03928, C = c ÷ 12.92; otherwise C = ((c + 0.055) ÷ 1.055)2.4.
- Combine the linearized channels using WCAG's weights: L = 0.2126·R + 0.7152·G + 0.0722·B.
Then the contrast ratio between two colors is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance — so the ratio is always 1 or greater.
WCAG pass/fail thresholds
- Normal text — needs at least 4.5:1 for AA, 7:1 for AAA.
- Large text (18pt/24px+ regular, or 14pt/18.66px+ bold) — needs at least 3:1 for AA, 4.5:1 for AAA.
- Graphical objects and UI components (icons, form borders, focus indicators) — need at least 3:1 under WCAG 2.1's non-text contrast rule.
Reference points
- Black (#000000) on white (#FFFFFF): 21:1 — the maximum possible contrast.
- White (#FFFFFF) on white (#FFFFFF): 1:1 — no contrast at all.
- Mid-gray (#767676) on white: about 4.54:1 — just over the AA threshold for normal text, a commonly cited "safe gray."
- Light gray (#AAAAAA) on white: about 2.32:1 — fails AA for both normal and large text.
Frequently Asked Questions
What is considered a good contrast ratio?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA raises that to 7:1 and 4.5:1. Black text on a white background is the maximum possible at 21:1, while anything below 3:1 is difficult for most people to read.
What is the difference between WCAG AA and AAA?
AA is the standard accessibility level referenced by most regulations, including the ADA and Section 508, and is the target for most websites. AAA is a stricter, enhanced level that is not required for general content but is recommended for critical text.
What counts as large text under WCAG?
Text qualifies as large if it is at least 18pt (24px) at regular weight, or at least 14pt (18.66px) bold. Large text gets a lower contrast requirement because bigger, bolder strokes stay legible at lower contrast than small body text.
Does contrast ratio account for color blindness?
No. The WCAG formula only measures the difference in luminance (lightness) between two colors, not hue, so it does not fully capture how color-blind users perceive combinations that differ mainly in hue, such as red versus green at similar lightness. Do not rely on color alone to convey information.