Contrast Ratio Checker
Quick answer: The WCAG contrast ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. Dark gray #1A1A1A on white #FFFFFF scores 17.4:1 — passing both AA and AAA for normal and large text. Normal text needs at least 4.5:1 for AA and 7:1 for AAA; large text needs at least 3:1.
Test your text and background colors against the WCAG accessibility standard with this free contrast ratio checker. Pick two colors and get the exact contrast ratio instantly, with AA and AAA pass/fail results for normal and large text.
Enter your colors
Your results
Exact per the WCAG relative-luminance formula. This checks luminance contrast only — it does not cover color blindness or font legibility.
How to use this calculator
Pick a text (foreground) color and a background color using the color pickers, or type hex codes directly. The ratio, pass/fail verdicts, and a live preview update instantly. Use the swap button to reverse the pair.
How this is calculated
This page implements the WCAG 2.x relative-luminance method exactly:
- Each sRGB channel is linearized: if CsRGB ≤ 0.04045, C = CsRGB ÷ 12.92; otherwise C = ((CsRGB + 0.055) ÷ 1.055)2.4, where CsRGB = 8-bit channel ÷ 255.
- L = 0.2126 × R + 0.7152 × G + 0.0722 × B gives each color's relative luminance.
- Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker's. The result ranges from 1:1 (identical colors) to 21:1 (black on white).
Assumptions and edge cases: hex input must be six digits (#RRGGBB). Named colors and alpha transparency are not supported — transparency is not part of the WCAG contrast formula. Results are deterministic; the same pair always yields the same ratio.
Worked example
Dark gray text #1A1A1A on a white #FFFFFF background, verified with the WCAG formula:
- Linearized luminance of #1A1A1A = 0.0103; luminance of #FFFFFF = 1.0000
- Ratio = (1.0000 + 0.05) ÷ (0.0103 + 0.05) = 17.4:1
- Verdict: passes AA normal (4.5:1), AA large (3:1), AAA normal (7:1), and AAA large (4.5:1)
Reference data
| Minimum ratio | Applies to |
|---|---|
| 3.0:1 | AA — large text and user-interface components |
| 4.5:1 | AA — normal text; also AAA large text |
| 7.0:1 | AAA — normal text (enhanced) |
Source: W3C WCAG 2.2 (2026) — contrast ratio formula and thresholds per W3C; see the W3C technique page: w3.org/WAI/GL/2011/WD-WCAG20-TECHS-20110929/G17.
Frequently asked questions
What is a good contrast ratio for text?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. The enhanced AAA level requires 7:1 for normal text and 4.5:1 for large text. Higher ratios are always easier to read.
What counts as large text under WCAG?
WCAG defines large-scale text as 18 point (24 CSS pixels) or larger, or 14 point (about 18.5 CSS pixels) or larger when bold. Everything smaller is treated as normal text and needs the 4.5:1 AA minimum.
How is the contrast ratio calculated?
Each color's relative luminance is computed from its sRGB channels with gamma linearization: L = 0.2126R + 0.7152G + 0.0722B. The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker's. The result ranges from 1:1 to 21:1.
Do I need AAA contrast for accessibility compliance?
WCAG defines AA as the mid conformance level and AAA as the enhanced level above it. Meeting AA is the widely referenced target for general web content; AAA is the stricter, optional level. Check the specific accessibility requirements that apply to your project.