Component Change Request: use AAA contrast standards on Error notification bar

[maureenlholland]

Please describe the change you wish to see

Aim for AAA WCAG color contrast standards on Errors notification bars

Please describe why these changes need to be made

The current Error notification styles pass normal AA contrast checks but fail AAA normal text check

In the case of Error notifications, it feels like we should go beyond normal requirements and make the text as easy to read as possible. Errors are already frustrating and it would compound user frustration to struggle to read the error description.

Please provide any designs or prototypes of the proposed changes

Enforcing large/bolded text might be the most effective solution.

Please describe where this component is currently in use

Screenshot above is from Newsletter error (locally forcing errors from the views.py file: http://localhost:8000/en-US/newsletter/confirm/thanks/?error=2)

Please describe what this component should do in the following conditions

• When set in front of a dark background
• When set in front of a light background
• When viewed in a mobile/responsive viewport

I don't think it needs any changes to responsive viewport behaviour or dark/light theme

Is the development of this component a blocking dependency for other work? Please explain if so

Not blocking

[reemhamz]

Thanks for creating this issue! It's easy to realize that even though color contrast passes, our eyes may just generally need something a little better than what the green PASS stamp tells us.

I fiddled around with the error notification bar using dev tools. Two things I found most helpful (conducted separately):

• Changing font color to plain old fashion black (#000000)
  

• Increasing the font size to 16px

Ooo, I like. I also decided to conduct both the changes in one to see how it would suit:

Fun!

Both seem to improve the notification bar (just increasing size by 2px made such a difference for me), and I would prefer to add both of the changes. However, if we were only to choose one method, I would lean towards increasing the font-size rather than the color.

Also, I noticed that the rest of the notification bars seem to have a similar issue to what you're describing. Color contrast passes, but it's visually not-so-pleasant to read. I can see myself squinting if i wasn't sitting hunched and so close to my laptop screen 😆.

I'd be happy to make that change to both color and size for the rest of the notification bars. Happy to discuss this further.

[maureenlholland]

@reemhamz Thanks for your thoughts! I agree the font-size increase is more effective than the font color adjustment alone.

I initially thought large & bolded would be best, but we seem to reserve bold styling for clickable things in the notification bars.

The success notification bar is in all the WNPs. We should check if a font size increase there is off-putting before changing all the component font-sizes. I think it would be acceptable for the error notification alone to have larger font size (similar to how the clickable notification is bolded, it's part of the specific intention of that type of notification to be a bit more in-your-face). Changing the font color to black across all notification component styles should be OK in any case.

[reemhamz]

@maureenlholland

14px in WNP's notification bar

VS.

16px in WNP's notification bar

I don't think the 16px is too off-putting, per se. But a user would be more aware of the size opposed to the former 14px. Though a slight change, I notice it significantly more. And the hierarchical structure of elements seems to look a tad unordered.

Safest thing I can think of doing is changing the font-color to black, as you mentioned above.

[maureenlholland]

PR merged, but leaving this issue open for further discussion (feel free to close and open a new issue specifically for standardizing error colors across Protocol components)

From Craig's comment on the PR:

Though another option would be to darken the background and invert the text color. We use white on a dark red for inline error messages in forms and white on a not-as-dark red for error lists. (https://protocol.mozilla.org/components/detail/error-messages.html and https://protocol.mozilla.org/components/detail/error-list.html). I think we could revisit both of those and perhaps land on one standard for error states across the board.

[reemhamz]

Made a quick test via devtools and checked out the color contrast using webAIM:

(note: color used was $color-red-80 which is #810220)

It has the highest contrast ratio from all the reds we tested and imo wouldn't be a bad color to use for the rest of Protocol. However, looking at it from a color psychology POV, does darker red add more stress opposed to lighter reds? Would love to head what @ehot has to say.

[reemhamz]

cc: @maureenlholland @craigcook @ehot for visibility here.

[maureenlholland]

Thanks for the ping @reemhamz

Going to preface this by saying I don't have a strong opinion beyond, let's make it AAA level contrast, but aesthetically I feel this dark red + white text combination is a tough fit with our other, more vibrant notification background colors.

That said, the error notification color combo (while passing AAA standards) might not be a great fit for small text form errors

Maybe it's possible to have a primary error style (default) and secondary error style (when you need that extra bit of contrast)? I defer to you and Elise and Craig for the standardization decision.

[craigcook]

I think we can try a shade lighter red, as well as changing the text color to black on the form errors.

[reemhamz]

Will be attempting $color-red-30 (#ff848b) for error messages for forms.