WCAG Color Contrast Checker
The WCAG contrast checker tests foreground and background color pairs against WCAG 2.1 AA and AAA accessibility standards in real time. Enter two HEX values, and the tool calculates the contrast ratio and displays pass or fail results for normal text, large text, and UI components. Use it to validate every color combination in your design before shipping.
Large text sample (24px bold)
Normal text sample, The quick brown fox jumps over the lazy dog.
Small text sample (14px), WCAG does not require 4.5:1 for decorative text.
WCAG 2.1 contrast ratio requirements
WCAG 2.1 defines minimum contrast ratios to ensure text is readable by people with low vision or color blindness. The color contrast checker calculates the contrast ratio between any two colors using the relative luminance formula defined in the WCAG specification. A result of 1:1 means both colors are identical; 21:1 is the maximum possible contrast between pure black and pure white.
For Level AA compliance, normal body text requires a minimum contrast ratio of 4.5:1 and large text requires 3:1. For Level AAA compliance, normal text requires 7:1 and large text requires 4.5:1. The wcag 2.1 color contrast standard also covers non-text elements: UI components such as input borders and focus indicators must achieve a 3:1 ratio against adjacent colors under Success Criterion 1.4.11.
Difference between AA and AAA compliance
Level AA is the baseline required by most accessibility laws worldwide, including the European EN 301 549 standard, Section 508 in the United States, and the Equality Act in the United Kingdom. Meeting AA requirements on all text and UI elements ensures your site is legally compliant and usable by the majority of people with visual impairments.
Level AAA sets a higher bar intended for content that serves users with severe visual disabilities or that appears in specialized accessibility-focused contexts. AAA is recommended for long-form reading interfaces, government portals, and healthcare applications. The accessibility contrast tool shows both thresholds simultaneously so you always know your margin above or below each level.
How to fix contrast failures in your design
When a color pair fails the contrast check, the most direct fix is to darken the foreground color, lighten the background, or both. Small adjustments to the HSL lightness value, darkening a text color by 5 to 10 lightness points, often resolve a failure while keeping the color within your brand palette. Use the format converter alongside this tool to convert your HEX values to HSL for easier adjustment.
If your brand color cannot be adjusted, consider using it only for decorative elements and icons rather than body text. For text specifically, ensure a neutral dark color (such as a shade near #111827) is used at sufficient weight. Run every final text and background combination through the contrast ratio checker before considering a design production-ready.
Frequently asked questions
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, which is defined as 18 point (24px) or 14 point (approximately 18.67px) bold. The same 3:1 ratio applies to UI components such as form borders and focus indicators.
Level AA is the standard required by most accessibility laws and guidelines including WCAG 2.1, EN 301 549, and Section 508. It requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text and is recommended for content targeting users with severe visual impairments.
Yes. Text that is 18 points (24px) or larger, or 14 points (approximately 18.67px) bold or larger, qualifies as large text and only needs to meet the lower 3:1 AA ratio or 4.5:1 AAA ratio. The checker automatically applies the correct threshold based on font size and weight inputs you provide.
Yes. WCAG 2.1 Success Criterion 1.4.11 requires UI components such as button borders, input outlines, and focus indicators to meet a 3:1 contrast ratio against adjacent colors. Enter the component color and its adjacent background color to check compliance for non-text elements.