Color Contrast Checker

Foreground Color

Enter or pick a background color in hex format (you may include an alpha value).

#
Background Color

Enter or pick a background color in hex format (you may include an alpha value).

#
Contrast Ratio
--:1

Results

Normal Text

WCAG AA: Pass

WCAG AAA: Fail

The five boxing wizards jump quickly.

Large Text

WCAG AA: Pass

WCAG AAA: Pass

The five boxing wizards jump quickly.

Instructions

Choose a foreground and background color using RGB hexadecimal values or the Color Picker. Adjust transparency with the Alpha setting and tweak brightness with the Lightness slider.

For readability, colors must meet contrast requirements:

  • Normal text: At least 4.5:1 (AA) or 7:1 (AAA) contrast.
  • Large text (bold 18.66px+ or 24px+): At least 3:1 (AA) or 4.5:1 (AAA).
  • Graphics/UI elements: At least 3:1 contrast (WCAG 2.1).
  • These guidelines help ensure text and elements remain clear and accessible.