1387916 - [Dev Tools] Improve contrast and accessibility of dark theme

Status: RESOLVED WORKSFORME

(DevTools :: General, defect, P2)

Description

[Rhys Powell]

Attachment: Screen Shot 2017-08-07 at 12.11.06 pm.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170806100257

Steps to reproduce:

I'm a big fan of dark themes, and use them in my text editor, terminal, etc.

I'd love to be able to use the dev tools' dark theme as well, but I have issues with my vision that make it hard to use due to the excessively low contrast of certain colors it uses.


Actual results:

Switching to the dark theme causes the dev tools to use colors that have low contrast, making it a strain to read text. This is particularly an issue with the red used for errors in the JS console. You can see the WCAG contrast ratio of that with the background in my included screenshot.


Expected results:

The dark color scheme would be more useful with increased contrast, ideally using a standard like the Web Content Accessibility Guidelines[1] to inform the color choises.

[1]: https://www.w3.org/TR/UNDERSTANDING-WCAG20/Overview.html

Comment 1

[Rhys Powell]

Here's a slightly better link to the WCAG's guidelines on contrast[1] and the app I used to get that ratio[2], though there's a bunch of websites you can plug color values in to check these ratios as well.

[1]: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
[2]: https://usecontrast.com/

Comment 2

[Patrick Brosset <:pbro>]

Gabriel, I believe you're doing some work related to theme color changes these days. If so, do you mind taking a look at this bug at the same time?

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

Our latest photon theming for the DevTools is strongly focus on making sure the colors are accessible. Since there are a number of bugs that contributed to resolving this bug, I am closing this as WORKSFORME. We do believe in making sure our themes are accessible. If this is not resolved with Firefox 57, please report back.

Thank you!

Comment 4

[Rhys Powell]

I took a look at the new Firefox Nightly build and the new theme is a huge improvement. Thanks!