Color Contrast Checker
Check the contrast ratio between two colors and see WCAG AA/AAA pass/fail for normal and large text. Free online color contrast checker.
Foreground Color
Background Color
Contrast Ratio
21.00
Ratios: 1 : 1 is identical, 21 : 1 is the maximum (black on white).
Sample Text (Normal)
The quick brown fox jumps over the lazy dog.
Sample Text (Large)
The quick brown fox jumps over the lazy dog.
WCAG AA — Normal text
≥ 4.5:1
Pass
WCAG AA — Large text
≥ 3:1
Pass
WCAG AAA — Normal text
≥ 7:1
Pass
WCAG AAA — Large text
≥ 4.5:1
Pass
How Is Contrast Ratio Calculated?
Contrast ratio measures the relative difference in luminance between two colors. First, each RGB channel is linearized, then relative luminance is computed as L = 0.2126·R + 0.7152·G + 0.0722·B. The ratio is (L₁ + 0.05) ÷ (L₂ + 0.05), where L₁ is the lighter color.
Example
Black (#000000) on white (#FFFFFF) has the maximum contrast ratio of 21.0:1 and passes every WCAG level. Many decorative gray-on-white pairings fall below the 4.5:1 AA threshold for normal text and should be avoided for body copy.
Common Use Cases
- Checking that body text meets WCAG AA (4.5:1) or AAA (7:1) guidelines.
- Choosing accessible button, link, and placeholder colors.
- Auditing existing designs for color-blind-friendly, readable contrast.
FAQs
What is WCAG AA vs AAA?
WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text. WCAG AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text.
What counts as "large text"?
Large text is roughly 18pt (24px) or larger at regular weight, or 14pt (≈18.66px) or larger at bold weight.
Does contrast check color blindness?
Contrast ratio addresses luminance differences, not hue perception. For full accessibility, also verify your palette is distinguishable for color-blind users and that color isn't the only signal.