Color Contrast Checker

1. Open a web browser and go to the WebAIM Contrast Checker at the following address:

https://webaim.org/resources/contrastchecker

2. There are several options to check the contrast of the foreground and background colors:

  1. enter the hex color codes in the textboxes, or
Textboxes to enter the hex color codes

b. select a color from the color palette, or

Color palette to select the colors

c. in the Chrome browser, select the color palette and use the eyedropper tool to select the colors

Eyedropper tool to select the colors

3. Check the contrast ratio and review the WCAG AA pass/fail grade for normal text, large text, and graphical objects and user interface components (when applicable). Change the color(s) if they fail the WCAG AA standards.

Constrast ratio and WCAG AA pass/fail grade