1

I'm relatively new to accessibility compliance, but my research has found a confusing anomaly: The Angular Material buttons, links, etc are apparently WCAG compliant, yet do not seem to have the required focus state contrast to pass. So I'm a little perplexed.

I'm talking specifically about the change in color when (for example) a button receives focus. From what I can tell from the WCAG it should have at least a 3:1 contrast ratio, but Material design elements are nowhere close to that.

For reference, here are some links to the Angular Material design: https://material.angular.io/components/button/examples https://material.io/design/interaction/states.html#anatomy

Thanks in advance for the help.

Improve this question

1 Answer 1

Reset to default
2

Yes, some of the examples on the sample page (Basic Buttons and Stroked Buttons) would fail WCAG 2.1, success criteria 1.4.11 given the current sample page's light gray background color (#FAFAFA). Some of the Raised Buttons and Flat Buttons are ok. The Stroked Buttons would be ok if they had a darker outline.

However, it's up to you to make sure your background color has a sufficient enough contrast with the focus color of the buttons so it's hard to judge if the buttons are fully compliant just based on the sample page. They just happened to choose a poor background color.

Improve this answer
4
  • Thanks for the feedback. I agree with you regarding the background color. My main question is about whether the change from normal state to a focus state has enough contrast. It seems like Google adds overlays of differing opacities to the buttons, but they are only 12% - 24% opaque. It just doesn't meet the 3:1 contrast ratio. Thanks again for your response.
    – MattOnce
    Commented Jun 10, 2019 at 12:38
  • From the URL I posted, "This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other." So there isn't a requirement that the focus state be 3:1 compared to the normal state.
    – slugolicious
    Commented Jun 12, 2019 at 14:49
  • 1
    Thanks for the clarification! I see that, and this is where my confusion comes in - is this not "color dependency"? How can a visually impaired user tell that these buttons have focus if all that happens is the button's hue/lightness changes very slightly?
    – MattOnce
    Commented Jun 14, 2019 at 6:45
  • 1
    WCAG is a minimum guideline. Anything you can do beyond it typically makes the experience better.
    – slugolicious
    Commented Jun 16, 2019 at 1:08

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.