Color Contrast Checker
Check if your text and background color combination meets WCAG AA and AAA accessibility standards. See contrast ratio and live preview.
Text Color
Background Color
The quick brown fox jumps over the lazy dog
Normal body text at 16px. Accessibility matters for everyone.
Small text at 12px — often used for captions, footnotes, and labels.
Contrast Ratio
—
:1
WCAG AA — Normal Text
—
Requires ≥ 4.5:1
WCAG AA — Large Text
—
Requires ≥ 3:1
WCAG AAA — Normal Text
—
Requires ≥ 7:1
WCAG AAA — Large Text
—
Requires ≥ 4.5:1
| Level | Text Size | Minimum Ratio | Result |
|---|---|---|---|
| WCAG AA | Normal text (< 18pt / 14pt bold) | 4.5 : 1 | — |
| WCAG AA | Large text (≥ 18pt / 14pt bold) | 3 : 1 | — |
| WCAG AAA | Normal text | 7 : 1 | — |
| WCAG AAA | Large text | 4.5 : 1 | — |
About Color Contrast Checker
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text to ensure readability for people with visual impairments. This tool calculates the relative luminance of two colors and computes the contrast ratio according to the WCAG 2.1 formula.
WCAG Contrast Levels Explained
AA (minimum) — 4.5:1 for normal text, 3:1 for large text (≥ 18pt or bold ≥ 14pt). Required for most websites. AAA (enhanced) — 7:1 for normal text, 4.5:1 for large text. Recommended for the best accessibility.
Frequently Asked Questions
WCAG stands for Web Content Accessibility Guidelines. They are published by the W3C and define how to make web content more accessible to people with disabilities, including those with low vision or color blindness.
WCAG defines large text as text that is at least 18pt (24px) in normal weight, or at least 14pt (18.67px) in bold weight. Headings typically qualify as large text; body copy usually does not.
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 from linearized RGB values using the WCAG 2.1 formula.
AA is the minimum standard required by most accessibility laws and guidelines (including WCAG 2.1 Level AA compliance). AAA is the enhanced level and is recommended but not always required. Aim for AA as a baseline, and AAA where feasible.