WCAG Contrast Guide
Understand contrast ratios, AA and AAA thresholds, and how to make text and interface colors easier to read.
What a contrast ratio measures
A contrast ratio compares the relative luminance of a foreground and background. It ranges from 1:1 for identical luminance to 21:1 for black against white. Hue alone does not determine the score.
Common WCAG thresholds
Under WCAG 2.x, normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Non-text interface components and meaningful graphics generally need 3:1 against adjacent colors.
Large text and real interfaces
Large text means at least 18 point regular or 14 point bold in the WCAG definition. A passing ratio is a foundation, not a guarantee: thin fonts, glare, low-quality displays, and text over images can still create problems.
Beyond the number
Test hover, focus, disabled, error, and selected states. Avoid communicating meaning through color alone, and preserve visible focus indicators. Use the contrast checker while designing, then test the finished interface at several zoom levels.
Try it yourself
Put these ideas into practice with our free browser-based color tools. Your colors stay on your device.