Closed thatblindgeye closed 1 year ago
@thatblindgeye Hi, I would be more than happy to take on this! Actually this lesson-note-variations feature was my PR and I would like to make it more a11y with the help of yours!
@luuu-xu assigned you! Thanks for putting in the original feature in the first place 💪🏼
@thatblindgeye Hi, I'd like an insight from your experiences!
So when I was picking a blue colour for lesson-note--tip
, I tried to meet AAA rating. For dark mode, when I chose rgb(147,197,253)
(text-blue-300) over the background of rgba(55, 65, 81, 0.4)
. Firefox is telling me the rating is only 1.17, while in contrast, coolors is telling me 5.72.
There is such a huge difference in ratings, is it because of the 0.4 alpha parameter? In this case, what should I proceed with the colour choices though? I have encountered a similar issue with another open-source project where we are choosing colours for our button, but having an alpha to the background colour just disturbs the ratings quite a lot.
I look forward to your insights and it would definitely help me a lot with my a11y skills!
And there is the considerations between "looking good" and "reaching AAA", I am not sure how I should proceed. For example, for day mode, when I am choosing rgb(30,64,175)
(text-blue-800) over the background of rgb(249, 250, 251)
gives us 8.35 AAA rating but personally I think rgb(37,99,235)
(text-blue-600) looks better, but it only has 4.95 AA rating.
Should AAA always be the priority as long as it does not look too ugly? I see the trade-offs and maybe this is something a11y team should agree on with design team? I am sorry for such a long post but I will appreciate any of your insights. 😊
I don't think we need to strive for AAA rating in general for TOP. It might depend on the rule, but generally we should be good with AA.
I'm not noticing the 0.4
alpha for the background color, though. For me the background color has al alpha value of 1 (in dark mode). Either way, when checking color contrasts I'd trust the browser rating more (or better, axe dev tools). I've also used WebAIM's contrast checker in the past, which is handy since it has a color picker tool to grab the background color from a page.
All that said, we shouldn't really need to worry too much about the color contrast since we shouldn't be styling any text with the color, just the left border of the note box and the icon. The icon should still be visible enough, of course.
I am going to submit the PR now, the only thing that I am not happy with is the fact that any orange rgb(194,65,12)
or yellow rgb(161,98,7)
for --warning
will look really close to --critical
's red rgb(220,38,38)
if we are meeting at least AA rating. I am going with orange now because it looks better than yellow for sure.
Complete the following REQUIRED checkboxes:
brief description of request
format, e.g.Add dark mode to website
The following checkbox is OPTIONAL:
1. Description of the Feature Request:
Currently the lesson-note classe(es) have styling for a default (gold), info/tip (green), and warning (red). We should really update and add onto these styles so that the colors match the intention better, as well add icons for heading levels beyond
h4
2. Acceptance Criteria:
lesson-note--tip
class uses blue as the color; green is synonymous with "success" or "complete"lesson-note--warning
class uses yellow or orange as the color; red is synonymous with "error" or "critical". This would also require updating the icon to a proper "warning" icon, such as the Font Awesome exclamation trianglelesson-note--critical
class that uses the currentlesson-note--warning
style. This styling should be used for things that are "critical" for users to read, a step above a simple "warning"[ ] We should render the icon even if there is no heading, as the color alone won't be enough for users to convey the meaning if they suffer from any form of color blindness
(Doing this may negate the need to change the default lesson note color from Odin gold, since the icon will help convey the meaning)
3. Additional Information: