Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Proposal: Improve Notification colour contrast (a11y)

See original GitHub issue

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 Screenshot 2020-03-30 at 15 03 25

Warning Screenshot 2020-03-30 at 15 01 35

Error Screenshot 2020-03-30 at 15 01 17

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:11 (11 by maintainers)

Top GitHub Comments

1reaction

wichniowskicommented, Apr 1, 2020

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

1reaction

domarkucommented, Mar 31, 2020

Do it 🤠

Top Results From Across the Web

Expert Tips For Color Accessibility On The Web

One of the ways to ensure greater color accessibility over the web is to aim for sufficient color contrast. The contrast ratio of...

Offering a Dark Mode Doesn't Satisfy WCAG Color Contrast ...

The Bureau of Internet Accessibility offers a free color contrast validation tool to help webmasters identify (and address) this issue.

Designing for Accessibility: Contrast Ratio - Heroku Blog

This ratio guarantees the legibility of text against its background, in order to ensure all users can perceive Heroku's user interfaces equally.

Improve the Contrast Accessibility Warning #34968 - GitHub

Try using a brighter background color and/or a darker text color." There are lots of options for a solution. I'll outline a couple,...

Color Contrast Checker - Level Access

Color Contrast Checker. Enter a RGB foreground and background color in #hex or integer format to check contrast for accessibility. Foreground RGB in...