search

MozillaFoundation / donate-wagtail

[Legacy] - Wagtail based donation stack
Mozilla Public License 2.0
43 stars 22 forks source link

Refine main page donate error state #336

Closed youriwims closed 5 years ago

youriwims commented 5 years ago

Issue: Elements must have sufficient color contrast

Element path: #payments__braintree-errors-paypal

Snippet: <div id="payments__braintree-errors-paypal" class="payments__braintree-error">Payment cancelled</div>

Screen Shot 2019-10-01 at 12 58 32 PM

How to fix: Fix any of the following:

====

More Info:

Comments: The main concern here is that the background-color isn't easily/quickly discernible as an 'error'. Related to #305 Resources: https://webaim.org/resources/contrastchecker/?fcolor=FFE6E8&bcolor=FFFFFF

nicklee commented 5 years ago

@youriwims / @solarissmoke any idea how I can replicate this error?

solarissmoke commented 5 years ago

@nicklee start a paypal payment, and then close the paypal popup window without completing the flow.

nicklee commented 5 years ago

I've moved the error above the form - users could easily miss it on smaller browser / monitor sizes. And updated the text color to black.

nicklee commented 5 years ago

Screenshot 2019-10-03 at 12 28 28

youriwims commented 5 years ago

Perfect. https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=FFE6E8