search

openSUSE / chameleon

openSUSE Design System for Web
https://static.opensuse.org/chameleon/
GNU General Public License v3.0
13 stars 10 forks source link

Dark Theme: Aesthetic & Accessibility Issues #34

Closed Merrit closed 3 years ago

Merrit commented 3 years ago

I'd like to propose a few tweaks to the wiki theme.


The default colorset has a very high contrast ratio, which is both hard on the eyes and for some people even proves an accessibility challenge because it is harder to read.

Compare the default:

opensuse-wiki-theme-default

and a slight tweak:

opensuse-wiki-theme-tweaked

The only changes are:

background-color from #000000 --> #141414 (Rich Black / Dark grey rather than ~absolute black)

and

The body's (font) color from #adb5bd --> rgba(255, 255, 255, 0.70) (White text @ 70% opacity to achieve a comfortable contrast ratio that is aesthetically pleasing & easier to read.)

Google has actually done a fair bit of research on the accessibility of color & contrast ratio that shows this in their guidelines for dark themes.

https://material.io/design/color/dark-theme.html#properties

It seems as though the wiki may be a user's first hit when searching for information or help, and I feel like such an important resource should have a good-looking presentation & good accessibility. I think these small changes would definitely help improve these aspects, and I am wondering what everyone else might think about such changes.

I am not familiar with sass, but I am sure I could figure out a pull request if there is no disagreements on the proposed changes.

guoyunhe commented 3 years ago

I have made a change to make the color slightly softer. You can check news.opensuse.org for example.

We won't use text color with transparency because it is not good for performance.

Merrit commented 3 years ago

Yes I think that does look significantly better. :+1:

For the font; transparency isn't actually needed, it could instead be a darker color - slightly grey rather than pure white for example.

guoyunhe commented 3 years ago

We never use white text in dark mode. The text color is #adb5bd, not very bright on a regular LCD screen. Twitter's dark mode use #ffffff. Reddit is #d7dadc. And we are using a much darker color.

Accessibility is a complex concept. Some people with weak sight cannot read text in low contrast. So we cannot use too dark texts in dark mode.