Rethink accent colors for accessibility

[avvvvve]

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.

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:

• Slack conversation about this
• Understanding Non-text contrast requirements (w3 article)