Color Contrast Ratio Calculator
Web accessibility standards require sufficient contrast between text and its background so that users with low vision, color blindness, or age-related vision loss can read content comfortably. The W3C WCAG 2.2 standard specifies minimum contrast ratios: Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. This calculator uses the official WCAG luminance formula to compute relative luminance from hex color values, then calculates the contrast ratio. Enter your foreground (text) color and background color as hex codes (with or without the # symbol) to get the ratio and instant WCAG pass or fail results.
WCAG contrast requirements summary
| Level | Text type | Min ratio | Common requirement |
|---|---|---|---|
| AA | Normal text (under 18pt) | 4.5:1 | Required by ADA, Section 508, EN 301 549 |
| AA | Large text (18pt or 14pt bold) | 3:1 | Required by ADA, Section 508, EN 301 549 |
| AA | UI components and graphics | 3:1 | WCAG 1.4.11 Non-text Contrast |
| AAA | Normal text | 7:1 | Highest level; not legally required in most contexts |
| AAA | Large text | 4.5:1 | Highest level; not legally required in most contexts |
Luminance formula
Relative luminance L = 0.2126 x R + 0.7152 x G + 0.0722 x B (after linearizing each sRGB channel)
Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance
Color contrast: frequently asked questions
What is WCAG color contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for people with low vision or color blindness. Contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. Ratios range from 1:1 (no contrast) to 21:1 (black on white).
What is the WCAG AA contrast requirement?
WCAG 2.2 Level AA requires: a minimum contrast ratio of 4.5:1 for normal text (under 18pt / 14pt bold) and 3:1 for large text (18pt or larger, or 14pt or larger when bold). These requirements apply to Success Criterion 1.4.3 (Contrast, Minimum). Level AA is the standard required by most accessibility laws including the Americans with Disabilities Act (ADA) and Section 508 in the US, and EN 301 549 in the EU.
What is the WCAG AAA contrast requirement?
WCAG 2.2 Level AAA requires higher contrast: 7:1 for normal text and 4.5:1 for large text (Success Criterion 1.4.6, Contrast Enhanced). Level AAA is the highest level of compliance and is not required by most laws, but is recommended for content designed for users with severe visual impairments. Not all content can meet AAA standards while maintaining design integrity.
What is relative luminance?
Relative luminance is a measure of the brightness of a color, calculated from its RGB values after gamma correction. The formula linearizes the sRGB values: for each channel (R, G, B), if the sRGB value is under 0.04045, divide by 12.92; otherwise raise ((value + 0.055) / 1.055) to the power 2.4. The luminance L = 0.2126 x R + 0.7152 x G + 0.0722 x B. A luminance of 0 is pure black, 1 is pure white.
Does color contrast apply to images and icons?
Yes. WCAG 1.4.11 (Non-text Contrast, Level AA) requires a minimum 3:1 contrast ratio for user interface components (like buttons, form fields, and focus indicators) and meaningful graphics (charts, icons that convey information). Decorative images and purely visual elements with no informational purpose are exempt. Text within images follows the same rules as normal text (4.5:1 for AA).
Official sources
- W3C WCAG 2.2: Success Criterion 1.4.3 Contrast (Minimum).
- W3C WCAG 2.2: Success Criterion 1.4.6 Contrast (Enhanced).
- W3C: G18: Ensuring at least 4.5:1 contrast for text.
Reviewed by the CalculatorHub team, edited by James Graham, 14 June 2026. See our methodology.