Color Contrast Checker
Check WCAG contrast ratios between foreground and background colors.
Large Text Preview (24px+)
Normal text preview (16px). The quick brown fox jumps over the lazy dog.
Contrast Ratio
7.00:1
WCAG AA
WCAG AAA
About Color Contrast Checker
The Color Contrast Checker measures the contrast ratio between two colors and tells you whether the combination meets WCAG 2.1 accessibility standards. It checks both AA (minimum) and AAA (enhanced) compliance levels for normal text, large text, and UI components.
Accessibility standards require a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for AAA. Insufficient contrast makes text hard to read for users with low vision or color blindness. This tool helps you catch and fix contrast issues before publishing.
Enter colors in HEX, RGB, or color name format. A live preview shows the actual text appearance on the chosen background.
Features
- ✓Calculates WCAG 2.1 contrast ratio
- ✓AA and AAA compliance checks for normal and large text
- ✓Live text preview on chosen background
- ✓Accepts HEX, RGB, and named colors
- ✓UI component contrast check
Common Use Cases
- →Checking text readability for accessibility compliance
- →Validating button and label color combinations
- →Choosing accessible link colors for a background
- →Auditing existing designs for WCAG compliance
Frequently Asked Questions
What contrast ratio is required for WCAG AA?
Normal text requires 4.5:1. Large text (18pt or 14pt bold) requires 3:1. UI components and graphical objects require 3:1.
What is WCAG AAA contrast?
AAA is enhanced accessibility: 7:1 for normal text and 4.5:1 for large text. It's not required for most sites but is recommended where possible.