angular / angular/components

bug(mat-button-toggle-group): Accessibility issue of WCAG non-text contrast and WCAG use of color

Offen
#27,748 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/button-toggle P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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

_No response_

### Description

This component fails color contrast in its selected state, and also fails the requirement that color should not be the only visual indicator to convey that an item is in a selected state.

This issue is applicable specifically to mat-button-toggle-group where multiple options are exposed. Single toggle button instances are meeting accessibility requirements because they have a change in text or icon in addition to color.

See WCAG context below:

WCAG [Non-text contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast): “This success criterion does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast.”
This success criterion is met, but is only applicable to the default (un-selected) state.

WCAG [Non-text contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast): Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.
This is not being met.

WCAG [Use of color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color): If content is conveyed through the use of colors that differ not only in their hue, but that also have a significant difference in lightness, then this counts as an additional visual distinction, as long as the difference in relative luminance between the colors leads to a contrast ratio of 3:1 or greater.
This implies that a design solution that meets 3:1 contrast is sufficient in meeting the “Use of Color” success criterion.

### Reproduction

This issue can be reproduced in the component demo and does not require StackBlitz: https://material.angular.io/components/button-toggle/overview

### Expected Behavior

The contrast ratio of the selected state must meet at least 3:1 to fulfill WCAG success criterion for non-text contrast and use of color.

### Actual Behavior

Currently the selected state of mat-button-toggle-group uses a fill color of #E0E0E0. On an #FFFFFF background, the contrast ratio is only 1.32:1.

### Environment

Angular/Material 16.2.1

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der Demo der mat-button-toggle-group-Komponente unter https://material.angular.io/components/button-toggle/overview und überprüfe den ausgewählten Zustand im Hinblick auf die gemeldeten Farben #E0E0E0 auf #FFFFFF. Der payload nennt keine Quelldatei oder keinen Test; als erledigt gilt, wenn der ausgewählte Zustand ein Kontrastverhältnis von mindestens 3:1 bietet und nicht mehr allein auf Farbe setzt, um die Auswahl zu vermitteln.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.