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

2.91:1Insufficient contrast

WCAG results

  • AA normal textFail
  • AA large textFail
  • AAA normal textFail
  • AAA large textFail

Accessible alternatives

Keep the background and adjust the text

These nearby text colors reach at least a 4.5:1 contrast ratio against #CFE7F2.

#6F86A5 on #CFE7F2

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.