I am completely new to WCAG compliance and I have several questions.

I.e. say that you’re using this tool:


to check the contrast of background and foreground color. Your colors may fail for normal size text - but what if you’re using them for an icon or logo?

Does everything in your design need to pass WCAG contrast compliance?

Take this design, for example:

enter image description here

What about the thin grey lines under each of the module headings? The hex code for those is #EAEAEA, and of course that will fail all tests with #FFFFFF as the background. But I’m just using them for design purposes - to mark off where the header is in the module. It will seriously (and negatively) effect my design if I have to remove everything that doesn’t pass color-contrast compliance.

What about the icons - in the menu and in the "Print Reports" module, etc?

And I have more questions like this. Does anyone know of free resources that will answer some of these questions?

  • The parts that are necessary to understand the point of the page. So charts, text, etc. – Zach Saucier Apr 20 at 21:48
  • @ZachSaucier I see - so building off of that - say that the top of the green gradient in the chart does not have acceptable contrast with the white background, #7FC242 (green) to #FFFFFF (white). However, if I make the border of the green gradient in the chart darker, like #005E0C (dark green) would that be acceptable? Example: i.imgur.com/MAXaFgF.png Is it ultimately about the colors that border one another? – HappyHands31 Apr 20 at 22:06
  • 1
    These are guidelines. Do what you think is best :) – Zach Saucier Apr 20 at 22:15

More specific answer - if the graphic itself is being used to communicate information, then yes, it needs to be contrast-compliant. But if there is text next to / underneath the graphic, which provides information or explains the graphic, and the text is contrast compliant, then you're good - your graphic does not need to be contrast-compliant.

There is not a service out there right now that will scan a design for WCAG compliance. You will need to get as close as you can, by making sure that text and any graphics that communicates information (solely) are contrast compliant, and then work with developers to adjust any areas that do not pass a WCAG compliance site scan.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.