Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(datepicker): Header row cells have low color contrast ratio #23511

Closed
zarend opened this issue Sep 1, 2021 · 1 comment · Fixed by #23517
Closed

bug(datepicker): Header row cells have low color contrast ratio #23511

zarend opened this issue Sep 1, 2021 · 1 comment · Fixed by #23517
Assignees
@crisbeto
Labels
Accessibility This issue is related to accessibility (a11y) area: material/datepicker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
Accessibility 2021

Comments

@zarend
Copy link
Contributor

zarend commented Sep 1, 2021

Reproduction

Steps to reproduce:

  1. Open the Datepicker Examples
  2. Go to the “Basic date range picker” demo
  3. Open the calendar dialog
  4. Observe the contrast on the day of the week labels (S M T W T F S).

Expected Behavior

It should have a contrast ratio of at least 4.5:1.

Actual Behavior

It has a contrast ratio of 2.67.

Environment

OS| Browser |
ChromeOS | Google Chrome 91.0.4472.167 |
macOS Catalina | Google Chrome 91.0.4472.164 |
Windows 10 | Google Chrome 91.0.4472.106 |

Additional Notes

This is copied from an internal bug report found during a11y testing.
@zarend zarend added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) area: material/datepicker labels Sep 1, 2021
@zarend zarend added this to Not started in Accessibility 2021 via automation Sep 1, 2021
@crisbeto crisbeto self-assigned this Sep 2, 2021
@crisbeto crisbeto added the has pr label Sep 2, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Sep 2, 2021
@crisbeto
fix(material/datepicker): improve color contrast in calendar header
e7b9439 
Fixes that the color contrast of the calendar header's text was too low.

Fixes angular#23511.
@crisbeto crisbeto mentioned this issue Sep 2, 2021
Merged
Accessibility 2021 automation moved this from Not started to Done Sep 13, 2021
andrewseguin pushed a commit that referenced this issue Sep 13, 2021
@crisbeto
fix(material/datepicker): improve color contrast in calendar header (#…
1762da8 
…23517)

Fixes that the color contrast of the calendar header's text was too low.

Fixes #23511.
andrewseguin pushed a commit that referenced this issue Sep 13, 2021
@crisbeto @andrewseguin
fix(material/datepicker): improve color contrast in calendar header (#…
b487323 
…23517)

Fixes that the color contrast of the calendar header's text was too low.

Fixes #23511.

(cherry picked from commit 1762da8)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 14, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
Accessibility This issue is related to accessibility (a11y) area: material/datepicker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
Accessibility 2021
Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/datepicker): improve color contrast in calendar header crisbeto/material2
2 participants
@crisbeto @zarend