Color Contrast Checker
Check color contrast ratios for WCAG accessibility
Color Contrast Checker
Contrast Ratio
21.00:1
Excellent
Preview
Small Text (14px)
The quick brown fox jumps over the lazy dog
Regular Text (16px)
The quick brown fox jumps over the lazy dog
Large Text (18px)
The quick brown fox jumps over the lazy dog
WCAG 2.0 Compliance
• Normal text: Less than 18pt (or 14pt bold)
• Large text: At least 18pt (or 14pt bold)
• AA: Minimum contrast ratio of 4.5:1 (3:1 for large text)
• AAA: Enhanced contrast ratio of 7:1 (4.5:1 for large text)
About Color Contrast
Color contrast is crucial for accessibility. WCAG (Web Content Accessibility Guidelines) provides standards to ensure text is readable for people with visual impairments. Higher contrast ratios make content more accessible to everyone, including those with low vision or color blindness.
Your Privacy is Protected
All processing happens entirely in your browser. No data is stored, transmitted, or tracked. Your information remains completely private and secure on your device.
About Color Contrast Checker
A color contrast checker is an essential accessibility tool for web designers, developers, and content creators who need to ensure their websites and applications meet WCAG (Web Content Accessibility Guidelines) standards. Color contrast refers to the difference in luminance between foreground text and background colors, measured as a ratio. Sufficient contrast ensures that text and interactive elements are readable for everyone, including people with visual impairments such as color blindness, low vision, or age-related vision decline. Our color contrast checker instantly evaluates color combinations against WCAG 2.1 Level AA and AAA standards, providing real-time feedback on whether your color choices pass accessibility requirements. This tool calculates contrast ratios, displays pass/fail results for different text sizes, and helps you create inclusive designs that reach a wider audience. Whether you're designing a website, mobile app, or digital content, ensuring proper color contrast is not just a legal requirement in many jurisdictions—it's a fundamental aspect of creating user-friendly, accessible experiences for all users.
Key Features
WCAG Compliance Testing
Automatically test color combinations against WCAG 2.1 Level AA and AAA standards. See instant pass/fail results for normal text, large text, and user interface components, ensuring your designs meet international accessibility guidelines.
Real-time Contrast Ratio Calculation
Get instant contrast ratio calculations as you select colors. The ratio is displayed numerically (e.g., 4.5:1) and visually, helping you understand the relationship between your chosen foreground and background colors.
Multiple Color Input Methods
Enter colors using HEX codes, RGB values, HSL, or use the visual color picker. Switch between input formats seamlessly, making it easy to work with colors from any source or design tool.
Text Size Categories
Check contrast for different text sizes: normal text (below 18pt or 14pt bold) and large text (18pt and larger, or 14pt bold and larger). WCAG has different requirements for each category, and our tool shows results for both.
Visual Preview
See how your text actually appears on the background in real-time. Preview both normal and bold text at various sizes to understand how your color choices will look to users in real-world scenarios.
Color Suggestions
When a color combination fails, get suggestions for alternative colors that would pass WCAG requirements while staying as close as possible to your original design intent.
Reverse Color Test
Instantly swap foreground and background colors to test the reverse combination. This is useful for interactive elements like buttons that may have different states (normal, hover, active).
Export Results
Save or export your contrast ratio results along with the specific colors tested. Perfect for documentation, accessibility audits, or sharing with team members and clients.
How to Use the Color Contrast Checker
Enter Background Color
Enter your background color using the color picker or by typing a HEX, RGB, or HSL value. This is typically your page, section, or container background color.
Enter Foreground Color
Enter your foreground color (text color) using the same methods. This is the color of your text or UI elements that appear on the background.
View Contrast Ratio
View the contrast ratio displayed prominently at the top. A higher ratio means better contrast and better readability for users with visual impairments.
Check WCAG Standards
Check the pass/fail indicators for WCAG AA and AAA standards. Green checkmarks indicate passing grades, while red crosses show failures.
Review Text Sizes
Review the results for both normal text and large text, as WCAG has different minimum requirements for each size category.
Adjust Colors
If your combination fails, adjust one or both colors and watch the results update in real-time, or use the suggested alternative colors to achieve compliance.
Test All Combinations
Test all color combinations used in your design, including headers, body text, links, buttons, and other interactive elements to ensure full accessibility.
Document Results
Document passing combinations for your design system or style guide to maintain consistency across your project and ensure continued accessibility.
Frequently Asked Questions
What is a good contrast ratio for text?
For normal-sized text, WCAG Level AA requires a minimum contrast ratio of 4.5:1, while Level AAA requires 7:1. For large text (18pt or 14pt bold and larger), Level AA requires 3:1 and Level AAA requires 4.5:1. Higher ratios provide better accessibility and readability for all users, especially those with visual impairments.
What is the difference between WCAG AA and AAA?
WCAG Level AA is the legally required standard in most jurisdictions and is considered the baseline for accessibility. It requires contrast ratios of 4.5:1 for normal text and 3:1 for large text. WCAG Level AAA is the highest level and requires 7:1 for normal text and 4.5:1 for large text. AAA is recommended for text-heavy content, educational materials, or sites serving elderly or visually impaired audiences, but is not always legally required.
How is color contrast ratio calculated?
Contrast ratio is calculated using the relative luminance of colors, which measures how bright a color appears to the human eye. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The result ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white).
Does color contrast affect SEO?
While color contrast doesn't directly impact search engine rankings, it significantly affects user experience metrics that do influence SEO. Poor contrast leads to higher bounce rates, lower time-on-page, and reduced engagement—all factors that search engines consider when ranking sites. Additionally, accessibility is increasingly important for search engines, and accessible sites may receive preferential treatment.
Can I check contrast for logos and images?
This tool is primarily designed for text and solid background colors. For logos and images, the contrast requirements are different and more complex since they involve multiple colors and graphical elements. However, you can use this tool to check individual elements within a logo or to test text overlaid on image backgrounds by sampling the average color of the image area behind the text.
What about color blindness?
Contrast ratio testing helps people with color blindness, but it's not the only consideration. About 8% of men and 0.5% of women have some form of color vision deficiency. Beyond checking contrast ratios, you should avoid relying solely on color to convey information (use icons, labels, or patterns), avoid red-green combinations for critical information, and test your designs with color blindness simulators.
Do I need to check contrast for decorative elements?
No, WCAG contrast requirements apply only to text and meaningful graphical elements that convey information or indicate interactivity (like icon buttons). Purely decorative elements like background patterns, divider lines, or ornamental graphics don't need to meet contrast requirements. However, if an element provides information or is interactive, it must meet the appropriate contrast ratio.
How do I fix failing contrast ratios?
To fix failing combinations, you can either darken the text color, lighten the background color, or both. Use our tool's suggestions feature for alternatives, or manually adjust the colors while watching the contrast ratio update in real-time. Sometimes small adjustments to lightness or saturation are enough to achieve compliance while maintaining your design aesthetic. Consider creating a dark mode version if your preferred light colors don't provide enough contrast.
Use Cases
- Website Accessibility Compliance: Ensure your website meets legal accessibility requirements like ADA, Section 508, and WCAG guidelines. Test all text and background combinations used throughout your site, including headers, paragraphs, navigation menus, and footer text. This helps prevent legal issues and ensures your site is usable by everyone.
- Mobile App Design: Verify that your mobile app's color scheme is accessible on various devices and in different lighting conditions. Test contrast ratios for buttons, labels, form fields, and status messages. Good contrast is especially important on mobile devices which are often used outdoors in bright sunlight.
- Brand Identity Development: Create accessible brand color palettes that maintain your brand identity while ensuring readability. Test your primary, secondary, and accent colors against various backgrounds to identify compliant combinations for different use cases like marketing materials, presentations, and digital products.
- Email Template Design: Design email templates with sufficient contrast to ensure messages are readable across different email clients and devices. Many email clients render colors differently, so strong contrast ensures your message is always legible, improving engagement and conversion rates.
- Document and Report Creation: Create accessible PDFs, presentations, and documents with appropriate color contrast. This ensures that reports, whitepapers, educational materials, and corporate documents can be read by everyone, including people with visual impairments or when printed in lower quality.