Color Contrast Ratio Calculator
Calculate WCAG contrast ratio between foreground and background colors. Reports AA/AAA pass/fail for normal and large text with relative luminance values.
Input
Result
Get Free Money Making Tips
Join 2,000+ smart readers getting side-hustle ideas, passive income strategies, and proven finance tips delivered straight to your inbox.
Color Contrast Ratio Calculator: WCAG 2.1 AA/AAA Compliance Checker for Foreground and Background Colors
The Color Contrast Ratio Calculator computes the WCAG contrast ratio between two colors using the relative luminance formula and reports pass/fail status for WCAG 2.1 Level AA and Level AAA compliance for both normal and large text. In "Web Accessibility," "UI Design," and "Legal Compliance," meeting WCAG contrast requirements is a mandatory design constraint. According to the World Health Organization (2023), approximately 2.2 billion people globally have a vision impairment. The Web Content Accessibility Guidelines (WCAG 2.1) published by the W3C require a minimum contrast ratio of 4.5:1 for normal text (Level AA) and 7:1 for enhanced compliance (Level AAA). Failure to meet these standards exposes organizations to legal action under the ADA, Section 508, and the European Accessibility Act.
How is the WCAG contrast ratio calculated?
The contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated by linearizing each sRGB channel (removing gamma) and applying the BT.709 coefficients: L = 0.2126R + 0.7152G + 0.0722B. The linearization formula is: c_linear = c_srgb/12.92 if c_srgb <= 0.03928, else ((c_srgb + 0.055)/1.055)^2.4. The contrast ratio ranges from 1:1 (identical colors) to 21:1 (black on white). This algorithm is defined in WCAG 2.1 Success Criterion 1.4.3.
WCAG Compliance Requirements
| Standard | Text Type | Minimum Ratio | Applies To |
|---|---|---|---|
| WCAG AA | Normal Text (< 18pt) | 4.5:1 | Body text, labels, links |
| WCAG AA | Large Text (>= 18pt or 14pt bold) | 3:1 | Headings, buttons |
| WCAG AAA | Normal Text | 7:1 | Enhanced accessibility |
| WCAG AAA | Large Text | 4.5:1 | Enhanced for headings |
| WCAG AA | UI Components | 3:1 | Icons, borders, focus indicators |
6 Accessibility and Design Use Cases
- Web Design Compliance: Frontend developers verify that text colors meet WCAG AA (4.5:1) against the page background before deployment. Chrome DevTools flags non-compliant contrasts automatically.
- Brand Guideline Validation: Design systems specify foreground/background color pairs. The calculator confirms that all specified combinations meet accessibility requirements.
- Email Template Testing: Email developers check text contrast because email clients do not support CSS variables or computed styles that tools like Lighthouse rely on.
- Mobile App Accessibility: iOS and Android accessibility guidelines reference WCAG ratios. Material Design 3 requires 3:1 for UI elements and 4.5:1 for text.
- Legal Compliance Auditing: Organizations subject to ADA Title III, Section 508, or EN 301 549 must demonstrate WCAG AA compliance. The calculator provides documentary evidence.
- Dark Mode Verification: Dark mode themes often have low-contrast text. The calculator verifies that dark mode color pairs maintain AA compliance.
How to Use the Contrast Ratio Calculator
- Enter Foreground Color: Input the text/foreground hex color (e.g., #333333).
- Enter Background Color: Input the background hex color (e.g., #FFFFFF).
- Execute Check: Click "Calculate Contrast." The tool computes relative luminance for both colors and derives the ratio.
- Review Compliance: The output shows the contrast ratio, pass/fail for all 4 WCAG thresholds (AA normal, AA large, AAA normal, AAA large), luminance values, and an interpretation note.
Common Contrast Ratio Reference Points
Black (#000000) on white (#FFFFFF) achieves the maximum possible ratio of 21:1. Gray #767676 on white is the lightest gray that passes WCAG AA for normal text (4.54:1). Gray #595959 on white passes AAA (7.0:1). The popular "placeholder gray" #999999 on white has a ratio of only 2.85:1, failing all WCAG thresholds — a common accessibility violation. Understanding these reference points enables designers to select colors that meet requirements without sacrificing aesthetic intent.
Frequently Asked Questions
What counts as "large text" in WCAG?
Large text is defined as 18pt (24px) or larger regular weight, or 14pt (18.66px) bold. Large text has a lower contrast requirement (3:1 for AA) because larger characters are inherently more legible.
Does the ratio depend on which color is foreground vs background?
No. The contrast ratio formula uses the lighter and darker color regardless of which is foreground or background. A ratio of 4.5:1 between two colors is the same regardless of assignment.
What about semi-transparent colors?
For semi-transparent foregrounds, compute the effective color by blending with the background first, then calculate contrast. The tool accepts fully opaque hex values; for transparency, pre-compute the blended color.
Is 4.5:1 enough for all users?
4.5:1 is the minimum for Level AA compliance. Users with low vision, cataracts, or color blindness benefit from higher ratios. Level AAA (7:1) is recommended for maximum inclusivity.