search

bitcrowd / bitstyles

A complete design system, with base styles and components, built in Sass using CSS variables
https://bitcrowd.github.io/bitstyles
ISC License
15 stars 0 forks source link

Login form with errors example has insufficient color contrast #814

Open angelikatyborska opened 6 months ago

angelikatyborska commented 6 months ago

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 https://github.com/bitcrowd/bitstyles/pull/828, color contrast errors were ignored. Make sure to un-ignore them when working on this ticket.

angelikatyborska commented 1 month ago

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 commented 1 month ago

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.