bug(dialog): MDC dialog text color fails to pass WCAG AAA contrast tests

[PowerKiKi]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

The MDC dialog content has a poor contrast that fails to pass WCAG AAA tests, as seen in screenshot.

In both cases the background is white, #ffffff. Before, in v14, the text was #212121 with a contrast of 16.1:1, according to https://webaim.org/resources/contrastchecker/. After, in v15 with MDC, the new text color is #666666, which clearly has a lower contrast of only 5.74:1.

Screenshot straight from https://v14.material.angular.io/components/dialog/overview and https://rc.material.angular.io/components/dialog/overview:

Reproduction

See screenshots

Expected Behavior

For such as simple and common use-case, I expect it to pass even the strictest contrast tests, such as WCAG AAA.

Or at the very least, we should have clear instructions on how to properly configure this, in order to pass WCAG AAA.

Actual Behavior

It fails WCAG AAA, and thus is less readable in sub-optimal conditions.

Environment

• Angular: 15
• CDK/Material: 15
• Browser(s): Chrome 111
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 22.04

[zarend]

Hello,

Thank you for the detailed write-up.

I understand that the color contrast was higher in v14 than v15. Although, the v15 dialog does meet WCAG AA requirements. I believe that the supporting text of the dialog is on-spec with material design, so this is behaving as intended. We generally strive to make components as accessible as possible by default, but we also strive to align with material design spec. Since the color contrast still exceeds WCAG AA, I would consider this to be working as intended.

Developers can change the color of the supporting text by using theming Theming Angular Material
. Please let us know if using theming meets your needs.

Best,

Zach

[PowerKiKi]

Brittle workaround

We did found a workaround with the code below. However I don't think overriding CSS value is the proper way to solve this issue.

@mixin my-mixin($theme) {

    // Since MDC, dialog text color is too pale, so we restore a higher contrast for better readability
    .mat-mdc-dialog-container .mdc-dialog__content {
        color: mat.get-color-from-palette(map.get($theme, foreground), base, 0.87);
    }
}

In general the theming API is very hard to work with. The documentation lives only in source code, and it is often quite terse, specifically it lacks usage examples. This is especially disappointing when compared to the awesome doc of TypeScript that is available on the angular web site, searchable, and detailed with usage examples.

The lib breaks the spec

The spec, says that the background color of the container should be md.sys.color.surface-container-high and the color of supporting text should be md.sys.color.on-surface-variant:

But the library definitely does not use md.sys.color.surface-container-high , because the background is not purple-ish but white. Instead it seems to be using md.sys.color.surface-container-lowest. So the library is already breaking the specs. (and thanks for that, I am not a fan of colored background dialogs)

So if the background color is surface, then according to the theme builder, then the fore color should be #1C1B1F, and that would indeed pass WCAG AAA:

Conclusion

@zarend, this issue should be reopened (but I cannot), until either:

• it's closed as won't fix
• a proper way to customize the dialog background and text color with Angular theming API is shared
• the dialog text contrast pass WCAG AAA (as the spec does)

[yogeshgadge]

I am stealing your brittle workaround.
Not sure what the MDC/MAT decided to pale dialog's content.

[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.}