Loading calculators...
Fetching calculator categories and tools for this section.
Preparing tools and content for you. This usually takes a second.
Fetching calculator categories and tools for this section.
Free WCAG contrast ratio calculator for designers, developers, and QA. Test hex text and background pairs, get the contrast ratio, and see a four-cell pass/fail grid for AA/AAA normal and large text. Need AAA-focused preview? Use our color contrast WCAG AAA calculator.
Last updated: May 24, 2026
Building a token library? Font size accessibility calculator
Contrast Ratio
17.4:1
AA (Normal)
Pass
AAA (Normal)
Pass
AA (Large)
Pass
AAA (Large)
Pass
Excellent contrast for most text contexts, including stringent accessibility targets.
Always test contrast in real UI states (hover, focus, disabled, dark mode).
We can build and embed a custom version of Contrast Ratio Accessibility Calculator for your brand and workflow.
Answers: does this color pair meet WCAG, and for which text sizes? Solid hex pairs — flatten transparency before testing.
Single number comparing lighter vs darker relative luminance — the core WCAG metric.
See all pass/fail cells at once — catch body text that only passes headline thresholds.
Recommendations scale from fail → large-only → AA → AAA based on computed ratio.
Default: #1A1A1A on #FFFFFF → 17.4:1 — AA normal Pass, AAA normal Pass, AA large Pass, AAA large Pass.
Contrast Ratio
17.4:1
AA (Normal)
Pass
AAA (Normal)
Pass
| WCAG level | Minimum ratio | Typical use |
|---|---|---|
| AA — normal text (SC 1.4.3) | 4.5:1 | Body copy, labels, inputs |
| AAA — normal text (SC 1.4.6) | 7:1 | Enhanced readability targets |
| AA — large text | 3:1 | ≥18pt regular or ≥14pt bold |
| AAA — large text | 4.5:1 | Headlines at large scale |
| Pair | Ratio | AA norm | AAA norm |
|---|---|---|---|
| Default — #1A1A1A on #FFFFFF | 17.4:1 | Pass | Pass |
| Secondary gray — AA only (#767676) | 4.54:1 | Pass | Fail |
| Link blue — AA pass (#0066CC) | 5.57:1 | Pass | Fail |
| Dark mode fail AA normal (#6A6A6A on #121212) | 3.46:1 | Fail | Fail |
| Fail placeholder (#BBBBBB on white) | 1.92:1 | Fail | Fail |
Contrast ratio measures luminance difference, not hue. Two blues with the same lightness can produce different ratios than two grays — always test the exact hex rendered in the browser, not approximate swatches from brand PDFs.
L = relative luminance per WCAG (gamma-corrected sRGB)Ratio = (Llighter + 0.05) / (Ldarker + 0.05)Pass if ratio ≥ threshold for each text categoryPair contrast checks with font size, zoom, and cognitive load tools for end-to-end readable interfaces.
Explore Accessibility & Ergonomics CalculatorsRatio = 17.4:1 — suitable for primary reading text, labels, and form fields on light surfaces. Luminance: text 0.0103, background 1.
Ratio = 4.54:1 — AA normal Pass, AAA normal Fail. Safe for captions only if you accept AA; use darker gray for AAA body text.
Ratio = 5.57:1 — passes AA (yes) for normal text; AAA normal fails. Add underlines for SC 1.4.1 Use of Color.
Ratio = 3.46:1 — fails AA normal, passes AA large only. Shows why secondary grays on dark surfaces cannot be used for 14px body copy. Lighten text toward #9E9E9E+ or raise background luminance.
Share it with product teams validating WCAG contrast for design systems and production UI.
Suggested hashtags: #Accessibility #WCAG #ContrastRatio #DesignSystem #UX