Color Contrast Checker
Preview Heading
This is large text (18px+). The quick brown fox jumps over the lazy dog.
This is normal body text. It demonstrates how your color combination appears in typical paragraph content on websites and applications.
Small text for captions and labels.
What is Color Contrast Checker?
Color Contrast Checker is a free online accessibility tool that calculates the contrast ratio between text and background colors according to WCAG 2.1 guidelines. Web Content Accessibility Guidelines (WCAG) require specific contrast ratios to ensure content is readable for users with visual impairments, color blindness, or those viewing screens in bright sunlight. This contrast checker instantly calculates the ratio between any two colors and shows whether your color combination passes WCAG AA (minimum accessibility) or WCAG AAA (enhanced accessibility) standards for both normal and large text. Designers, developers, and accessibility specialists use contrast checkers to validate color choices before implementation, ensuring websites meet legal accessibility requirements like ADA, Section 508, and EN 301 549. Simply enter your text color and background color to get instant pass/fail results with a live preview of how your text will appear.
How to Use This Tool
Enter your text (foreground) color using the color picker or type a HEX code
Enter your background color using the second color picker or HEX input
View the contrast ratio displayed instantly (e.g., 4.5:1)
Check the WCAG AA and AAA results for normal and large text
Use the swap button to test reversed colors
Preview your text on the background to see real-world appearance
Adjust colors until you achieve the desired accessibility level
Features
- Calculate WCAG 2.1 contrast ratio between any two colors
- Check WCAG AA and AAA compliance for normal and large text
- Live preview shows text on background in real-time
- Pass/fail indicators for quick accessibility validation
- Swap colors button to test reversed combinations
- Copy contrast ratio to clipboard with one click
- Supports HEX color input with color picker
- Free accessibility tool - no signup required
Frequently Asked Questions
- What is a good color contrast ratio for web accessibility?
For WCAG AA compliance (minimum standard), normal text needs at least 4.5:1 contrast ratio, and large text needs 3:1. For WCAG AAA (enhanced accessibility), normal text requires 7:1 and large text needs 4.5:1. Most websites aim for AA compliance, while AAA is recommended for content targeting users with visual impairments.
- What is considered large text in WCAG contrast requirements?
WCAG defines large text as 18pt (24px) regular weight or 14pt (18.5px) bold. Large text has lower contrast requirements because bigger characters are easier to read. For body text, paragraphs, and UI labels, use the normal text contrast requirements (4.5:1 for AA, 7:1 for AAA).
- How do I calculate color contrast ratio manually?
Contrast ratio is calculated using relative luminance values of both colors. The formula is (L1 + 0.05) / (L2 + 0.05) where L1 is lighter and L2 is darker. Luminance considers human perception of red, green, and blue light. Our contrast checker does this calculation automatically using the WCAG algorithm.
- Why is color contrast important for accessibility?
Proper color contrast ensures text is readable for users with low vision, color blindness (affecting 8% of men), and age-related vision changes. It also helps users in challenging environments like bright sunlight. Poor contrast can make websites unusable and may violate accessibility laws like ADA, AODA, and EAA.
- Does my website need to meet WCAG contrast requirements?
Many countries require WCAG compliance by law. In the US, ADA covers commercial websites. EU requires EN 301 549 compliance. Canada has AODA. Even without legal requirements, good contrast improves usability for all users, reduces eye strain, and demonstrates inclusive design practices.
- What colors have the best contrast with white backgrounds?
For white (#FFFFFF) backgrounds, dark colors provide the best contrast. Black (#000000) gives 21:1 ratio. Dark grays like #333333 (12.6:1) and #595959 (7:1 for AAA) work well. Navy blue (#1a1a5e), dark green (#0d5c2a), and dark red (#8b0000) also provide excellent contrast while adding visual interest.