Color Contrast Checker

Foreground Color

Please enter a valid hex triplet, or use the color picker.

Background Color

Please enter a valid hex triplet, or use the color picker.

Contrast Ratio

Normal Text

WCAG AA:

WCAG AAA:

The five boxing wizards jump quickly.

Large Text

WCAG AA:

WCAG AAA:

The five boxing wizards jump quickly.

Explanation

Enter a foreground and background color in RGB hexadecimal format (e.g., #FD3 or #F7DA39) or choose a color using the color picker. The Lightness slider can be used to adjust the selected color.

WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Hint: Colorzilla is an excellent tool for extracting the color value from any page element. Additionally, WAVE can analyze contrast ratios for all page elements at once.

New!

This tool also functions as a basic API. Simply append &api to any to get a JSON object with the contrast ratio and the AA/AAA pass/fail states. For example: https://webaim.org/resources/contrastchecker/?fcolor=FF0000&bcolor=FFFFFF&api.