Color Contrast Checker
Check color contrast ratios for WCAG accessibility compliance. Test foreground and background color combinations to ensure your designs are accessible to all users.
Live Preview
Sample Text
This is how your text will look with the selected color combination.
Contrast Ratio
14.18
Excellent
Copies ratio, colors & WCAG results
WCAG Compliance
Min. ratio: 4.5:1
Regular text under 18pt / 14pt bold
Min. ratio: 7:1
Enhanced contrast for regular text
Min. ratio: 3:1
Text 18pt+ or 14pt+ bold
Min. ratio: 4.5:1
Enhanced contrast for large text
Min. ratio: 3:1
Icons, borders, form controls
Min. ratio: 3:1
Charts, graphs, meaningful graphics
Preset Combinations
Table of Contents
What is Color Contrast?
Color contrast refers to the difference in luminance (brightness) between two colors. When text is placed on a background, the contrast ratio determines how easily the text can be distinguished from its background. A higher contrast ratio means better visibility and readability.
The contrast ratio is calculated using a formula defined by the World Wide Web Consortium (W3C) as part of the Web Content Accessibility Guidelines (WCAG). This formula compares the relative luminance of two colors to produce a ratio ranging from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white or vice versa).
Understanding and testing color contrast is essential for creating accessible websites and applications that can be used by everyone, including people with visual impairments.
WCAG Guidelines Explained
The Web Content Accessibility Guidelines (WCAG) define specific contrast ratio requirements for different types of content. These guidelines are organized into two conformance levels: AA (minimum) and AAA (enhanced).
| Content Type | Level AA | Level AAA |
|---|---|---|
| Normal Text (under 18pt / 14pt bold) | 4.5:1 | 7:1 |
| Large Text (18pt+ / 14pt+ bold) | 3:1 | 4.5:1 |
| UI Components & Graphics | 3:1 | N/A |
Level AA (Minimum)
Level AA is the baseline standard that most organizations aim to meet. It ensures that content is readable by users with moderately low vision, which represents a significant portion of the population. Most legal accessibility requirements reference WCAG 2.1 Level AA.
Level AAA (Enhanced)
Level AAA provides enhanced accessibility and is recommended for users with more severe visual impairments. While meeting AAA for all content may not always be feasible, it's beneficial for critical content like primary navigation and important text.
Why Contrast Matters
Good color contrast is essential for several reasons:
- Visual Impairments: Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Proper contrast ensures content is readable regardless of color perception.
- Aging Eyes: As people age, their eyes' ability to distinguish colors and perceive contrast diminishes. Good contrast helps maintain readability for older users.
- Environmental Conditions: Screen glare, bright sunlight, and low light conditions all affect how colors appear. High contrast text remains readable in various conditions.
- Legal Compliance: Many countries have laws requiring websites to meet accessibility standards. The Americans with Disabilities Act (ADA) and similar legislation often reference WCAG guidelines.
- Better UX for Everyone: High contrast text is easier and faster to read for all users, reducing eye strain and improving the overall user experience.
- SEO Benefits: Search engines increasingly consider accessibility as a ranking factor, making accessible design beneficial for visibility too.
How to Use This Tool
1. Enter Your Colors
Use the color pickers or enter hex color codes directly. The foreground color represents your text color, while the background color represents the surface behind the text.
2. Review the Results
The tool instantly calculates the contrast ratio and shows you which WCAG compliance levels your color combination passes. Look for green "PASS" badges to confirm accessibility.
3. Use the Preview
The live preview area shows exactly how your text will appear on the background. This helps you make visual judgments alongside the numeric ratio.
4. Apply Suggestions
If your combination fails WCAG requirements, the tool will suggest adjusted colors that meet the minimum contrast ratio while staying close to your original choice.
Best Practices
Test Early and Often
Check color contrast during the design phase, not after development. It's much easier to adjust colors in mockups than to refactor implemented interfaces.
Don't Rely on Color Alone
Use additional visual cues like icons, underlines, or patterns to convey information. This helps users who may have difficulty distinguishing certain colors.
Consider All States
Test contrast for all interactive states: hover, focus, active, and disabled states should all maintain adequate contrast ratios.
Mind Your Text Size
Remember that large text (18pt+ or 14pt+ bold) has lower contrast requirements. Use this to your advantage for headings while ensuring body text meets stricter standards.
Document Your Color System
Create and maintain a documented color palette with approved combinations. This ensures consistency across your project and speeds up future design decisions.
Frequently Asked Questions
Level AA is the minimum standard that most organizations should meet. It requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. Level AAA is enhanced accessibility, requiring 7:1 for normal text and 4.5:1 for large text. While AAA is ideal, AA compliance is typically sufficient for legal requirements and covers most users with visual impairments.
Large text is defined as text that is at least 18 points (24px) at normal weight, or at least 14 points (approximately 18.5px) when bold. This includes most headings and display text. Large text has lower contrast requirements because its size makes it inherently more readable.
This tool currently tests solid (opaque) colors only. For transparent colors, you would need to calculate the effective color after it's composited onto its background. The final, rendered color is what matters for contrast testing.
The 4.5:1 ratio was determined through extensive research to provide sufficient contrast for users with moderately low vision (approximately 20/40 vision). This level compensates for the contrast sensitivity loss that comes with typical visual impairments and aging.
Focus on testing combinations where text appears: body text on backgrounds, buttons, form labels, navigation items, and any meaningful text. Decorative elements without text don't require contrast testing. Creating a documented color palette with pre-approved combinations can streamline this process.
Yes, but you must ensure the text maintains adequate contrast against all parts of the gradient it overlays. Test against both the lightest and darkest areas of the gradient. If the contrast fails at any point, consider adding a solid background overlay behind the text.
Text over images is challenging because the background varies. Common solutions include using a semi-transparent overlay, text shadows, or ensuring the text is in an area of consistent color. Always test the worst-case scenario (lowest contrast point) when text overlays variable backgrounds.
While maximum contrast (21:1, pure black on pure white) is technically accessible, some users with dyslexia or visual sensitivity find it harsh. Consider using off-white backgrounds (#F5F5F5) or very dark gray text (#1A1A1A) instead of pure extremes for body text while still maintaining excellent contrast ratios.