1551820 - Insufficient color contrast for WCAG in various elements

Status: RESOLVED FIXED

(Mozilla Reps Graveyard :: reps.mozilla.org, defect, P1)

Description

[Elio Qoshi [:Elio]]

Attachment: examples.png

In multiple instances on the reps portal, text color contrast doesn't meet WCAG AA standards (at least 4.5:1 ratio). Examples attached. This is mostly the case for blue headings and links and low-contrast gray text in the UI.

These colors should be replaced with Firefox Photon colors ideally:
https://design.firefox.com/photon/visuals/color.html

The earliest accessible color with enough contrast on White is Gray 50 (#737373). In the case of darker backgrounds, Gray 60 and 70 might need to be used.

Similar with the blue headings and links. while they are near the required standard, they are not there yet. Blue 60 is the closest color which can be used on this text size while maintaining accessibility.

I'd be happy to help with getting this implemented.

Comment 1

[Michael Kohler [:mkohler]]

I've made the required changes, as well as some general UI cleanup and improvements.

PR: https://github.com/mozilla/remo/pull/1516