Contrast Checker
FreeCheck WCAG contrast ratio between text and background colors.
Color Contrast Checker — WCAG AA/AAA Accessibility Test Free
Approximately 300 million people worldwide live with colour vision deficiency, and millions more navigate the web under challenging conditions — bright sunlight, low-quality displays, or ageing eyesight. For all of them, insufficient contrast between text and background makes entire sections of your website effectively unreadable. Our free color contrast checker instantly calculates the WCAG 2.1 contrast ratio between any text colour and background colour, telling you precisely whether your combination meets the legal and ethical accessibility threshold — before a single line of code reaches production.
Understanding WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) define contrast requirements at two conformance levels:
- WCAG AA (minimum): Normal text (under 18pt / 14pt bold) requires a contrast ratio of at least 4.5:1. Large text (18pt+ / 14pt+ bold) requires at least 3:1.
- WCAG AAA (enhanced): Normal text requires at least 7:1. Large text requires at least 4.5:1. AAA is required for government and enterprise accessibility mandates in many jurisdictions.
- UI Components & Graphics: Non-text elements like icons, input borders, and focus indicators need a minimum 3:1 ratio against adjacent colours (WCAG 2.1 criterion 1.4.11).
Our WCAG contrast checker evaluates your colour pair against all applicable thresholds simultaneously, displaying clear Pass/Fail badges for Normal Text AA, Normal Text AAA, Large Text AA, and Large Text AAA — giving you a complete accessibility audit in a single view.
Text Background Contrast Ratio — The Math
The text background contrast ratio is calculated using the relative luminance formula defined in the WCAG specification. Relative luminance accounts for the non-linear way human vision perceives brightness — we're more sensitive to changes in dark tones than light ones. The contrast ratio formula is: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the luminance of the darker colour. A white-on-black combination produces the maximum possible ratio of 21:1.
Accessibility Contrast Tool for Design Systems
Building an accessible design system from scratch means checking every text colour token against every background colour token in your palette — a combinatorial challenge that grows rapidly as your token set expands. Use our accessibility contrast tool to validate every meaningful text-on-background pairing in your system before finalising colour decisions. This prevents expensive retroactive contrast fixes discovered during an accessibility audit after development has begun.
Many jurisdictions — including the EU under the European Accessibility Act (2025), the US under Section 508, and the UK under the Public Sector Bodies Accessibility Regulations — legally mandate WCAG AA compliance for websites serving the public. Failing an accessibility audit can result in fines, legal action, and reputational damage.
Frequently Asked Questions (FAQ)
Does a higher contrast ratio always mean better design?
Not necessarily for aesthetic quality, but always for accessibility. Some users — particularly those with dyslexia — find extremely high-contrast text (like pure black on white) harder to read than a slightly softer combination (e.g. dark grey #1a1a1a on white). Meeting WCAG AA is the legal and ethical minimum; AAA is aspirational but not always practical for brand-consistent design.
Do placeholder text and disabled elements need to meet contrast requirements?
No. WCAG explicitly exempts placeholder text in form inputs and inactive/disabled UI elements from contrast requirements, acknowledging that these states intentionally communicate unavailability through reduced contrast.
How do I fix a contrast failure?
The most common fix is darkening text or lightening/darkening the background. Use our Color Shades Generator to explore darker or lighter variants of your current brand colour until the contrast ratio threshold is satisfied, while staying within your brand's colour identity.
How to use Contrast Checker
This Contrast Checker is a high-precision browser-based utility designed for color tools. All processing happens locally on your device, ensuring maximum privacy and blazing-fast performance.
- Step 1: Select your input data or upload a file.
- Step 2: Configure any settings or transformation options.
- Step 3: Click the process button to see instant results.
- Step 4: Download or copy the output to your clipboard.