Accessibility contrast issue with ripples

[eGene]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Ripples styles in MUI v5 can not be overridden with createTheme's overrides section and are calculated internally based on current color palette. In many cases this leads to low contrast between the ripple and background or between the normal and focused state of the element. Example:

Relevant WCAG secrtion: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html

In the example above the contrast ratio is below 2. It fails requirements for text variant for both normal vs focused vs background color, and for non-text variants (since they have a border) it fails contrast requirement for normal vs focused.

Expected behavior 🤔

I assume fixing it with automatically picked colors may be impossible, so user should at least be able to override the default styles for the ripples with theme overrides.

Steps to reproduce 🕹

Steps:

1. this is reproducible with many components. For example, go here https://mui.com/components/buttons/
2. and focus on a button to see the ripple
3. check the contrast ratio

Context 🔦

Trying to make the app a11y compliant. Would also like to hear MUI's team thoughts on this issue with contrast and what they think would be the best approach to solve it.

Your environment 🌎

No response

[danilo-leal]

Hey @eGene, thanks for opening this issue up! I know it was me who asked you to open it but I only now realized we already had one (#28543) opened for this issue, so this is a dupe 😅

Would also like to hear MUI's team thoughts on this issue with contrast and what they think would be the best approach to solve it

If you're talking about focus contrast issues specifically, I might've just realized we might be lacking proper documentation on this. So I think we could use the opportunity to improve on that front as well.

I'll close it for now but we can continue discussing there! Please share your thoughts there too if you could.