You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This pull request addresses and resolves contrast issues with primary buttons in our UI. The motivation behind this change is to enhance accessibility and ensure that our button text is easily readable against its background, adhering to WCAG (Web Content Accessibility Guidelines) standards.
Key Changes:
New Contrast Pairs: Added new contrast pairs for negative button states, ensuring that text on negative buttons meets the minimum contrast ratio of 4.5.
Color Adjustments: Adjusted several button background colors from beyondBlue30 to beyondBlue10 and beyondBlue15 for various button states (hovered, pressed) to improve contrast and visibility.
Benefits:
Improved Accessibility: By enhancing color contrast, we make our buttons more legible for users with visual impairments, ensuring a more inclusive user experience.
Consistency: This update maintains consistent styling across our button variants while adhering to design principles and accessibility standards.
In summary, these changes will significantly improve the usability and accessibility of our application, making it more user-friendly for all.
We should review badge in dark, is failing against textPrimaryNegative:
[contrast-fail] dark.textPrimaryNegative vs dark.badge
Suggestion: grey20 (#F3F3F5, 4.59)
I may not change the text token value, since matches the rest of other texts (default, brand...) so the option here is to update badge value to a darker tone.
This would require to create a new palette entry o2new70 (#A73939) that will have 4.5 against grey30
We should review badge in dark, is failing against textPrimaryNegative:
[contrast-fail] dark.textPrimaryNegative vs dark.badge Suggestion: grey20 (#F3F3F5, 4.59)
I may not change the text token value, since matches the rest of other texts (default, brand...) so the option here is to update badge value to a darker tone.
This would require to create a new palette entry o2new70 (#A73939) that will have 4.5 against grey30
We should review badge in dark, is failing against textPrimaryNegative:
[contrast-fail] dark.textPrimaryNegative vs dark.badge Suggestion: grey20 (#F3F3F5, 4.59)
I may not change the text token value, since matches the rest of other texts (default, brand...) so the option here is to update badge value to a darker tone.
This would require to create a new palette entry o2new70 (#A73939) that will have 4.5 against grey30
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Warning
Do not merge this PR until spacing alignment project is merged in web, in order to avoid more screenshot changes
Pull Request Description: feat(skin): Solve button primary contrast issues
This pull request addresses and resolves contrast issues with primary buttons in our UI. The motivation behind this change is to enhance accessibility and ensure that our button text is easily readable against its background, adhering to WCAG (Web Content Accessibility Guidelines) standards.
Key Changes:
beyondBlue30tobeyondBlue10andbeyondBlue15for various button states (hovered, pressed) to improve contrast and visibility.Benefits:
In summary, these changes will significantly improve the usability and accessibility of our application, making it more user-friendly for all.