Readonly Password Field: Insufficient color contrast of password reveal button

[AndreasSamjeske]

What is the problem?

Standard password field

The password reveal button is inside the input field. Input field has a background color of #E8EBEF. The buttons color #6E798A has a ratio of 3.7. According to WCAG 2.1, 1.4.11 Contrast Non-Text ratio shall be at least 3:1. Button has sufficient contrast in this scenario. See https://vaadin.com/docs/latest/components/password-field

Readonly password field

In a readonly password field, the background is white #FFFFFF. Password reveal button has color #DADFE4. That's a ratio of 1.3, which is insufficient for an interactable element according to WCAG 2.1, 1.4.11 Contrast Non-Text. See https://vaadin.com/docs/latest/components/password-field#read-only-disabled

Sidenote 1: Disabled password field

In disabled password field, the reveal button has the same ration of 1.3. But that's ok, since you can't interact with the field or the button in disabled state.

Sidenote 2: Other readonly fields with buttons

Some other readonly fields have buttons inside the field, too. Like Readonly Time Picker. But the difference to password field is, in readonly mode those buttons can't be interact with.

Browsers

• [ ] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Safari on iOS
• [ ] Edge

Screen Readers

• [ ] None
• [ ] NVDA
• [ ] JAWS
• [ ] VoiceOver on MacOS
• [ ] VoiceOver on iOS

[web-padawan]

Thanks for the issue. The relevant code is located here:

https://github.com/vaadin/web-components/blob/af47011a1e577744e022c8b085b17bc71fca40cd/packages/vaadin-lumo-styles/mixins/field-button.js#L29-L31

This means that some other components are also affected, e.g. vaadin-number-field with stepButtonsVisible and the toggle button for vaadin-select, vaadin-combo-box, vaadin-date-picker and vaadin-time-picker.

[jouni]

This means that some other components are also affected

But none of those buttons are interactive in readonly mode, right?

[web-padawan]

Yes, the only other component which is interactive in readonly mode is vaadin-multi-select-combo-box where we have this:

https://github.com/vaadin/web-components/blob/af47011a1e577744e022c8b085b17bc71fca40cd/packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box-styles.js#L110-L113