Color Contrast Checker

Contrast Checker Online — WCAG 2.1 Accessibility Tool

The Contrast Checker by Toolsiro is a free WCAG 2.1 accessibility tool that calculates the contrast ratio between any text color and background color, checks it against all five WCAG accessibility levels, and shows a live preview of exactly how the text looks against the background. No guesswork — just instant, accurate results you can trust.

Color contrast is one of the most fundamental requirements in accessible web design. Insufficient contrast between text and its background makes content difficult or impossible to read for users with low vision, color vision deficiencies, or anyone reading in challenging conditions like bright sunlight or a dim environment. WCAG (Web Content Accessibility Guidelines) defines specific contrast ratios that separate accessible from inaccessible design.

Understanding Contrast Ratio

Contrast ratio measures the difference in relative luminance between two colors. Luminance is a perceptual measure of brightness that accounts for how the human eye responds differently to red, green, and blue light — green appears brighter to the eye than blue at the same intensity, so the formula weights them accordingly.

The contrast ratio formula produces values from 1:1 (identical colors — no contrast) to 21:1 (black text on white, or white text on black — maximum contrast). The ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.

The small 0.05 offset in the formula prevents division by zero when one color is pure black (luminance = 0) and ensures the formula produces human-perceptible results across the full range of brightness. This formula is defined by the W3C and used universally in accessibility testing tools.

WCAG 2.1 Accessibility Levels

WCAG AA — Normal Text (4.5:1): The minimum contrast ratio required for standard body text under WCAG 2.1 Level AA compliance. Normal text is defined as text below 18pt (24px) or below 14pt (18.67px) if bold. This is the most commonly cited accessibility requirement and the minimum standard for most public-facing websites and apps. Most legal accessibility regulations reference WCAG AA as their baseline.

WCAG AA — Large Text (3:1): Large text — defined as 18pt (24px) or larger, or 14pt (18.67px) bold or larger — requires a lower contrast ratio because its larger size makes it easier to read at lower contrast. Headers, display text, and oversized decorative text fall into this category.

WCAG AAA — Normal Text (7:1): The enhanced standard for normal text under Level AAA. This is the highest WCAG contrast requirement and ensures excellent readability for users with significant visual impairments. Not all text is required to meet AAA, but critical content in accessible products should aim for it.

WCAG AAA — Large Text (4.5:1): The enhanced standard for large text. This matches the AA requirement for normal text, applied to large text for the highest accessibility level.

WCAG AA — UI Components (3:1): User interface elements — form borders, focus rings, icons, and other non-text visual indicators — require a 3:1 contrast ratio against adjacent colors. This was added in WCAG 2.1 to cover the accessibility of interactive UI beyond just text.

What the Pass/Fail Results Mean

A green "Pass" badge means the color combination meets that WCAG criterion — you can use this combination for that type of content and be confident it meets the accessibility standard. A red "Fail" badge means the contrast is insufficient for that criterion — the text or element would be difficult to read for users with visual impairments and the combination should be revised.

A combination can pass some levels and fail others simultaneously. For example, a ratio of 4.8:1 would pass AA Normal (≥4.5), AA Large (≥3), and AAA Large (≥4.5), but fail AAA Normal (≥7). In this case, you could use it for body text on an AA-compliant site, but it wouldn't meet AAA standards for normal text.

Live Text Preview

The tool renders a live preview panel showing your text color against your background color with three text samples: large heading text (1.75rem bold, representing "large text" under WCAG), standard body text (normal weight, representing "normal text"), and small bold text. This lets you see the real perceptual result — not just the number — and immediately judge whether the combination looks readable in practice.

Sometimes a technically passing combination still looks uncomfortable to read — especially with certain color hues that vibrate against each other even at adequate contrast. The preview helps you catch these cases that the math alone doesn't reveal.

Common Accessibility Failures and How to Fix Them

Light gray text on white backgrounds is the most common contrast failure in modern web design. The minimalist aesthetic that favors #999999 gray on white produces a contrast ratio of only 2.85:1 — well below the 4.5:1 requirement for normal text. Darkening the gray to #767676 produces exactly 4.5:1, the minimum passing value for normal text on white.

White text on medium-saturated colors often fails. White on a typical medium blue like #4A90E2 produces around 3.2:1 — passing for large text but failing for normal text. Darkening the blue to #1A5C9A brings white text to 4.6:1, meeting AA normal text requirements.

Colored text on colored backgrounds creates unpredictable contrast results that only the formula can reliably evaluate. Blue text on a green background, orange text on yellow, red on pink — these combinations may seem obviously wrong, but the tool gives you the precise number to confirm whether they pass or fail, and by how much they need to change.

Accessibility Compliance in Practice

WCAG compliance is not just a moral obligation — it's a legal one in many jurisdictions. The Americans with Disabilities Act (ADA) in the US, the European Accessibility Act (EAA) in the EU, the Equality Act in the UK, and equivalent laws in Australia, Canada, and many other countries require websites and apps to meet accessibility standards. WCAG 2.1 Level AA is the most commonly cited standard in these legal frameworks.

Beyond legal compliance, accessible contrast benefits all users. Good contrast improves readability in outdoor and bright-light environments, reduces eye strain during extended reading, benefits older users whose contrast sensitivity naturally decreases with age, and improves usability on low-quality screens. Designing for accessibility consistently produces designs that are simply better for everyone.

Tools and Workflow Integration

Use this contrast checker during the design phase before development begins — it's much less expensive to fix a color pairing in a design file than in deployed code. When reviewing a design, check every text-background pairing systematically: body copy on page background, navigation text on nav background, button text on button background, placeholder text in form fields, and link text on content background.

For design systems and component libraries, document the passing contrast ratios of each approved color combination. This makes it possible to use approved pairings confidently without rechecking every instance. Toolsiro's contrast checker is the fastest way to build this reference data.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG AA? 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold), and 3:1 for UI components and non-text elements.

Does this tool check WCAG 2.2? The contrast calculation formula used here is identical for WCAG 2.1 and WCAG 2.2. The contrast requirements for text (4.5:1 AA, 7:1 AAA) remain unchanged in WCAG 2.2. WCAG 2.2 added new criteria for focus indicators and other non-contrast elements.

What is the maximum possible contrast ratio? 21:1, which is pure black (#000000) against pure white (#FFFFFF). This is the reference maximum in the WCAG formula.

Should I use AA or AAA as my target? WCAG AA is the standard legal and compliance target. AAA is recommended for critical content, body copy, and any site serving users with significant visual impairments. Many accessibility professionals recommend targeting AA everywhere and AAA for running body text.

Does contrast ratio apply to images and decorative elements? WCAG contrast requirements apply to text and UI components. Purely decorative images and elements with no informational value are exempt. However, any text overlaid on an image must meet contrast requirements against the image content beneath it.