Color Contrast Checker
Check WCAG AA AAA compliance with professional color contrast checker. Test accessibility, calculate contrast ratios, and ensure inclusive design.
Color Contrast Checker
Ensure your web content is accessible by checking color contrast ratios against WCAG guidelines. Enter text and background colors to see if they meet AA and AAA standards.
Contrast Ratio
0.00 : 1
Sample Text: The quick brown fox jumps over the lazy dog.
Large Sample Text: The quick brown fox.
WCAG Compliance Status
| Guideline | Normal Text | Large Text (18pt / 14pt bold) |
|---|---|---|
| WCAG AA | Fail â (Ratio âĨ 4.5) | Fail â (Ratio âĨ 3) |
| WCAG AAA | Fail â (Ratio âĨ 7) | Fail â (Ratio âĨ 4.5) |
Features & Benefits
Instant Ratio Calculation
See the contrast ratio update in real-time as you pick colors.
WCAG Compliance Check
Clear pass/fail status for WCAG AA and AAA levels for normal and large text.
Interactive Color Pickers
Easily select colors using HEX input or visual color pickers.
Swap Colors
Quickly swap text and background colors with a single click.
Live Preview
See how your chosen color combination looks with sample text.
Accessibility Focused
Designed to help you create more inclusive and accessible web experiences.
How to Use the Color Contrast Checker
1. Input Colors:
Enter the hexadecimal (HEX) color codes for your desired text color and background color in the respective input fields. Alternatively, click the colored square next to the input field to open a visual color picker and select your colors.
Example: For white text on a black background, enter #FFFFFF for Text Color and #000000 for Background Color.
2. View Contrast Ratio:
The contrast ratio between the selected text and background colors will be displayed instantly. A higher ratio means better contrast. You'll also see a live preview of how the text looks on the background.
3. Check WCAG Compliance:
The "WCAG Compliance Status" table shows whether your color combination passes or fails WCAG AA and AAA levels for both normal text and large text. Large text is defined as 18pt (typically 24px) or 14pt bold (typically 18.66px bold).
- WCAG AA (Minimum): Ratio of 4.5:1 for normal text, 3:1 for large text.
- WCAG AAA (Enhanced): Ratio of 7:1 for normal text, 4.5:1 for large text.
4. Swap Colors (Optional):
Click the "Swap Colors" button to quickly interchange the text and background colors.
Understanding Color Contrast & WCAG
Color contrast is a critical aspect of web accessibility. It refers to the difference in lightness (luminance) between the foreground (e.g., text) and background colors. Sufficient contrast makes content readable for everyone, especially users with visual impairments like low vision or color blindness.
The Web Content Accessibility Guidelines (WCAG) provide internationally recognized standards for web accessibility. WCAG defines specific contrast ratios that web content should meet:
- Level AA (Minimum Compliance): This is the generally accepted minimum level of accessibility.
- Normal text requires a contrast ratio of at least 4.5:1.
- Large text (18pt or 14pt bold) requires a contrast ratio of at least 3:1.
- Level AAA (Enhanced Compliance): This level provides a higher degree of accessibility.
- Normal text requires a contrast ratio of at least 7:1.
- Large text (18pt or 14pt bold) requires a contrast ratio of at least 4.5:1.
This tool helps you verify if your chosen color combinations meet these important accessibility standards, contributing to a more inclusive web for all users.
Example Scenarios
Scenario 1: Dark Theme Text
You're designing a dark mode UI and want to use light gray text on a dark background.
- âĸ Text Color:
#CCCCCC(Light Gray) - âĸ Background Color:
#1E1E1E(Dark Gray) - âĸ Result: Check the tool. This combination (ratio ~9.8:1) passes WCAG AAA for normal and large text.
Scenario 2: Brand Color Button
Your brand color is a medium blue, and you want to use white text on buttons.
- âĸ Text Color:
#FFFFFF(White) - âĸ Background Color:
#007BFF(Medium Blue) - âĸ Result: Check the tool. This combination (ratio ~3.97:1) fails WCAG AA for normal text but passes for large text. You might need to darken the blue or use darker text for normal-sized button labels.