webpack-hot-middleware icon indicating copy to clipboard operation
webpack-hot-middleware copied to clipboard

Published 20 hours ago • verified publisher icon webpack-contrib

clientOverlay colors are too low contrast

Open alexzorin opened this issue 6 years ago • 1 comments

Hello,

I have found that the HTML clientOverlay uses some color, opacity and font settings that make it very difficult to read on many monitors.

Specifically the darkgrey: https://github.com/glenjamin/webpack-hot-middleware/blob/c3f18fad072ea5c24fc27d1d85f5c062d82f0070/client-overlay.js#L38

The result is that the file and line number are often unreadable without highlighting the text or straining:

example screenshot

The colors in the above screenshot score significantly below passing levels in WCAG 2.0 level AA - https://webaim.org/resources/contrastchecker/?fcolor=5C6478&bcolor=262626

Making it white helps a bit, but you may wish to tune it other ways:

better contrast

Please save our eyes!

Thank you

alexzorin avatar Oct 17 '17 01:10 alexzorin

This isn’t my area of expertise, but I will happily merge a PR from someone who knows what they’re doing here.

I suppose it should be something slightly off-white to stick with the spirit of the colour name?

glenjamin avatar Oct 17 '17 06:10 glenjamin