For more information about how to fix very low contrast accessibility errors, examples, and related resources, visit our resolving contrast issues article.
Activity steps
- Make sure you’re using Chrome, Firefox, or Edge.
- Download the WAVE extension.
- Use the WAVE extension to run WebAIM’s WAVE tool on this page.
- Select the Details tab to see the low contrast error. It’s the heading below.
- Select the Contrast tab in the WAVE tool.
- Select the color block below the hex color code fields.
- Select the color picker icons for the foreground and background color. Then select the colors in question on the page.
- 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
- Step one.
- Step two.
- Step three.
You’ve completed three steps!