-
Notifications
You must be signed in to change notification settings - Fork 502
Fix action box color contrast #7125
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.
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
base: master
Are you sure you want to change the base?
Conversation
6c6c514 to
cd591ef
Compare
|
The border being the same as the main color is simply how it was before, I didn't change that. It doesn't have to be as pronounced as far as WCAG goes. If by "look exactly the same" you mean they have exactly the same color, yes, that's the default text color in both cases. Technically you can make the title have secondary text color (dark grey) but then you get a wonky case where the title is lighter than the text but not colored, which I think is even weirder. Since the title is already bold, I think it has enough emphasis to not be mistaken as part of the text that follows. As for just making the background lighter, that won't really help that much. Most of the colors would be too light even on a white background. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This makes sense to me. When it comes to contrasting with other boxes, I personally don't think this will be a problem from a UX standpoint.
A middle ground would be to have the border of the box lighter than than what it currently is, to differentiate more with the other components, but it's not absolutely necessary imho.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@AjobK and I just noticed the colors added in the variables file. Some of the hex codes are the same as pre-existing variables from the palette, some of them are not, could you please tell us how they were generated / calculated?
|
@marinaej Since I cannot reply to your comments directly for some reason, I'll comment here. The blue in particular was aligned with the theme color. For other colors, I used the existing colors as the starting point and used the contrast calculation in the dev tools to calculate the optimal contrast. The scheme was then adjusted roughly to be consistent in terms of lightness and overall contrast. |
Before
After
WCAG criteria