Free WCAG Color Contrast Checker
Color contrast is one of the most overlooked aspects of web design, yet it directly affects whether millions of users can read your content. Over 300 million people worldwide have some form of color vision deficiency, and low contrast text is difficult for everyone in bright sunlight or on low-quality screens. Our free contrast checker instantly calculates the ratio between any foreground and background color and tells you whether it passes WCAG AA and AAA standards.
Enter or pick two colors and see the contrast ratio, pass/fail results for normal and large text, and a live preview of how your text looks on the background. Use this tool during design to catch accessibility issues before they reach production — fixing contrast problems early is far easier than retrofitting an entire site.
WCAG Color Contrast Standards
The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility, published by the W3C. They define minimum contrast ratios between text and background colors to ensure content is readable by users with visual impairments, including color blindness, low vision, and age-related vision changes.
- WCAG AA — Normal text: Minimum contrast ratio of 4.5:1. This is the legal requirement for most government and public-sector websites in the US (Section 508), UK, EU, and Australia.
- WCAG AA — Large text (18pt+ or 14pt+ bold): Minimum ratio of 3:1. Large text is easier to read at lower contrast, so the threshold is relaxed.
- WCAG AAA — Normal text: Enhanced ratio of 7:1. The gold standard for maximum readability, recommended for body text on content-heavy sites.
- WCAG AAA — Large text: Enhanced ratio of 4.5:1. Applies the normal-text AA threshold to large text for the highest accessibility tier.
How to Use the Contrast Checker
Select or enter a foreground (text) color and a background color using the color pickers or HEX input fields. The tool immediately calculates the contrast ratio and displays pass/fail badges for WCAG AA and AAA at both normal and large text sizes. A live preview shows sample text rendered with your chosen colors so you can judge readability visually alongside the numerical results.
Who Needs a Contrast Checker?
- Web designers validate color choices during the design phase before development begins.
- Frontend developers verify CSS color combinations meet accessibility requirements before shipping.
- QA engineers audit existing sites for WCAG compliance as part of accessibility testing.
- Content managers ensure text remains readable when placed over images or colored backgrounds.
- Agency teams deliver WCAG-compliant websites to clients in regulated industries (healthcare, finance, government).
Key Features
- Instant contrast ratio calculation between any two colors
- WCAG AA and AAA pass/fail for normal and large text
- Live text preview with your selected color combination
- HEX color input and visual color picker support
- 100% client-side — no color data sent to any server
Tips for Accessible Color Choices
Aim for AAA on body text whenever possible — your users will thank you. Reserve low-contrast combinations for decorative elements that are not essential for understanding content. Never rely on color alone to convey information; pair color cues with icons, labels, or patterns. After checking contrast, also test your design with a color blindness simulator to ensure information is not lost for users with deuteranopia or protanopia.
Frequently Asked Questions
What is the contrast ratio formula?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the darker. Relative luminance is calculated from the linearized sRGB values of each color channel. A ratio of 1:1 means no contrast (identical colors); 21:1 is the maximum (black on white).
Do I need to meet AA or AAA?
WCAG AA is the widely accepted minimum standard and is legally required for many government and public-sector websites. AAA is the enhanced standard that provides the best readability but can be challenging to achieve while maintaining a visually appealing brand palette. Most professional sites target AA as a baseline and AAA for critical text like body copy.
Does contrast affect SEO?
Google has stated that accessibility is a factor in page quality assessments. Poor contrast increases bounce rates and reduces time on page, both of which can indirectly hurt rankings. More importantly, accessible sites reach a wider audience and reduce legal risk under accessibility laws like the ADA and European Accessibility Act.
What counts as "large text"?
WCAG defines large text as 18 point (24px) or larger at normal weight, or 14 point (18.66px) or larger at bold weight (700+). Text smaller than these thresholds must meet the stricter normal-text contrast requirements.
Do contrast requirements apply to icons and UI elements?
WCAG 2.1 requires a minimum 3:1 contrast ratio for user interface components and graphical objects that are necessary to understand content. This includes form borders, focus indicators, chart elements, and icons that convey meaning. Decorative elements are exempt.
Can I check contrast on text over images?
Sample the dominant background color behind your text using a color picker, then check that color against your text color here. For images with varying backgrounds, add a semi-transparent overlay behind the text to ensure consistent contrast across the entire image area.