◐

Developer guide

WCAG AA vs AAA: Which Contrast Level to Use

Compare WCAG AA and AAA contrast requirements before choosing a practical target for a product.

Short answer

WCAG AA is the practical baseline for most product interfaces. AAA is a stricter target that can improve readability, but it is not realistic for every component or brand color.

When this applies

For normal text, AA requires 4.5:1 and AAA requires 7:1. For large text, AA requires 3:1 and AAA requires 4.5:1.

Practical review steps

  1. Set the product's minimum target before choosing colors.
  2. Use the normal-text threshold unless the text clearly qualifies as large text.
  3. Check component states separately instead of approving one default color pair.

Check the actual color pair

Use the free Contrast Check with the foreground and background colors from the real component. It provides an immediate AA and AAA ratio check in the current browser tab.

Source and limit

For the formal requirement, review W3C's WCAG contrast minimum guidance. A ratio result checks a color pair; it is not a complete accessibility audit.