Instantly test foreground and background color contrast ratios for WCAG 2.1 AA and AAA compliance. Design accessible, inclusive interfaces that everyone can read.
Color contrast is the measurable difference in relative luminance between two colors — typically the text and its background. Low contrast makes text hard to read, especially for users with low vision, color blindness, or those reading in bright sunlight.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure content is perceivable by the broadest audience. Following these standards is not only best practice — it is a legal requirement in many countries under accessibility laws such as Section 508 (US) and EN 301 549 (EU).
A contrast ratio of 1:1 means no contrast (same color), while 21:1 is the maximum (pure black on pure white). Higher ratios mean better readability for everyone, including users with color vision deficiencies.
Get WCAG-compliant contrast results in seconds — no design experience needed
Type a hex code (e.g. #FF5500) into the foreground or background input field, or click the color swatch to open the visual picker.
The tool instantly calculates your contrast ratio. The higher the number, the more readable your text will be. The progress bar gives a visual sense of the result.
See instant Pass/Fail badges for WCAG AA and AAA compliance across both normal and large text sizes. Green badge means your colors are accessible.
The live preview shows your colors applied to headings, body text, small captions, buttons, and badges — exactly as real users will experience them.
Everything you need to know about color contrast and WCAG accessibility
The WCAG contrast ratio is calculated from the relative luminance of two colors using a formula defined in WCAG 2.1. Each RGB channel is converted to a linear scale, combined into a single brightness value, then compared. The formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker. The result ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).
WCAG AA is the widely accepted minimum standard required by most accessibility laws worldwide. It requires a 4.5:1 ratio for normal text and 3:1 for large text. WCAG AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is not legally mandated in most jurisdictions but provides significantly better readability for users with low vision or color blindness.
WCAG defines large text as at least 18 point (approximately 24px) for regular weight font, or 14 point (approximately 18.67px) for bold text. Large text has relaxed contrast requirements because its increased size makes it naturally more readable. Headings typically qualify as large text; body copy and captions usually do not.
Yes. WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires that visual information needed to identify user interface components — including icons, button boundaries, input borders, and focus indicators — meets a minimum 3:1 contrast ratio against adjacent colors. This is a Level AA requirement that applies to all interactive elements on your page.
Indirectly, yes. Google uses page experience signals including accessibility in its ranking algorithms. Poor contrast leads to higher bounce rates as users struggle to read content, which negatively impacts ranking. Google Lighthouse audits flag low-contrast text as an accessibility issue. Accessible sites with good readability tend to rank better because they genuinely serve users more effectively.
The Accessibility Contrast Checker accepts standard 6-digit hex color codes (e.g. #1A2B3C) and 3-digit shorthand hex (e.g. #FFF). It also automatically displays the equivalent RGB and HSL values for each color. For visual input, clicking the color swatch opens your browser's native color picker for point-and-click color selection.
Yes — the Accessibility Contrast Checker is completely free with no registration, no account creation, and no usage limits. It runs entirely in your browser with no data sent to any server. You can bookmark the page and return anytime. No extensions or downloads are required.
Check your color combinations now and ship WCAG-compliant designs with confidence