Direct answer
The WCAG 2.2 color contrast ratio measures relative luminance difference between foreground text and background surfaces on a mathematical scale from 1:1 (zero contrast) to 21:1 (maximum contrast).
How to use this tool
Select Foreground & Background Colors
Enter HEX, RGB, or HSL color codes or pick colors using the integrated color selector.
Audit WCAG 2.2 AA & AAA Thresholds
Review automatic compliance ratings for normal text (4.5:1 AA / 7.0:1 AAA), large text (3.0:1 AA / 4.5:1 AAA), and UI components (3.0:1 AA).
Remediate with Smart Suggestions
Click suggested nearest-in-gamut color adjustments to fix failing pairings while minimizing perceptual shift (delta E).
How WCAG 2.2 Color Contrast and Relative Luminance Work
Relative luminance (L) is computed by linearizing sRGB color channels (R, G, B) and weighting them according to human spectral eye sensitivity: L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear. The ratio divides lighter luminance L1 by darker luminance L2 with an ambient flare offset (+0.05).
- Normal Body Text: Requires at least 4.5:1 for Level AA and 7.0:1 for enhanced Level AAA.
- Large Heading Text (18pt / 24px or 14pt bold): Requires at least 3.0:1 for Level AA and 4.5:1 for Level AAA.
- UI Controls & Graphical Components: Require at least 3.0:1 for Level AA under WCAG SC 1.4.11.
Practical examples
Brand Blue on White Surface Audit
Input: Foreground: #2563eb (Royal Blue), Background: #ffffff (Pure White)
Output: Contrast Ratio: 4.87:1 — PASS Level AA (Normal Text), PASS Level AAA (Large Text)
Satisfies baseline Level AA requirements for body text and Level AAA for large titles.
Limitations
- Evaluates flat color pairings; complex background gradients or semi-transparent patterns requires checking worst-case luminance points.
- Provides mathematical accessibility evaluations; formal accessibility audits also require testing typography, focus states, and screen reader markup.
Frequently asked questions
What is the difference between WCAG Level AA and Level AAA?
Level AA is the globally recognized standard benchmark for commercial and government websites (4.5:1 for body text). Level AAA is an enhanced standard (7.0:1 for body text) designed to accommodate users with significant vision loss.
Does this tool upload my design colors to any server?
No. All luminance linearizations, ratio calculations, and color remediation algorithms execute locally inside your browser.
Authoritative References & Standards
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Official standard for contrast ratios, Level AA / AAA baselines, and non-text contrast.
- W3C Relative Luminance Definition & Formula ↗ — Mathematical formula for relative luminance in the sRGB color space.