Color Contrast Checker

—

Normal text: the quick brown fox jumps over the lazy dog.

Large text sample

—AA normal text4.5:1
—AA large text3:1
—UI components3:1
—AAA normal text7:1
—AAA large text4.5:1

Try a common pair

Tip: the URL updates as you type, so you can share a result, e.g. /contrast-checker?fg=767676&bg=ffffff.

WCAG contrast requirements at a glance

WhatAA (minimum)AAA (enhanced)
Normal text4.5:17:1
Large text (24px, or 18.66px bold)3:14.5:1
UI components & meaningful graphics (SC 1.4.11)3:1—
Logos, disabled controls, pure decorationNo requirement

On a pure white background, that means body text needs to be #767676 or darker, and input borders and icons need #949494 or darker. Off-white backgrounds lower every ratio slightly. Our accessibility guide has the exact limits for common near-whites, plus a table of white text on popular brand colors.

Contrast checker FAQ

WCAG 2.2 Level AA requires 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and for UI components like input borders and icons. Level AAA requires 7:1 for normal text and 4.5:1 for large text.

#767676 is the lightest neutral grey that passes AA for normal text on #FFFFFF (4.54:1). #949494 is the lightest for large text and UI borders (3.03:1). See the full table per background.

Each color is converted to relative luminance (L) using the sRGB formula from WCAG. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It ranges from 1:1 (identical colors) to 21:1 (black on white).

WCAG thresholds are exact: 4.499:1 does not meet 4.5:1. This checker truncates the displayed value, so what you see never rounds up to a pass that isn't real.

Not yet. APCA is proposed for WCAG 3, which is still a draft. Legal and procurement requirements today (ADA, Section 508, EN 301 549, the European Accessibility Act) reference WCAG 2.x ratios, which is what this tool measures.