fix: improve color contrast in menu element example for accessibility #2840
Conversation
|
It looks like this is your first pull request. 🎉 Thank you for your contribution! One of the project maintainers will triage and assign the pull request for review. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct. |
| @@ -1,5 +1,5 @@ | |||
| .news { | |||
| background-color: bisque; | |||
| background-color: black; | |||
There was a problem hiding this comment.
this makes it more accessible in dark mode, but makes the link above impossible to read in light mode.
There was a problem hiding this comment.
Okay, fixing it for both light and dark modes and checking in all the major browsers
There was a problem hiding this comment.
Making the following changes fixes the color contrast issue as checked in all major browsers:
(But I couldn't find a way without using a @media query for color schemes, and I didn't wanted to re-color the states of anchor tag, which by default comes with accessibility out of the box.)
.news {
background-color: bisque;
padding: 1em;
border: solid thin black;
@media (prefers-color-scheme: dark) {
background-color: black;
}
}
menu {
list-style-type: none;
display: flex;
padding: 0;
margin-bottom: 0;
gap: 1em;
}
button {
color: black;
background: white;
}
@estelle Should I go for it?
bsmth
changed the title
Button color set to contrast colors from the user agent injected button text color that affected accessibility in safari, and fixed color contrast for dark theme
|
The latest commit fixes the color contrast issues that occurred in Safari due to its user agent style sheet setting the color Added image below: |
Description
I changed the background color of the
menuelement example from bisque to black to fix the inaccessible color contrast issue, improving readability and meeting WCAG 2.1 contrast ratio standards.Motivation
The previous background color did not meet the minimum contrast ratio requirement, making the text difficult to read for users with visual impairments (and even hard for normal users). This change improves accessibility across browsers.
Additional details
Related issues and pull requests
Fixes #2839