fx-private-relay-add-on icon indicating copy to clipboard operation
fx-private-relay-add-on copied to clipboard

[a11y] Relay Dashboard low contrast elements

Open rbillings opened this issue 3 years ago • 0 comments

The Relay Dashboard Home page icon fails the WCAG AAA contrast requirements for accessible text. The current contrast is 2.68, contrast recommendations are here. I added all of the elements found by the Firefox accessibility add on, and realize that some of the low contrast was intentional.

Home icon is 2.68: Screen Shot 2021-11-30 at 1 59 14 PM

The signed in banner is 1.87: Screen Shot 2021-11-30 at 2 04 01 PM

Get Started steps 1, 2, 3: Screen Shot 2021-11-30 at 2 04 50 PM

Action step is 4.15: Screen Shot 2021-11-30 at 2 11 23 PM

'***@' and '.mozmail.com' are 2.68 Screen Shot 2021-11-30 at 2 11 54 PM

Number and 'Forwarded' are 2.66: <img width="257" alt="Screen Shot 2021-11-30 at 2 14 23 PM" src="https://user-images.githubusercontent.com/737878/144136691-ce09fa1f-6324-4104-90f6-6f730ba761b9.png"

Delete is 4.46: Screen Shot 2021-11-30 at 2 15 03 PM

rbillings avatar Nov 30 '21 22:11 rbillings