Posted on

Fix a contrast issue activity

For more information about how to fix contrast issues, examples, and related resources, visit our resolving contrast issues article.

Activity steps

  1. Make sure you’re using Chrome, Firefox, or Edge.
  2. Download the WAVE extension.
  3. Use the WAVE extension to run WebAIM’s WAVE tool on this page.
  4. Select the Details tab to see the low contrast error. It’s the heading below.
  5. Select the Contrast tab in the WAVE tool.
  6. Select the color block below the hex color code fields.
  7. Select the color picker icons for the foreground and background color. Then select the colors in question on the page.
  8. Drag the Lightness scale for foreground or background to see what would pass. There could be different solutions. You’re looking for a WCAG AA Pass for Large text.

Once you’ve found a color solution you like, you would update the website’s template if all headings are this color or update the page to remove styling for that one specific heading.

Expert tip: If you're testing the contrast for links or graphical components use a color picker like Colorzilla and WebAIM's color contrast checker or link color contrast web pages.

Here is the example content to use the steps above with:

Low contrast heading

  1. Step one.
  2. Step two.
  3. Step three.

You’ve completed three steps!