Contrast Checker
This tool requires Javascript.
Foreground Color
Please enter a valid hex triplet, or use the color picker.
Hex
color picker
Lightness
Background Color
Please enter a valid hex triplet, or use the color picker.
Hex
color picker
Lightness
Contrast Ratio
permalink
Normal Text
WCAG AA:
WCAG AAA:
The five boxing wizards jump quickly.
Large Text
WCAG AA:
WCAG AAA:
The five boxing wizards jump quickly.
Graphical Objects and User Interface Components
WCAG AA:
image/svg+xml
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.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG 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 [...]