A11y: ensure contrast compliance for Blau skin#1360
Conversation
|
Size stats
|
|
Accessibility report ❌ 14 problems detectedcomponents-lists--row-list-story (1 violations)components-lists--boxed-row-list-story (1 violations)components-stackinggroup--default (1 violations)patterns-feedback-feedbackscreen--feedback-screen-story (1 violations)patterns-feedback-successfeedback--success (1 violations)patterns-feedback-successfeedback--success-as-header (1 violations)layout-inline--negative-space (1 violations)community-blocks--block-simple (1 violations)community-blocks--block-row (2 violations)community-examplecomponent--default (1 violations)private-components-in-different-skins--default (2 violations)private-image-image-sizes--default (1 violations)ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 98ef67e. |
|
Screenshot tests report ❌ counter / counter-default-skin-blau
❌ private-skin-components / components-in-blau
❌ private-skin-components / components-in-blau-alternative
❌ private-skin-components / components-in-blau-dark-mode
❌ private-skin-components / components-in-blau-inverse
❌ private-skin-components / components-in-blau-inverse-and-dark-mode
|
|
Inactive tag text in dark mode is not passing
|
|
Cvv illustrations are failing 3:1 (2.34:1) in light mode, we can discuss if we consider them decorative. I don't since they describe the user where to look in their credit card for the information we're requesting.
|
Including inputBorder and adjusting warning to pass contrast.
I agree — in my opinion, those specific icons should use |
Yes, true — we have the same issue in Vivo, Tú, and Telefónica (the latter is already fixed in my WIP branch). For this change, I had to adjust the background ( |
blauRed, grey2, grey4, darkModeGrey6, textBrand, success, control, controlActivated, controlActivatedinverse, toggleAndroid, neutralMedium, neutralMediumInverse, tagTextInactive
| barTrack: palette.grey2, | ||
| barTrackInverse: applyAlpha(palette.grey6, 0.2), | ||
| barTrack: palette.grey3, | ||
| barTrackInverse: applyAlpha(palette.white, 0.5), |
There was a problem hiding this comment.
this color works worse than grey6, why did you make this change?
There was a problem hiding this comment.
To maintain parity with the other brands, I thought this worked better in my opinion—but I’ll roll it back.
3 participants
This PR consolidates the accessibility improvements required to meet contrast ratio guidelines by June 28. Key updates include adjusting the
textNavigationBarPrimarytoken togrey6to ensure adequate contrast overblauBluePrimary. As a result, Blau will no longer employinverse contextson other components (with the exception of inverse cards, which will now useblauBlueSecondaryas their background). Additionally, we've reviewed and updated all color tokens to guarantee a minimum 3:1 contrast for non-text elements and 4.5:1 for text in both light and dark modes. These changes ensure the Blau skin delivers an inclusive and readable experience across themes.