0

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

I.e. say that you’re using the tool Color-pair Contrast Testing 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 this 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?

Improve this question
4
  • The parts that are necessary to understand the point of the page. So charts, text, etc.
    – Zach Saucier
    Commented Apr 20, 2020 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
    Commented Apr 20, 2020 at 22:06
  • 1
    These are guidelines. Do what you think is best :)
    – Zach Saucier
    Commented Apr 20, 2020 at 22:15
  • @ZachSaucier looking back, this was really such a non-answer. If you've created a prototype from your mockup, the axe DevTools - Web Accessibility extension will scan your page for free, telling you what elements are not compliant.
    – HappyHands31
    Commented Mar 17, 2021 at 18:24

1 Answer 1

Reset to default
0

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.

EDIT - And if you've created a prototype for your application, check out the axe DevTools - Web Accessibility Testing extension in chrome. This tool will scan your page for accessibility issues and will tell you what elements are not compliant.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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