search

laravel / ideas

Issues board used for Laravel internals discussions.
938 stars 28 forks source link

Fix email accessibility - Increase text color contrast #2524

Open bjuppa opened 3 years ago

bjuppa commented 3 years ago

The styles for html emails sent by a default Laravel app is failing WCAG AA color contrast requirements for normal text.

Current contrast of #718096 text on white background is ~4:1 and on the #edf2f7 background used in some email components it's just 3.56:1. It'd be great if we could get that up at least above 4.5:1!

Proposed new text color

This color generator suggested the closest colors that meet guidelines for text on #edf2f7 backgrounds:

Personally I'd go for AAA, to be as inclusive as possible, but of course it would make the emails look less designery...

Are there other considerations that needs taking into account before fiddling with the email text color? If not, I'm willing to submit a PR!

Side note: Other email colors

I've focused on the main text color, but actually the #3869d4 links, the #b0adc5 footer text, and the #74787e table cell text colors really should have their contrasts increased too. Also, the #48bb78 green and #e53e3e red buttons are not quite dark enough for their white text.

Fixing it all requires a complete overhaul of the email color scheme, I think it's better if a real designer did that, which I am not! 😄

CSS to fix for main text contrast:

https://github.com/laravel/framework/blob/2aa5c2488d25178ebc097052c7897a0e463ddc35/src/Illuminate/Mail/resources/views/html/themes/default.css#L11-L14 https://github.com/laravel/framework/blob/2aa5c2488d25178ebc097052c7897a0e463ddc35/src/Illuminate/Mail/resources/views/html/themes/default.css#L267-L269 https://github.com/laravel/framework/blob/2aa5c2488d25178ebc097052c7897a0e463ddc35/src/Illuminate/Mail/resources/views/html/themes/default.css#L273-L274

driesvints commented 3 years ago

Heya, thanks for submitting this.

This seems like a feature request or an improvement so I'm moving this to the ideas repository instead. It's best to post these in the ideas repository in the future to get support for your idea. After that you may send a PR to the framework. Please only use the laravel/framework issue tracker to report bugs and issues with the framework.

Thanks!

bjuppa commented 3 years ago

Thanks, sorry for posting in the wrong repo!