Color Contrast Checker — WCAG 2.2 AA & AAA Compliance with Fix Suggestions
This color contrast checker instantly calculates the contrast ratio between any foreground and background color and tells you whether it passes WCAG 2.2 Level AA and Level AAA — for both normal text and large text. Unlike WebAIM’s contrast checker, which only returns a pass/fail verdict, this WCAG contrast checker also tells you exactly what color adjustment would fix a failing pair. If your foreground and background fail the 4.5:1 ratio required by Success Criterion 1.4.3, the tool calculates and displays the closest passing alternative automatically.
Enter hex color codes, RGB values, or use the visual color pickers for foreground and background. Results update in real time. The accessibility color checker also covers non-text contrast (WCAG 1.4.11) and supports Section 508 and European Accessibility Act compliance evaluation, making it suitable for US federal contractors and EU-based businesses equally.
Use the AA/AAA contrast checker below — paste your hex color codes to get your ratio and fix suggestion in seconds.
How to Use the WCAG Color Contrast Checker
Step 1 — Enter Your Foreground Color
Type a hex color code (e.g., #1A1A2E) or RGB value in the foreground field, or click the color swatch to open the visual color picker. The foreground color is typically your text color — the one that needs to be readable against the background.
Step 2 — Enter Your Background Color
Enter the background color in the second field. Both fields support hex, RGB, and HSL formats. As you type, both color swatches update to show a live preview of the color pair together, so you can visually evaluate readability before reading the numbers.
Step 3 — Read Your Contrast Ratio and WCAG Results
The contrast ratio appears instantly, calculated from the W3C relative luminance formula. Below the ratio, four compliance badges show the pass/fail status for: AA normal text (4.5:1 minimum), AA large text (3:1 minimum), AAA normal text (7:1 minimum), and AAA large text (4.5:1 minimum). A green checkmark means your color pair passes that criterion.
Step 4 — Get a Fix Suggestion for Failing Pairs
For any failing combination, the tool automatically calculates the minimum color adjustment needed to reach AA compliance. The suggestion adjusts the lightness axis of the failing color and shows the new hex value, the resulting ratio, and a preview of how the corrected pair looks. You can choose to fix the foreground, the background, or both — the tool recalculates all three options.
Step 5 — Run a Palette Matrix (Optional)
Switch to Palette Mode and paste up to 10 hex colors. The tool generates an N×N compliance matrix showing which color pairs pass AA and AAA across your entire design system palette. This is particularly useful when auditing a brand color palette for a WCAG 2.2 accessibility review.
Why Choose Our Color Contrast Checker
The Only Free Checker That Suggests a Fix
WebAIM’s contrast checker is the most widely cited free tool in this category, but it only reports whether a pair passes or fails. When a pair fails, designers must then manually adjust colors and re-test repeatedly until they find a compliant combination. This tool eliminates that iteration loop by running the fix-finding algorithm automatically. The target color is computed by incrementally shifting the HSL lightness value until the contrast ratio crosses the required threshold — a process that takes milliseconds in the browser but can take minutes manually.
Full WCAG 2.2 Coverage Including Non-Text Contrast
Most contrast checkers test only Success Criterion 1.4.3 (text contrast). This tool also evaluates WCAG 1.4.11 (non-text contrast), which applies to UI components like buttons, form borders, focus indicators, and icons. Non-text contrast requires a minimum ratio of 3:1 against adjacent colors — a requirement that became enforceable under the European Accessibility Act in June 2025 and that many design teams overlook entirely.
Relevant for Color Blindness Simulation
The checker’s palette matrix includes a color blindness simulation layer that shows how each pair appears under deuteranopia (red-green), protanopia (red), and tritanopia (blue-yellow) color vision deficiencies. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, making this a critical part of any inclusive design review — not just a compliance checkbox.
Math Is Transparent and Verifiable
The contrast ratio formula — CR = (L1 + 0.05) / (L2 + 0.05) where L is relative luminance — is published openly in the WCAG 2.2 specification. This tool implements that formula exactly, with the sRGB linearization and luminance calculation visible in the source code. No proprietary scoring, no black-box algorithm.
Common Use Cases
- Web designers choosing text colors — verify that body text, headings, and link colors meet Level AA requirements before handoff to developers. Catching failures in design is far cheaper than remediating them in production.
- Developers auditing existing UIs — test color pairs extracted from a live website’s CSS against WCAG 1.4.3 and 1.4.11. The palette matrix mode processes an entire design system in one pass.
- EU businesses preparing for EAA compliance — the European Accessibility Act (enforceable from June 2025) requires digital products serving EU consumers to meet EN 301 549 standards, which incorporate WCAG 2.1 Level AA. Color contrast is one of the most commonly cited failures in EAA audits.
- US federal contractors and Section 508 compliance — Section 508 requires electronic and information technology used by US federal agencies to be accessible, with color contrast thresholds aligned to WCAG 2.0 Level AA.
- Brand teams building accessible marketing materials — validate that brand colors work together accessibly in email templates, presentation decks, and printed collateral to avoid excluding users with low vision.
Frequently Asked Questions
What is a color contrast checker?
A color contrast checker is a tool that calculates the luminance ratio between two colors and reports whether that ratio meets the thresholds defined in the Web Content Accessibility Guidelines (WCAG). It tells designers and developers whether their chosen text and background colors are legible for users with low vision or color blindness, helping to avoid accessibility compliance failures.
What contrast ratio does WCAG require?
WCAG 2.2 requires a minimum contrast ratio of 4.5:1 for normal-sized text at Level AA, and 3:1 for large text (18pt / 14pt bold or larger). For the stricter Level AAA standard, the thresholds rise to 7:1 for normal text and 4.5:1 for large text. Non-text contrast (UI components and graphical elements) requires a minimum of 3:1 under Success Criterion 1.4.11.
What is the difference between WCAG Level AA and AAA?
Level AA is the standard required by most accessibility laws and regulations, including the ADA, Section 508, and the European Accessibility Act. Level AAA is a higher (stricter) threshold that provides the best accessibility for users with severe visual impairments. Most organizations target Level AA as their compliance baseline; Level AAA is typically applied selectively to the most critical content, such as emergency information or primary navigation.
How do I use a color contrast checker?
Enter your text color as the foreground value and your page or element background color as the background value. The tool calculates the contrast ratio and displays pass/fail results for each WCAG level. If your pair fails, use the fix suggestion feature to get the nearest compliant color with minimal visual change to your design.
Is the color contrast checker free?
Yes, this tool is completely free with no usage limits. Single-pair checking, palette matrix mode, and the fix suggestion feature are all available without creating an account or subscribing to a plan.
Related Tools
Color contrast is one part of a complete accessibility and design workflow. These tools cover adjacent needs:
- Readability Analyzer — accessible color is only useful if the text itself is legible. Check reading grade level with seven formulas including Flesch-Kincaid and SMOG.
- Headline Analyzer — make sure your accessible text is also compelling enough to earn clicks with a headline score and SERP preview.
- Image to Base64 Converter — embed icons and UI graphics directly in CSS without extra HTTP requests, maintaining full control over their rendering context.
- Markdown to HTML Converter — convert documentation and content drafts to semantic HTML that pairs cleanly with accessible CSS color schemes.