Color Contrast Checker
Foreground Color
Background Color
Contrast Ratio 21.00:1
Normal Text (AA) PASS
Large Text (AA) PASS
Normal Text (AAA) PASS
UI Components PASS

Large Text Preview — 24px Bold

This is a normal text preview block to demonstrate readability. Make sure UI elements and paragraphs contrast effectively against their backdrop securely avoiding accessibility barriers across visually impaired visitors.

Output will appear here

Foreground Color
Background Color
Contrast Ratio 21.00:1
Normal Text (AA) PASS
Large Text (AA) PASS
Normal Text (AAA) PASS
UI Components PASS

Large Text Preview — 24px Bold

This is a normal text preview block to demonstrate readability. Make sure UI elements and paragraphs contrast effectively against their backdrop securely avoiding accessibility barriers across visually impaired visitors.

Output will appear here

Empty

Color Contrast Checker

Calculates the relative luminance contrast ratio between a foreground color and background color, confirming WCAG AA and AAA ratings for normal text, large text, and UI components.

Use Cases

  • Validating brand colors against accessibility guidelines
  • Finding safe text colors for a specific background

Frequently Asked Questions

What is a good contrast ratio?

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) to pass Level AA.