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

Rethink accent colors for accessibility #19693

Open
avvvvve opened this issue Oct 12, 2023 · 0 comments
Open

Rethink accent colors for accessibility #19693

avvvvve opened this issue Oct 12, 2023 · 0 comments
Assignees
Labels

Comments

@avvvvve
Copy link

avvvvve commented Oct 12, 2023

Currently, our accent colors in the light theme do not pass the 3:1 contrast ratio recommended for interactive elements. This means that when they are used in applications where there is no text, like the guitar bends diagram, they do not pass against the background color.

Image

We should explore developing higher-contrast versions of these colors to make light mode more accessible to colorblind users.

Consider:

  • Retaining transparency styles for buttons and adding outlines/other visual indicators of status
  • Making selected elements a darker background color, which would require inverting text (this would get tricky on lighter accent colors like yellow and orange). Colors would need to pass against BG1 and BG2 at 70% opacity

Figma file:
https://www.figma.com/file/WAlqd1mWijVmIpQBScWhyd/Color-Accessibility?type=design&node-id=6-36&mode=design

More resources:

@avvvvve avvvvve changed the title [MU4 Task] Rethink accent colors for accessibility Rethink accent colors for accessibility Jan 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants