Color Contrast Analyzer

WCAG contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of foreground and background (L1 ≥ L2). Luminance is a weighted sum of gamma-corrected RGB components — 0.2126·R + 0.7152·G + 0.0722·B — reflecting the eye's greater sensitivity to green. The +0.05 prevents division-by-zero at pure black.

The ratio ranges from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white). All thresholds in WCAG are ratios on this scale. APCA — coming in WCAG 3 — uses a different, perceptually-uniform model that handles dark-mode contrast more accurately, but it is not yet normative.

• AA — normal text (under 18pt or under 14pt bold): 4.5:1.
• AA — large text (18pt+ or 14pt+ bold): 3:1.
• AA — UI components, graphical objects, focus indicators: 3:1.
• AAA — normal text: 7:1.
• AAA — large text: 4.5:1.
• Non-text content (logos, decorative): no requirement.

WCAG 2.2 (current) is the relevant baseline. Most public-sector procurement requires AA. AAA is recommended for healthcare, government services for vulnerable populations, and accessibility-first products.

• Color blindness — about 8% of men have red-green color blindness. Two colors with the same luminance look identical to them regardless of hue. Pass contrast and also use shape, position, or text labels.
• Low-vision / reduced contrast preferences — some users invert colors or boost contrast via OS settings. Your high-contrast UI may look extreme to them; respect prefers-contrast media query.
• Glossy screens in daylight — even AA-passing combinations fade in direct sun. Mobile-first UIs are routinely viewed outdoors; bump to AAA where possible.
• Anti-aliasing of small text — sub-pixel rendering reduces effective contrast at small sizes. Below 14px, prefer 5:1+ even if you technically pass AA at 4.5.

• You are reviewing a design system before launch and want to confirm every text-on-background combination passes AA.
• You are auditing an existing site for an accessibility complaint or before a procurement bid that requires WCAG conformance.
• You inherited a brand palette where the design lead picked harmonious but low-contrast colors, and you need numeric evidence to negotiate revisions.
• You are picking a placeholder color or disabled-state color and want to know the lowest contrast that still passes UI-component requirements (3:1).

• It will not measure contrast in images. WCAG applies to text and UI; for images of text (a screenshot of code, marketing visuals), evaluate the rendered text against the visible background and remember that compression artifacts can reduce effective contrast.
• It will not assess contrast in motion (animations, video). Frames change too quickly for static analysis; for animations of important text, hold the frame for at least 5 seconds at AA contrast.
• It will not check non-color accessibility issues — keyboard navigation, focus order, ARIA roles, alt text. Contrast is one component of WCAG conformance, not all of it.