Contrast Checker
Check foreground/background color contrast ratios. Verify WCAG AA and AAA accessibility compliance.
Normal text sample — The quick brown fox jumps over the lazy dog.
Large text sample (18px+)
Contrast Ratio21.00:1
WCAG AANormal Text (≥4.5:1)✓ Pass
WCAG AALarge Text (≥3:1)✓ Pass
WCAG AAANormal Text (≥7:1)✓ Pass
WCAG AAALarge Text (≥4.5:1)✓ Pass
How to Use
- Set your foreground color (typically text or icon color) and background color using the color pickers or by typing HEX/HSL values. The contrast ratio updates instantly as you adjust colors.
- Check the WCAG compliance results for both AA and AAA levels. The tool shows pass/fail indicators for normal text (less than 18pt) and large text (18pt and above, or 14pt bold) — the two size categories in the WCAG 2.1 specification.
- Use the suggestion feature to fix failing combinations. The tool can suggest adjusted foreground or background colors that achieve the minimum 4.5:1 ratio for AA compliance while staying close to your original color choice.
Frequently Asked Questions
- What contrast ratio do I need for WCAG compliance?
- For AA compliance: 4.5:1 for normal text and 3:1 for large text. For AAA compliance: 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects need at least 3:1. The checker clearly shows which levels your color pair passes.
- How is the contrast ratio calculated?
- Contrast ratio is calculated using the relative luminance of the two colors based on the WCAG 2.1 formula. Luminance accounts for how the human eye perceives brightness differently for red, green, and blue. The ratio ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).
- Does this only check text contrast?
- While primarily designed for text-on-background contrast, the WCAG 2.1 standard also requires 3:1 minimum contrast for UI components (buttons, form borders, icons) against adjacent colors. You can use the same tool to verify component contrast by entering the component color and its background.