WCAG color contrast guide

Understand AA and AAA contrast requirements, how to test text and UI components, and how to fix failing pairs.

FAQ

What ratio do I need for buttons?: UI components and graphical objects generally need at least 3:1 against adjacent colors. Text inside buttons still needs 4.5:1 (AA) or 3:1 for large text.

WCAG contrast basics

WCAG 2.x defines minimum contrast ratios between text and background colors. Level AA is the common legal and product target; AAA is stricter and recommended for body text when possible.

Contrast is based on relative luminance, not hue. Two colors can look different but fail contrast if their lightness is too similar.

Testing workflow

Pick foreground and background colors from your design system. Run them through a contrast checker. Note normal vs large text thresholds.

Test hover, focus, and disabled states — not just default buttons and links.