Open bjuppa opened 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!
Thanks, sorry for posting in the wrong repo!
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 just3.56:1
. It'd be great if we could get that up at least above4.5:1
!Proposed new text color
This color generator suggested the closest colors that meet guidelines for text on
#edf2f7
backgrounds:#5f6e83
#435266
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