Accessibility design tool

Color contrast checker

Compare two opaque sRGB hex colors against WCAG 2.2 text and non-text contrast thresholds.

Readable text preview

The quick brown fox jumps over the lazy dog.

How WCAG contrast ratio is calculated

Each sRGB channel is normalized from 0–255 to 0–1 and linearized. Relative luminance is 0.2126R + 0.7152G + 0.0722B. Contrast ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter luminance. The ratio ranges from 1:1 for identical luminance to 21:1 for black and white.

WCAG 2.2 text thresholds

Level AA requires at least 4.5:1 for ordinary text and 3:1 for large-scale text. Level AAA requires 7:1 for ordinary text and 4.5:1 for large-scale text. WCAG defines large-scale text by rendered size and weight, not merely by an HTML heading tag.

Non-text contrast is a separate check

Visual information required to identify user interface components and states generally needs at least 3:1 against adjacent colors at Level AA. That criterion does not mean every border, decorative shape, logo, disabled control, or incidental graphic has the same requirement.

Two flat colors cannot model every page

Transparency, gradients, images, video, shadows, overlays, anti-aliasing, hover states, focus indicators, disabled states, and different background regions require testing the colors actually presented. This tool assumes two fully opaque sRGB colors.

Contrast alone is not full accessibility

Do not use color as the only means of conveying information. Check keyboard focus, semantic markup, zoom, reflow, readable typography, state changes, and assistive-technology output. Automated ratios support review but do not establish complete WCAG conformance.

Thresholds and formulas are based on the W3C Web Content Accessibility Guidelines 2.2 and the W3C relative luminance technique.

This checker evaluates opaque 3- or 6-digit sRGB hex pairs only. It does not certify a page, determine whether text qualifies as large, or replace testing in every component state and background.