🎨 WCAG 2.2 Color Contrast Ratio Calculator
A color contrast checker for text and background: the WCAG 2.2 ratio with AA and AAA pass/fail for normal and large text, plus a live preview.
Live Color Contrast Preview (Large Text)
This sample paragraph tests normal 14px/16px body copy readability for WCAG accessibility compliance.
WCAG 2.2 Compliance Ratings
What WCAG 2.2 Color Contrast Ratio Calculator Does
Contrast ratio measures the difference in relative luminance between two colors, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG uses it as the objective test for whether text is readable by people with moderately low vision, without requiring assistive technology.
The calculation is not a simple difference of RGB values. Each channel is first converted from the gamma-encoded sRGB value that appears in your CSS to linear light, then weighted by how much that channel contributes to perceived brightness — green far more than red, and red more than blue.
This tool applies the WCAG 2.2 formula and reports pass or fail at both AA and AAA for normal and large text. The thresholds are legal requirements in many jurisdictions, including under the European Accessibility Act and Section 508 in the United States.
How to Use WCAG 2.2 Color Contrast Ratio Calculator
- Pick foreground text color and background color using color pickers or hex inputs
- Inspect the computed contrast ratio (e.g. 8.5:1)
- Review WCAG AA and AAA pass/fail badges for normal and large typography
Formula Used by WCAG 2.2 Color Contrast Ratio Calculator
Contrast ratio
ratio = (L1 + 0.05) ÷ (L2 + 0.05)
- L1
- Relative luminance of the lighter color
- L2
- Relative luminance of the darker color
- 0.05
- Constant modeling ambient screen flare, which stops the ratio going to infinity against pure black
Relative luminance of an sRGB color
L = 0.2126 R + 0.7152 G + 0.0722 B
- R, G, B
- Linearized channel values, not the raw 0–255 numbers
- linearization
- For each channel c8 in 0–255: c = c8/255; then c ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4
- coefficients
- Luminous efficiency weights — the eye is far more sensitive to green than to blue
Worked example
Mid gray #808080 text on white #FFFFFF.
- Gray channel: 128/255 = 0.50196, which exceeds 0.04045
- Linearize: ((0.50196 + 0.055) / 1.055)^2.4 = 0.21586
- Luminance is equal across channels: L2 = 0.21586
- White linearizes to 1.0, so L1 = 1.0
- Ratio: (1.0 + 0.05) ÷ (0.21586 + 0.05) = 3.95
Result: 3.95:1 — fails AA for normal text (needs 4.5:1), passes AA for large text (needs 3:1).
WCAG 2.2 Contrast Requirements
"Large text" means at least 18pt (24px), or 14pt (18.66px) when bold. Below those sizes the normal-text threshold applies.
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥24px, or ≥18.66px bold) | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | No additional requirement |
| Incidental, decorative or disabled text | Exempt | Exempt |
| Logotypes | Exempt | Exempt |
Common Combinations
Ratios for pairings that appear constantly in real interfaces.
| Foreground | Background | Ratio | AA normal | AA large |
|---|---|---|---|---|
| #000000 | #FFFFFF | 21.00:1 | Pass | Pass |
| #767676 | #FFFFFF | 4.54:1 | Pass | Pass |
| #808080 | #FFFFFF | 3.95:1 | Fail | Pass |
| #999999 | #FFFFFF | 2.85:1 | Fail | Fail |
| #0000FF | #FFFFFF | 8.59:1 | Pass | Pass |
| #FFFF00 | #FFFFFF | 1.07:1 | Fail | Fail |
How to Read Your Result
#767676 is the lightest gray that passes on white
It is a useful number to memorize. Anything lighter than #767676 on a white background falls below 4.5:1 and fails AA for body text. Designers reach for #999 constantly; at 2.85:1 it is nowhere close.
The ratio is symmetric
Swapping foreground and background gives the identical number, because the formula always divides the lighter luminance by the darker. Dark mode does not automatically improve or worsen contrast — it has to be measured on its own palette.
Passing is a floor, not a target
AA at 4.5:1 was calibrated for roughly 20/40 vision. It does not account for small type, thin font weights, low-quality displays or bright sunlight. If a value is scraping past at 4.6:1, there is no margin for any of those.
Limitations & Accuracy Notes
- The WCAG 2.x formula is known to be imperfect. It systematically over-rates dark-mode combinations and under-rates some light ones, because relative luminance does not track perceived contrast at low light levels. APCA, developed as a candidate replacement, addresses this — but WCAG 2.2 remains the conformance standard you are actually measured against.
- Contrast alone does not make text readable. Font size, weight, letter spacing and line length all affect legibility independently, and none of them appear in the ratio.
- The formula assumes the sRGB color space. Colors specified in Display P3, Rec. 2020 or Lab will not give correct results without conversion first.
- Text over images, gradients or video needs the worst-case pairing tested, not an average. A caption that passes over the light part of a photo can fail badly over the dark part.
Frequently Asked Questions
What are the WCAG 2.2 contrast ratio requirements?
How is relative luminance calculated?
What contrast ratio do I need to pass?
What counts as large text?
Does the rule apply to disabled controls or logos?
Is a passing ratio the same as being readable?
Does contrast checking cover color blindness?
How is the ratio actually calculated?
References & Further Reading
- W3C — Web Content Accessibility Guidelines (WCAG) 2.2 — The standard itself, including the relative luminance definition
- W3C — Understanding Success Criterion 1.4.3: Contrast (Minimum) — Rationale, exceptions and the large-text definition