TextGround TextGround

Color Contrast Checker

Check whether your foreground/background color pair meets WCAG 2.1 accessibility standards. Instant contrast ratio and pass/fail badges — all in-browser, no signup required.
Presets:
—
Contrast Ratio
AA Normal Text
(min 4.5:1)
—
AA Large Text
(min 3:1)
—
AAA Normal Text
(min 7:1)
—
AAA Large Text
(min 4.5:1)
—
Live Preview
Normal text sample (18px) — The quick brown fox
Large text sample (24px bold)
FG: #1e293b BG: #f8fafc

About the Color Contrast Checker

Accessible color contrast is one of the most frequently failed WCAG 2.1 success criteria. WCAG defines contrast as a ratio between the relative luminance of two colors, ranging from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white). This tool computes that ratio using the official WCAG formula — sRGB channel linearization followed by weighted luminance — and tests it against four compliance thresholds.

Use this when choosing text/background color pairs for buttons, labels, body copy, or any UI element. Both AA (the legal minimum in many jurisdictions) and the stricter AAA level are shown. Large text (≥ 18pt / 24px, or ≥ 14pt / ~18.7px bold) benefits from lower thresholds because size compensates for reduced contrast.

Frequently Asked Questions

The contrast ratio is (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 computed by linearizing each sRGB channel (removing gamma correction) and then combining them as 0.2126R + 0.7152G + 0.0722B. The linearization step uses a threshold at 0.04045: values below are divided by 12.92; values above follow a power curve ((c + 0.055) / 1.055) ^ 2.4.
WCAG 2.1 defines two conformance levels for contrast. Level AA requires 4.5:1 for normal text and 3:1 for large text (≥18pt regular or ≥14pt bold). This is the standard required by most accessibility laws, including the EU Accessibility Act and US Section 508. Level AAA is the gold standard: 7:1 for normal text and 4.5:1 for large text — ideal for users with moderate to severe low vision who do not rely on assistive technology.
WCAG 1.4.3 (text contrast) applies to text and images of text. WCAG 1.4.11 (Non-text Contrast, AA) requires a 3:1 ratio for the visual presentation of UI components (like button borders, focus indicators, and icons that convey meaning) against adjacent colors. Purely decorative images and disabled UI components are exempt. This tool is designed for text contrast but the ratio it calculates is equally valid for WCAG 1.4.11 checks.
WCAG defines large text as at least 18pt (approximately 24px) for regular-weight text, or at least 14pt (approximately 18.67px) for bold text. Font size in CSS points is typically calculated as px × 0.75. Headings rendered at 24px or larger in a normal font weight qualify; bold text at 18.67px or larger also qualifies. The large-text thresholds (3:1 for AA, 4.5:1 for AAA) are lower because larger text is inherently easier to read.
The WCAG formula accounts for how the human visual system perceives luminance differences, not just hue differences. Two colors that appear distinct on a high-quality, well-calibrated display can look nearly identical to users with low contrast sensitivity, color vision deficiency, or on certain screen technologies. Gray-on-gray combinations are a common culprit because both colors have similar luminance even if they appear different at first glance.
Absolutely. Simply enter your dark background color in the Background field and your light text color in the Foreground field. The WCAG formula is symmetric — it always uses the lighter color as the numerator — so the order of input does not affect the resulting ratio. The live preview will render your dark-mode palette so you can judge it visually as well.