WCAG AA Contrast Ratio for Normal Text (4.5:1)
Understand the WCAG 2.1 AA minimum contrast ratio of 4.5:1 for normal-sized text. Learn how to calculate and verify compliance for body copy and UI labels.
Detailed Explanation
WCAG AA Normal Text Requirement
The Web Content Accessibility Guidelines (WCAG) 2.1 define Level AA as the minimum accessibility standard that most organizations should meet. For normal text (text smaller than 18pt regular or 14pt bold), the required minimum contrast ratio is 4.5:1.
What Does 4.5:1 Mean?
The contrast ratio is computed from the relative luminance of the foreground and background colors:
ratio = (L1 + 0.05) / (L2 + 0.05)
where L1 is the lighter luminance and L2 is the darker luminance. A ratio of 4.5:1 means the lighter color is 4.5 times more luminous than the darker color (after the 0.05 offset).
Passing Examples
| Foreground | Background | Ratio | Pass? |
|---|---|---|---|
#000000 |
#ffffff |
21:1 | Yes |
#1e293b |
#ffffff |
14.14:1 | Yes |
#4b5563 |
#ffffff |
6.44:1 | Yes |
#767676 |
#ffffff |
4.54:1 | Yes (barely) |
Failing Examples
| Foreground | Background | Ratio | Pass? |
|---|---|---|---|
#808080 |
#ffffff |
3.95:1 | No |
#9ca3af |
#ffffff |
2.88:1 | No |
#d1d5db |
#ffffff |
1.47:1 | No |
Why 4.5:1?
The 4.5:1 ratio was chosen based on research into visual acuity loss that occurs with aging. A person with 20/40 vision (common for people around age 80) needs approximately 4.5 times the contrast that a person with 20/20 vision needs. This threshold ensures that most people, including those with moderate visual impairments, can read the text comfortably.
Use Case
Use this guideline when setting colors for body text, form labels, navigation links, and any text smaller than 24px regular weight on your website. This is the most commonly referenced WCAG requirement in accessibility audits.