ColorBlend
Create

Accessibility tool

Color contrast checker

Compare text and background colors, verify WCAG AA and AAA requirements, and find a readable alternative when the contrast is too low.

Live preview

Design should be clear to everyone.

Use this preview to check how body text, headings, and interface labels look with your selected colors.

Contrast ratio

14.26:1Excellent contrast

WCAG results

  • AA normal textPass
  • AA large textPass
  • AAA normal textPass
  • AAA large textPass
#24213B on #F7F4FF

How color contrast is measured

The contrast ratio compares the relative luminance of two colors. A ratio of 1:1 means the colors have the same luminance, while 21:1 is the maximum contrast between black and white.

WCAG contrast requirements

Normal text needs at least 4.5:1 for WCAG AA and 7:1 for AAA. Large text needs at least 3:1 for AA and 4.5:1 for AAA. Text inside buttons, form controls, navigation, and error messages should be tested just like body copy.

Color is not the only signal

Contrast helps readability, but accessible interfaces should not communicate meaning through color alone. Add text, icons, patterns, or clear labels for errors, status changes, and selected states.

Color contrast questions

What is a good color contrast ratio?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text in WCAG?

Large text is at least 18 point regular or 14 point bold. In common web CSS terms, that is approximately 24px regular or 18.66px bold.

Should every color combination pass AAA?

AAA provides enhanced contrast, but AA is the common accessibility target. Essential text and controls should meet the applicable requirement for their size.