Skip to content

Event labels background color don't pass contrast checker for accessibility #274

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
Closed
adiati98 opened this issue Apr 20, 2025 · 3 comments · Fixed by #277
Closed

Event labels background color don't pass contrast checker for accessibility #274

adiati98 opened this issue Apr 20, 2025 · 3 comments · Fixed by #277

Comments

@adiati98
Copy link
Contributor

Description

In the "Schedule" page, all events have type labels. When running WAVE on this page, the labels' background color red, pink, and green show contrast errors. Below are the screenshots for these colors.

contrast error warnings

Red label for the "meetup" type

red label with contrast error

Pink label for the "podcast" type

pink label with contrast error

Green label for the "talk" type

green label with contrast error

Suggestions

Considering that the text color is white, we can adjust the colors to be darker, but not far from the existing color. That way, we can pass the color checker to follow accessibility rules as the below:

Red label for the "meetup" type

Change the color from #F42F36 to #C70A11.

red label passes contrast checker

Pink label for the "podcast" type

Change the color from #FA0087 to E6007A.

pink label passes contrast checker

Green label for the "talk" type

Change the color from #1FD19F to #138162.

green label passes contrast checker
@adiati98
Copy link
Contributor Author

I'd like to work on this if this is approved. 🙂

@karasowles
Copy link
Collaborator

Thank you for this accessibility improvement @adiati98! Contrast is so important for accessibility, I really appreciate you running a checker on it. Yes, please do feel welcome to make the changes.

@adiati98
Copy link
Contributor Author

Thanks, @karasowles!
I'll work on this. 👍

@adiati98 adiati98 mentioned this issue Apr 21, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Change event labels' background color adiati98/maintainermonth
2 participants
@adiati98 @karasowles