WebAIM: Contrast Checker

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 [...]

Read article at webaim.org

Article Taxonomies

Categories: