Color Contrast Checker

Test the contrast ratio between foreground and background colors to ensure accessibility.

1.00:1
Contrast
Fail
Very poor

Normal Text

AA (4.5:1)
AAA (7:1)

Large text

AA (3:1)
AAA (4.5:1)
Black
#000000
Black
#b3b3b3

Quick Fixes

Aa

Preview Title

The quick brown fox jumps over the lazy dog

Small text example (12px)

Text
#000000
Background
#b3b3b3

WCAG Standards

Level AA

Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Required for most websites.

Level AAA

Enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text. Recommended for optimal accessibility.

Insufficient contrast for all text sizes - fails WCAG standards.

Color Contrast Checker

Calculate the contrast ratio of text and background colors.

Choose a color using the color picker for text and background color or enter a color in RGB hexadecimal format (e.g., #259 or #2596BE). You can adjust the slider to select color. The Web Content Accessibility Guidelines (WCAG) has a specific guideline to help figure out whether text is readable for sighted users. This criteria uses a particular algorithm to map color combinations into comparable ratios. Using this formula, WCAG states that a 4.5:1 color contrast ratio with text and its background is adequate for regular (body) text, and large text (18+ pt regular, or 14+ pt bold) should have at least a 3:1 color contrast ratio.

Key Features

  • Real-time contrast ratio calculation
  • WCAG AA & AAA compliance checking
  • HSL sliders for fine-tuning
  • Multiple preview formats

Advanced Tools

  • Automatic color fixing
  • Text and background samples
  • Color name detection
  • Export results