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

Dark theme does not pass WebAIM Contrast Test #1237

Closed
eat-sleep-code opened this issue Jan 11, 2023 · 0 comments · Fixed by #1886
Closed

Dark theme does not pass WebAIM Contrast Test #1237

eat-sleep-code opened this issue Jan 11, 2023 · 0 comments · Fixed by #1886

Comments

@eat-sleep-code
Copy link

The default dark theme does not appear to pass the WebAIM contrast test.

The sidebar navigation, breadcrumbs, etc. use a foreground value of #737373 or rgb(115, 115, 115).

When placed against the default background value of #111111 or rgb(17,17,17), the contrast is only 3.98:1. This fails both AA and AAA tests.

To pass accessibility contrast tests with a ratio of 7:1 or greater, the foreground color must be bumped to #9E9E9E or rgb(158, 158, 158).

There does not appear to be a clearly documented way to override these colors either in the theme config, or via a specific CSS class.

The closest I found was the following, but use of !important feels unnecessarily dirty and likely breaks the light mode view.

.nx-text-gray-500 
{
    color: rgba(158, 158, 158, 1.0) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant