Color Contrast Checker
Enter two hex colors (e.g., #RRGGBB) to check their contrast ratio for WCAG accessibility.
Enter colors and click Check
Enter two hex colors (e.g., #RRGGBB) to check their contrast ratio for WCAG accessibility.
1. Enter the foreground color (e.g., text color).
2. Enter the background color.
3. Click "Check Contrast".
WCAG 2.1 AA Compliance:
Normal Text: Ratio ≥ 4.5:1
Large Text (18pt+ or 14pt+ bold): Ratio ≥ 3:1
WCAG 2.1 AAA Compliance:
Normal Text: Ratio ≥ 7:1
Large Text: Ratio ≥ 4.5:1