netdata-cloud icon indicating copy to clipboard operation
netdata-cloud copied to clipboard

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

Open Ancairon opened this issue 1 year ago • 2 comments

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.

Ancairon avatar Apr 09 '24 08:04 Ancairon

@christophidesp is this something you could take a look?

hugovalente-pm avatar Apr 09 '24 09:04 hugovalente-pm