WCAG Color Contrast Checker
Check your color contrast to ensure accessibility. Use this tool to make sure your background and foreground (text) colors have sufficient contrast to meet WCAG 2.1 Level AA accessibility standards.
Contents
Contrast Checker Tool
Invalid Color Input
Please ensure both inputs contain a valid 3- or 6-digit hex code (e.g., #1A2 or #1A2B3C).
Contrast Ratio
4.5:1
Text Preview
This is a sample text preview. The quick brown fox jumps over the lazy dog. This text is set against the current background color to demonstrate the visual contrast.
Large Bold Text Example (Used for 3.0:1 check).
WCAG 2.1 Compliance
| Requirement | Ratio | Status |
|---|---|---|
| WCAG AA (Normal Text) | Minimum 4.5:1 | Pass |
| WCAG AA (Large Text*) | Minimum 3.0:1 | Pass |
| WCAG AAA (Normal Text) | Minimum 7.0:1 | Fail |
| WCAG AAA (Large Text*) | Minimum 4.5:1 | Pass |
*Large text is defined as 18pt and larger, or 14pt and larger if bold.