Search code examples
androidandroid-jetpack-composeaccessibilityandroid-jetpack-compose-material3material3

Material M3 button disabled state color doesn't satisfy accessiblity requirements of color contrasts


We have several launch report issues in playstore with the following error message:

Recommendation
Consider increasing this item's text foreground to background contrast ratio.

The item's text contrast ratio is 2.27. This ratio is based on an estimated foreground color of <foreground-color-hex> and an estimated background color of <bg-color-hex>. Consider using colors that result in a contrast ratio greater than 4.50 for small text, or 3.00 for large text. This item may be obscured by other on-screen content. Consider manually testing this item's contrast.

The details of the error is available here

All the instances of this issue happens when default M3 button is in disabled state. We are not explicitly setting a color ourselves. We are just using the Material M3 themes in jetpack compose.

Wondering if any material M3 experts have any resolutions to this issue. We don't want to mess around with colors ourselves in every place and at the same time we want our app to be inclusive. If anyone has figured out a reasonable global workaround for this, would be good to hear it.

PS: I understand this issue can be ignored from our side and the app would still get published but we prefer to fix the issue.

– I tried to manual change the color in a couple of places and I later realized that it is hard to get it right in all different settings.
– I am expecting a guideline from an material M3 expert.


Solution

  • I'm not sure how to change the color, which is the original question, but the reason to change the color sounds flawed.

    While typical contrast compares the text color to the background color and should be at least 4.5:1 according to WCAG 1.4.3, there are exceptions to the contrast requirement, one of them being for "inactive user interface components".

    WCAG 1.4.3

    The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

    Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

    Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

    Logotypes: Text that is part of a logo or brand name has no contrast requirement.