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

Enhance :focus-visible states color contrast #398

Closed
3 tasks
ffoodd opened this issue May 27, 2020 · 0 comments · Fixed by #1437
Closed
3 tasks

Enhance :focus-visible states color contrast #398

ffoodd opened this issue May 27, 2020 · 0 comments · Fixed by #1437

Comments

@ffoodd
Copy link
Contributor

ffoodd commented May 27, 2020

Our primary color #f16e00 leads to insufficient contrasts against #ffffff.

Thanks to the :focus-visible polyfill, we're now able to distinguish the focus state when using keyboard—which already got enhanced with outlines.

I suggest we go a step further by ensuring contrasts (mostly using a darker orange) for components using #f16e00 in either color or background-color when focused.

  • inventory cases with #f16e00 when focused
  • select the minimum viable orange: for now, $orange-700 which results in #a44b00, see current v5-dev deploy
  • apply it in listed cases.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants