💻 Developer#접근성#WCAG#명도대비
Color Accessibility: Contrast Ratios and Text Readability
4 min read · Last updated: 2026-05-08
Why color accessibility matters
Approximately 8% of men have some form of color vision deficiency. Users with low vision or age-related vision changes also struggle with low-contrast text. The Web Content Accessibility Guidelines (WCAG) define contrast ratio thresholds to address this.
WCAG contrast ratio thresholds
| Level | Normal text | Large text (18pt+ or bold 14pt+) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Contrast ratio formula
Contrast ratio = (L1 + 0.05) / (L2 + 0.05)
L1 = relative luminance of the lighter color; L2 = relative luminance of the darker color.
Relative luminance calculation:
- Normalize each RGB channel to 0–1 (= value / 255).
- Apply gamma correction: if value ≤ 0.04045, use value / 12.92; otherwise ((value + 0.055) / 1.055)^2.4.
- L = 0.2126 × R + 0.7152 × G + 0.0722 × B
Example: white (#FFFFFF) vs black (#000000) = 21:1 (maximum contrast)
Practical color tips
- Dark text on a light background or light text on a dark background is the baseline good practice.
- Bright yellow and light green on white backgrounds often fail the 4.5:1 threshold.
- Never convey information by color alone (e.g., red for errors only). Pair with icons or text labels so users with color deficiency are not excluded.
- Use browser dev tools or dedicated accessibility checkers to verify ratios before publishing.
Key takeaways
- WCAG AA requires 4.5:1 for normal text and 3:1 for large text.
- The contrast ratio is calculated from the relative luminance of each color.
- Never rely on color alone to convey critical information.
- Using HSL, you can easily improve contrast by adjusting the lightness (L) value.