Proposal: Improve Notification colour contrast (a11y)

[m10l]

The problem

The Notification component currently fail WCAG colour contrast accessibility guidelines:

Notification with success intent:

Element has insufficient color contrast of 2.99 (foreground color: #ffffff, background color: #0baa75, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1

Notification with warning intent:

Element has insufficient color contrast of 2.85 (foreground color: #ffffff, background color: #db8500, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1

The proposed solution

I'd like to propose some changes to these components to make sure we can consistently meet accessibility guidelines by not setting text on a solid-colour background.

Here are some mockups of what I'd like to implement:

Success

Warning

Error

[gui-santos]

IMO, they look great! It really improves the readability of the notifications 👍

[domarku]

Great proposal @m10l ✨ I've got couple of comments:

• This definitely makes them more readable!
• There should be some more vertical spacing between the text elements, spacing-2xs (4px) or even xs (8px), to make the message easier to scan and the perceived click area around the CTA larger
• The icon should be horizontally aligned with the Title / Close button. People scan messages in the form of the letter F, but this way the eye pops back left to view the icon after reading the Title. Examples from other systems: Atlassian, Polaris, Carbon
• Can we use the TextLink component for the CTA here? It would make it stand out a bit more and consistent with the rest of the web app.
• Consider text wrapping in the body. The right side of the notification — close button with white background — should have similar spacing as the left side — icon with coloured background, so no text goes below the close button.

Questions

• Where is the CTA when there's no body text? An example might be a "success" message with an Undo
• Could we rename the component to Message or Toast or would that be a breaking change?
• Should we replace the icon in the red error message with the Error Icon to make it different than the icon for the warning message?

Here's a sketch of all the details I mentioned above:

[domarku]

I see that Github has the icon vertically centered in their Toast component. Look at others to get inspired not to prove a point! :) But, nevertheless, I still think it should be aligned to the top.

[m10l]

@domarku Awesome, thanks for the review and suggestions

There should be some more vertical spacing between the text elements, spacing-2xs (4px) or even xs (8px), to make the message easier to scan and the perceived click area around the CTA larger

Cool, I think this is worth tackling at the same time too so will do this as part of the same PR

The icon should be horizontally aligned with the Title / Close button. People scan messages in the form of the letter F, but this way the eye pops back left to view the icon after reading the Title. Examples from other systems: Atlassian, Polaris, Carbon

The examples linked all have a solid background for the entire notification, so I think your suggestion makes sense there, but doesn't work for what we're doing as it's a smaller section with a solid colour background.

Can we use the TextLink component for the CTA here? It would make it stand out a bit more and consistent with the rest of the web app.

Ah good spot, was using TextLink but the wrong colour.

Consider text wrapping in the body. The right side of the notification — close button with white background — should have similar spacing as the left side — icon with coloured background, so no text goes below the close button.

Cool, think text is already prevented from going beneath the close button, but I'll test it to make sure.

Where is the CTA when there's no body text? An example might be a "success" message with an Undo

It's always at the bottom

Could we rename the component to Message or Toast or would that be a breaking change?

That'd be a breaking change, wouldn't recommend it for now

Should we replace the icon in the red error message with the Error Icon to make it different than the icon for the warning message?

Ooo, definitely, good shout.

[domarku]

Right on @m10l! Thanks for addressing all my comments. Any chance you would consider putting the CTA inline in case of no body text? Like so:

[m10l]

Right on @m10l! Thanks for addressing all my comments. Any chance you would consider putting the CTA inline in case of no body text? Like so:

@domarku Still not in favour of doing this, I think introduces more potential problems than it tries to solve.

Pros/cons

• ➕ Everything readable on a single line
• ➖Concerns around truncation - how to handle if the CTA and title are both super long? What if the title spans multiple lines?
• ➖Consistency - I'd argue that moving the CTA based on number of lines of text could create a jarring experience for the user

[domarku]

Ah, good points. Although that makes me think we should have come copy guidelines for the notifications. I'll give it a go at writing and adding them to the thread later in the day.

[m10l]

@domarku That'd be awesome! Shall I close this an open a PR?

[domarku]

Do it 🤠

[wichniowski]

looks really good! now if you compare the old notification to it, the old one look super outdated and wrong so 100x for the proposal

[m10l]

Closing as PR created here: #449