Update lesson note styles

[thatblindgeye]

Complete the following REQUIRED checkboxes:

• [x] I have thoroughly read and understand The Odin Project Contributing Guide
• [x] The title of this issue follows the brief description of request format, e.g. Add dark mode to website

The following checkbox is OPTIONAL:

• [ ] I would like to be assigned this issue to work on it

---

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:

• [ ] Update the styles so that:
  • there is a top and bottom margin for a lesson-note (we could use the same amount as the padding)
  • the lesson-note--tip class uses blue as the color; green is synonymous with "success" or "complete"
  • the 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 triangle
  • This may require updating the default lesson note color from Odin gold... it depends how close it is to the warning color
• [ ] Add a lesson-note--critical class that uses the current lesson-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

  • One thing we could do is render a larger icon if there is no heading, otherwise render an icon that inherits the heading font size (this should also cover rendering the icon for any heading level in the note box, not just h4's):

  (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:

[luuu-xu]

@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!

[thatblindgeye]

@luuu-xu assigned you! Thanks for putting in the original feature in the first place 💪🏼

[luuu-xu]

@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. 😊

[thatblindgeye]

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.

[luuu-xu]

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.