Linear MatStepper step headers do not pass aXe accessibility checks

[mitchellwills]

Bug, feature request, or proposal:

When in linear mode the mat stepper headers fail aXe accessibility checks because they do not have enough contrast.

What is the expected behavior?

Checks do not fail

What is the current behavior?

The number (in the circle next to the label text) fails with:
Element has insufficient color contrast of 2.67 (foreground color: #ffffff, background color: #9e9e9e, font size: 10.5pt, font weight: normal)

The actual label fails with:
Element has insufficient color contrast of 2.67 (foreground color: #9e9e9e, background color: #ffffff, font size: 10.5pt, font weight: normal)

What are the steps to reproduce?

https://stackblitz.com/edit/angular-vy7pqw?file=app/stepper-overview-example.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

HEAD

[raygervais]

I'd like to take a look into resolving this, and will start by referencing the material guidelines for accessibly related semantics. Are you testing for WCAG AA, or AAA?

[mitchellwills]

I'm not sure, I believe we are using whatever the default is for aXe.

[raygervais]

Sorry for the delay, just wrapping up some loose ends with the semester concluding. So I did some testing while running the aXe accessibly engine (which does test for WCAG AA), and found that the color contrast ratios are closer to 2.44:1 instead of 4.5:1.

One way I found fixing this would be to increase the contrast (which would in turn, dark the container element.

Just an example to open up discussion:

Before:

Font Color: FFF
Background Color: rgba(0,0,0,.38)

---

After:

Font Color: FFF
Background Color: rgba(0, 0, 0, .54)

---

This leads into the same treatment needed to be applied to the mat-stepper labels, which also would need to adjust the font color to the same background color mentioned above to meet WCAG AA Compliance.

The final 'fix' would look as the following:

I'm all for the fix, but looking into the Material Spec regarding accessibly, they never claim to be WCAG AA compliant. Even the website itself when analyzed by aXe fails for a multitude of color contrast related reasons. https://material.io/guidelines/usability/accessibility.html#accessibility-color-contrast

Thoughts?

[literalpie]

I believe this problem also applies to all uses of the "secondary text" color in the theme palette. We are seeing the contrast test fail with the label text of a de-selected (or read-only) input field.

The Material guidelines do recommend compliance with WCAG 2.0:

All text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5.1 color contrast between text and background for normal text, and 3:1 to large text.

source

[mmalerba]

@raygervais sorry for slow response, I've been OOO for a while. I think it's more important to be accessible than exactly on spec. The change in your screenshot looks good if you want to send a PR for it

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}