Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Login form with errors example has insufficient color contrast #814

Open
angelikatyborska opened this issue Mar 20, 2024 · 2 comments
Open
Assignees

Comments

@angelikatyborska
Copy link
Contributor

angelikatyborska commented Mar 20, 2024

This is how the login form with errors example looks like:

Screenshot 2024-03-20 at 13 18 08

The error message below the input has the color #FFA940 on a white background. This has a contrast ration of 1.9:1 and fails WCAG contrast checks (source: https://webaim.org/resources/contrastchecker/?fcolor=FFA940&bcolor=FFFFFF)

In #828, color contrast errors were ignored. Make sure to un-ignore them when working on this ticket.

@planktonic planktonic self-assigned this Jul 3, 2024
@angelikatyborska
Copy link
Contributor Author

I just discovered that the default color of inputs in a normal state (with value, not focused) also has insufficient contrast. This is the contrast: https://webaim.org/resources/contrastchecker/?fcolor=8C88A7&bcolor=FFFFFF if fails AA with small fonts. Both WAVE and axe-core detect those inputs as failing contrast checks.

Screen Shot 2024-07-26 at 11 13 11

@angelikatyborska
Copy link
Contributor Author

And the default colors of an active button: https://webaim.org/resources/contrastchecker/?fcolor=361AE9&bcolor=BEB3FF

Screenshot 2024-07-26 at 11 35 50

I'm running axe-core on our new BE project that is using bitstyles with the default configuration and those contrast issues get reported.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants