search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.38k stars 6.75k forks source link

bug(Mat-input): placeholder (label) text contrast too low when error for a11y #25099

Open frangarcj opened 2 years ago

frangarcj commented 2 years ago

Is this a regression?

The previous version in which this bug was not present was

No response

Description

Placeholder text for (the label) is set at #f44336 on an invalid state. This results in text with a contrast ratio of 3.7:1 when the background color is white.

Reproduction

https://stackblitz.com/edit/angular-2anknf?file=src/app/./input-error-state-matcher-example.html

Steps to reproduce:

  1. Focus on email
  2. Get out of email

Expected Behavior

The placeholder text for error doesn't have the minimum contrast ratio set forth by WCAG to achieve a Level AA accessibility rating of 4.5:1. Therefore the colour must be changed in order to get a proper result.

Actual Behavior

This results in text with a contrast ratio of 3.7:1 when the background color is white.

Environment

jelbourn commented 2 years ago

@zarend does this issue exist in the MDC-based version?