Color Contrast Checker

How contrast checking works

The text-contrast rules (1.4.3 and 1.4.6) have been unchanged since WCAG 2.0 (2008). Non-text contrast (1.4.11) was added in WCAG 2.1 (2018) and carried into 2.2 unchanged.

Success Criteria

Large text = 18pt / 24px regular, or 14pt / 18.66px bold. Logos, disabled components, and decorative or incidental text are exempt. There is no AAA equivalent of 1.4.11 — the 3:1 rule still applies at the enhanced level.

The full picture

The Web Content Accessibility Guidelines (WCAG) define how much text must stand out from its background to remain readable for people with low vision, color blindness, or poor viewing conditions. The measure is a contrast ratio, calculated from the relative luminance of the two colors using the WCAG-defined sRGB formula, on a scale from 1:1 (identical) to 21:1 (pure black on pure white). This tool computes that ratio from the foreground and background colors you enter and compares it against the WCAG thresholds.

Contrast is about luminance, not hue. Two colors can look very different to the eye — red on green, for example — and still fail because they reflect similar amounts of light. The ratio captures what actually matters for readability.

Required contrast ratios

Level AA is the compliance level commonly referenced by accessibility laws and procurement standards. It sets two distinct rules:

• Text (Success Criterion 1.4.3): at least 4.5:1 for normal text and 3:1 for large text.
• Non-text (SC 1.4.11): at least 3:1 for visual information required to identify UI components and their states — form field borders, focus indicators, the parts of icons that convey meaning — and for parts of graphics required to understand the content.

Level AAA raises only the text thresholds (SC 1.4.6): 7:1 for normal text and 4.5:1 for large text. There is no enhanced level for non-text contrast — the 3:1 rule from AA still applies.

What counts as "large text"

Text is considered large when it is at least 18pt (roughly 24px) at regular weight, or 14pt (roughly 18.66px) when bold. Anything smaller is treated as normal text regardless of font or styling.

What is exempt

Not everything on a page needs to meet these ratios. WCAG excludes logos and brand names, purely decorative text, and incidental text — text that is not intended to be read as content, such as background signage inside a photograph.

Truly inactive (disabled) components are also exempt, but keep two things in mind: if something looks disabled yet is actually interactive it must still meet contrast, and maintaining adequate contrast on genuinely disabled controls is still recommended for usability.

A note on WCAG 3

WCAG 3 is in draft and explores a perceptual contrast method derived from APCA (Accessible Perceptual Contrast Algorithm), which is designed to model human perception more accurately than the current ratio. Until WCAG 3 is finalized and adopted, the thresholds from WCAG 2.0/2.1/2.2 remain the standard audits are measured against — and what this tool checks for.