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

[Feat]: Have proper contrast ratio compliant themes + colorblind options #1001

Open
Ancairon opened this issue Apr 9, 2024 · 1 comment
Open

Comments

@Ancairon
Copy link
Member

Ancairon commented Apr 9, 2024

Problem

The light theme is too light and some stuff is hard to read as it is grey on white, while the black theme is too black and colors pop much more making it a bit distracting (my opinion as always)

Description

There are places like coolors that can calculate contrast, and they follow the Web Content Accessibility Guidelines (WCAG) and you can input the color values and see what the contrast ratio is like.

Check below:
image

image

these are hex codes from our light theme.

The tool allows to fix the contrast ratio issue by either affecting the text or background color, which means we can keep the design feel the same and adjust some colors only.

@netdata/product I can help in this as I understand the frontend bandwidth is kind of limited, if I am pointed to where the colors are stored and how it works

Another point would be to have some themes about colorblind people, but I think this can be done after we address the current issues mainly with light theme.

Importance

must have

Value proposition

  1. This will elevate the feel of Netdata, it will look more professional and it will not create eye strain in some situations or make text unreadable in lower brightness settings.
  2. Personally I do not have issues with visibility, but if I got issues, I feel people with said problems might be more displeased with these contrast ratio matters.

Proposed implementation

we should use a tool and ensure the combinations for colors on the themes are passing the WCAG or some other web recommendation guideline we choose.

@hugovalente-pm
Copy link
Contributor

@christophidesp is this something you could take a look?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants