Color Contrast Checker

: # lighten | darken

: # lighten | darken

Contrast Ratio:

Normal Text

WCAG AA: Pass
WCAG AAA: Pass
Sample: I am normal text

Large Text

WCAG AA: Pass
WCAG AAA: Pass
Sample: I am big text

Explanation

Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #fd3 or #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity.

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

Javascript must be enabled and supported.

Hint: If you use Firefox, 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.