Skip to content
ConvertMyStuff
Tool

Contrast Checker

Check WCAG contrast ratios for text and backgrounds.

Design Tools

What this tool does

Compare foreground and background hex colors for WCAG AA and AAA readability ratios.

How to use

  1. Enter text (foreground) color.
  2. Enter background color.
  3. View contrast ratio and WCAG pass/fail.

Examples

Black on white

Input: text #000000, bg #FFFFFF

Output: 21:1 ratio, passes AAA

Maximum contrast for body text.

Common use cases

  • Validate accessible text colors
  • Check button label contrast
  • Audit design system palettes

FAQ

What ratio is required for AA?

WCAG 2.2 Success Criterion 1.4.3 requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).

What about AAA?

WCAG 2.2 AAA is 7:1 for normal text and 4.5:1 for large text.

Does it check UI components?

WCAG 2.2 SC 1.4.11 requires 3:1 for non-text UI against adjacent colors. Enter those color pairs here.

Source notes

  • W3C WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum).
  • W3C WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast.
  • Large text: 18pt+ regular or 14pt+ bold.

Browse all tools →

Last reviewed: 2026-05-23