Color Contrast Checker
Last updated:
Check your color combinations against WCAG 2.2 accessibility standards. See the contrast ratio, AA/AAA compliance for normal and large text, and get auto-suggested accessible alternatives. 100% client-side, instant, free.
RGB(30, 41, 59)
RGB(255, 255, 255)
12.63:1
Contrast Ratio
AA Normal Text
≥ 4.5:1
✅ Pass
AA Large Text
≥ 3:1
✅ Pass
AAA Normal Text
≥ 7:1
✅ Pass
AAA Large Text
≥ 4.5:1
✅ Pass
UI Components
≥ 3:1
✅ Pass
Live Preview
Normal text looks like this at 16px. Check readability across different sizes and weights.
Large text at 24px is easier to read.
Bold 14pt+ text also qualifies as large.
Small text at 12px is hardest to read.
How the Color Contrast Checker Works
This tool evaluates color accessibility using the WCAG 2.2 algorithm:
- Enter two colors — use the color picker or type hex codes for your foreground (text) and background colors. The tool updates in real time as you adjust.
- Contrast ratio calculation — the tool calculates the relative luminance of both colors and computes the contrast ratio using the WCAG formula: (L1 + 0.05) / (L2 + 0.05).
- WCAG compliance check — the ratio is tested against five criteria: AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), AAA Large (4.5:1), and UI Components (3:1).
- Live preview — see your colors in action with sample text at different sizes (normal, large, bold, small) to visually confirm readability.
- Auto-suggestion — if your colors fail any WCAG level, the tool suggests the closest accessible foreground color by adjusting lightness while preserving hue and saturation.
Why Color Contrast Matters for Web Accessibility
Color contrast is one of the most fundamental — and most commonly violated — web accessibility requirements:
- 1 in 12 men are color blind — approximately 8% of males and 0.5% of females have some form of color vision deficiency. Low contrast makes your content unreadable for millions of potential visitors.
- Legal requirements are expanding — the Americans with Disabilities Act (ADA), European Accessibility Act (June 2025), UK Equality Act, and Canadian Accessible Canada Act all mandate accessible web content. Lawsuits over web accessibility have increased 300% since 2018.
- Mobile and outdoor readability — even users with perfect vision struggle with low-contrast text on mobile devices in bright sunlight. Good contrast benefits all users in all conditions.
- SEO and AI search impact — Google Lighthouse flags contrast issues, and accessibility problems can affect Core Web Vitals assessments. AI search engines also prefer accessible, well-structured websites.
- Brand trust and professionalism — accessible design signals that you care about all users. It builds trust, reduces bounce rates, and improves overall user experience metrics.
For a full accessibility audit of your website, use our Accessibility Checker which tests 15+ WCAG 2.2 criteria beyond just color contrast. Also check what fonts your site loads — font size and weight affect whether your colors pass at certain contrast ratios, and mobile-friendliness — low contrast is even harder to read on phones in bright sunlight.
WCAG 2.2 Contrast Requirements at a Glance
Quick reference for the contrast ratios you need to hit:
- AA Normal Text (4.5:1) — the minimum standard for body text. Most websites should meet this for all text elements.
- AA Large Text (3:1) — applies to text that is 18pt (24px) or larger at regular weight, or 14pt (18.66px) or larger at bold weight.
- AAA Normal Text (7:1) — the highest standard. Recommended for critical content like legal text, medical information, and government services.
- AAA Large Text (4.5:1) — the highest standard for large text. Most well-designed websites naturally achieve this.
- UI Components (3:1) — required for graphical objects, icons, form inputs, focus indicators, and other non-text visual elements as of WCAG 2.1.
For comprehensive web design that meets accessibility standards from the ground up, explore our web design services and SEO services.
Color Contrast Checker: FAQ
What is color contrast in web accessibility?
Color contrast is the difference in luminance between foreground text and its background color. Sufficient contrast ensures that text is readable for everyone, including people with low vision, color blindness, or those viewing screens in bright sunlight. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios that websites must meet.
What are the WCAG contrast ratio requirements?
WCAG 2.2 defines two conformance levels: Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ regular or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects need at least 3:1 contrast.
What is considered large text?
Large text is defined as 18 point (24px) or larger for regular weight, or 14 point (18.66px) or larger for bold weight. Large text has lower contrast requirements because bigger characters are inherently easier to read.
How is the contrast ratio calculated?
The contrast ratio is calculated using the relative luminance of two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color. Relative luminance accounts for how the human eye perceives different wavelengths — green appears brighter than blue at the same intensity.
Why does WCAG compliance matter?
WCAG compliance is legally required in many jurisdictions including the US (ADA), EU (European Accessibility Act), UK (Equality Act), and Canada. Beyond legal requirements, accessible color contrast improves readability for all users, reduces eye strain, and improves your website's usability on mobile devices and in varying lighting conditions.
What is the difference between AA and AAA?
Level AA is the minimum standard most websites should meet and is legally required in many countries. Level AAA is the highest standard offering maximum readability. Most organizations target AA compliance, with AAA for critical content like legal text, healthcare information, or government services.
Does this tool suggest accessible alternatives?
Yes. When your color combination fails a WCAG level, the tool suggests the closest accessible color by adjusting the foreground color's lightness until it meets the required contrast ratio. This keeps your design intent while achieving compliance.
Can I input colors in formats other than hex?
The tool accepts hex color codes (with or without the # prefix). You can also use the native color picker by clicking the color swatch. The tool displays both hex and RGB values for convenience.
Does color contrast affect SEO?
Indirectly, yes. Google considers page experience signals including accessibility. Poor contrast can increase bounce rates and reduce engagement. Google's Lighthouse audits include contrast checks, and accessibility issues may affect Core Web Vitals assessments. AI search engines also favor accessible, well-structured content.
Is this color contrast checker free?
Yes. Completely free, runs entirely in your browser with zero server calls, no signup, and no limits. Check as many color combinations as you need.
Need Help with Web Accessibility?
We build accessible, WCAG-compliant websites that work for everyone — and rank better too.