--- title: "WCAG Color Contrast Checker: AA, AAA & Ratio Test" description: "Test foreground and background colors against WCAG AA and AAA contrast thresholds for normal and large text, with a live preview and suggested alternatives." canonical_url: "https://webaloha.co/tools/color-contrast-checker/" markdown_url: "https://webaloha.co/tools/color-contrast-checker.md" date_modified: "2026-07-12T00:00:00.000Z" --- # Color Contrast Checker Last updated: Jul 12, 2026 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. ## How the Color Contrast Checker Works This tool evaluates color accessibility using the WCAG 2.2 algorithm: 1. **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. 2. **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). 3. **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). 4. **Live preview**, see your colors in action with sample text at different sizes (normal, large, bold, small) to visually confirm readability. 5. **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](https://webaloha.co/tools/accessibility-checker/) which tests 15+ WCAG 2.2 criteria beyond just color contrast. Also check [what fonts your site loads](https://webaloha.co/tools/website-font-checker/), font size and weight affect whether your colors pass at certain contrast ratios, and [mobile-friendliness](https://webaloha.co/tools/mobile-friendly-checker/), 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: | Content type | AA (minimum) | AAA (enhanced) | | --- | --- | --- | | **Normal text** under 18pt / 24px | 4.5:1 | 7:1 | | **Large text** 18pt+/24px+, or 14pt+/18.66px+ bold | 3:1 | 4.5:1 | | **UI components & graphics** icons, inputs, focus rings | 3:1 | 3:1 | AA is the legal baseline in most jurisdictions and what most sites should target for every text element. AAA (7:1 normal text) is recommended for critical content like legal, medical, or government information. For comprehensive web design that meets accessibility standards from the ground up, explore our [web design services](https://webaloha.co/web-design-services/) and [SEO services](https://webaloha.co/seo-services/). Next steps ## Color Contrast Checker related tools and articles Continue with the closest follow-up checks and guides based on this tool's topic, crawl intent, and optimization workflow. [![Website Accessibility Checker Tool Online](https://webaloha.co/_astro/tool-accessibility.De8eFST5_Z1xFLi2.webp?dpl=dpl_6dooEWFRHiMy1z87usXYd66qqSjN) Accessibility Checker ](https://webaloha.co/tools/accessibility-checker/)[![HEX RGB HSL Color Converter Tool Online](https://webaloha.co/_astro/tool-color-converter.BXypg9sP_1b1sav.webp?dpl=dpl_6dooEWFRHiMy1z87usXYd66qqSjN) Color Converter ](https://webaloha.co/tools/color-converter/)[![Mobile-Friendly Checker Tool Online](https://webaloha.co/_astro/tool-mobile-friendly.BkTHf6KG_2x26zX.webp?dpl=dpl_6dooEWFRHiMy1z87usXYd66qqSjN) Mobile-Friendly Checker ](https://webaloha.co/tools/mobile-friendly-checker/)[![Custom Website vs Template: Which Is Right for Your Business?](https://webaloha.co/_astro/blog-custom-website-vs-template.Cj6ps0kJ_ZDnEHq.webp?dpl=dpl_6dooEWFRHiMy1z87usXYd66qqSjN) Custom Website vs Template: Which Is Right for Your Business? ](https://webaloha.co/custom-website-vs-template/)[![Responsive Web Design: Why Mobile-First Isn't Optional in 2026](https://webaloha.co/_astro/blog-responsive-web-design.DI5yduy__1NjapK.webp?dpl=dpl_6dooEWFRHiMy1z87usXYd66qqSjN) Responsive Web Design: Why Mobile-First Isn't Optional in 2026 ](https://webaloha.co/responsive-web-design-mobile-first/)[![Web Design Trends That Actually Matter in 2026](https://webaloha.co/_astro/blog-web-design-trends-2026.BKjkTlhT_Z2rlcG5.webp?dpl=dpl_6dooEWFRHiMy1z87usXYd66qqSjN) Web Design Trends That Actually Matter in 2026 ](https://webaloha.co/web-design-trends-2026/) ## Color Contrast Checker: FAQ What results does this Color Contrast Checker show? It calculates the foreground-to-background contrast ratio and marks pass or fail for WCAG AA normal text, AA large text, AAA normal text, AAA large text, and the 3:1 UI-component threshold. It also previews the pair and displays both colors as HEX and RGB. Which contrast thresholds does the tool apply? AA normal text requires 4.5:1 and AA large text requires 3:1. AAA normal text requires 7:1 and AAA large text requires 4.5:1. The UI check uses 3:1. A pass applies only to the tested solid color pair and the selected text-size category. When may I use the large-text result? WCAG treats text as large at 18 point, about 24 CSS pixels, for regular weight or 14 point, about 18.66 CSS pixels, for bold text. Smaller or lighter text must use the normal-text threshold. Test the final computed size and weight, not a design-file label. How does the calculator derive the ratio? It converts each six-digit sRGB color to relative luminance using the WCAG channel transformation, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. Swapping foreground and background therefore leaves the numeric ratio unchanged, although the visual preview changes. How does the suggested accessible foreground color work? When the ratio is below 4.5:1, the tool keeps the foreground hue and saturation, searches darker and lighter lightness values, and offers the first color that reaches 4.5:1 against the chosen background. Apply it as a starting point, then confirm brand fit and every actual state. Which color formats can I enter? The text fields accept three-digit or six-digit HEX values, with or without the hash prefix, and the native pickers provide six-digit HEX. This checker does not accept RGB, HSL, eight-digit HEX, alpha transparency, gradients, images, or blended backgrounds. Does a passing pair prove the component is accessible? No. The checker evaluates two solid colors only. Real components can change through opacity, anti-aliasing, gradients, background images, hover and disabled states, font weight, and overlays. It also does not test non-color cues, focus visibility, text size, or the rest of WCAG. Are the colors I test sent to a server? No. Color parsing, luminance calculation, pass or fail checks, suggestions, swapping, and preview updates run in the browser. The checker makes no color-calculation request to a Web Aloha endpoint, so tested values are not uploaded by this feature. Free 48-Hour Website Audit Not sure what to fix first on your own website? We'll review it and tell you, in plain English. Free & non-obligatory. [Get My Free Audit 💪](https://webaloha.co/free-website-audit/) ## Need Help with Web Accessibility? We build accessible, WCAG-compliant websites that work for everyone, and rank better too. [Explore Web Design Services 🚀](https://webaloha.co/web-design-services/)