Accessibility issues

[david-hernandez]

I was watching a recent accessibility talk and saw the updated docksal.io was reviewed. It faired well but there were a few problems shown, mostly around color contrast.

See around the 45 minute mark in this video. https://www.youtube.com/watch?v=6uCCDTwpIlo

[lmakarov]

Here's the direct link to the timestamp in the video where they talk about accessibility issues on docksal.io: http://www.youtube.com/watch?v=6uCCDTwpIlo&t=44m15s

[shelane]

https://www.w3.org/TR/2018/REC-WCAG21-20180605/

The specific items mentioned in the video:
Menu items hover contrast ratio too low. Options: increase contrast or use border
Footer text contrast 1:2.9 should be at least 1:4.5
Blog link, social media link borders contrast 1:1.2, should be at least 1:3.1

Tool for finding color contrast with use of rgba:
https://contrast-ratio.com/
https://websemantics.uk/tools/wcag-colour-contrast-checker/

[shelane]

@lmakarov @achekulaev In order to get a strong enough contrast on the color for the footer, we have to flip from a "white-based" color to a "black-based" color. It doesn't have to be "black", but something along the lines of rgba(62,31,40,0.95)

Finding a "passing" contrasting rollover color for the menu is difficult without significantly changing it dark. I don't really like it because you'd have to turn around and flip the color of the text as well. The other recommendation would be to use a darker "border" around the hover item.