Forecast bars contrast is too low in light mode

[noiob]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser
• I read the FAQ and the issue I'm having was not mentioned there.

Release with the issue:
1.0.10

Last working release (if known):
n.a.

Browser and Operating System:
n.a.

Description of problem:
The contrast between the forecast bar foreground and background is too low when the background is white. Ideally I'd like to have no background at all, since I'm trying to use the card on an e-Ink display.

Javascript errors shown in the web inspector (if applicable):
n.a
Additional information:
I have deficient color vision so if it looks fine to you, consider making the card more accessible to colorblind people anyways

[pkissling]

thanks for reporting the issue. you have a very valid point. i never used the card with white background. will have a look on how to fix the issue shortly.

[Watison]

Hey @pkissling, can I asked what are the colour hex values and corresponding temps you’ve used? I’d like to match the rest of my theme to them. I’d suggest a new feature to change the colours aka mini-graph-card, but I like them as they are.

[pkissling]

hi there, sorry that i haven't found the time yet to work on this issue.
colors can be found here: https://github.com/pkissling/clock-weather-card/blob/master/src/clock-weather-card.ts#L48
key is the temperature in Celsius, value the corresponding RGB color

[noiob]

I worked around the issue for myself by removing the background and adding a bunch of CSS filters to improve contrast and saturation using card-mod. I'll share it here in case someone is interested, note that it'll look a bit weird on an LCD, but it works well for my color E-Ink panel

card_mod:
  style: |
    .card-content {
      padding: 0 8px !important;
    }
    forecast-temperature-bar-background {
      display: none;
    }
    forecast-temperature-bar {
      filter: brightness(80%) saturate(200%) contrast(200%);
    }
    forecast-icon {
      filter: saturate(200%) contrast(200%) brightness(60%);
    }

[airmaxx]

Great idea with card_mod. I've added one entry so that the main icon for gets also updated.

clock-weather-card-today-left {
  filter: saturate(200%) contrast(200%) brightness(60%);
}