pico
pico copied to clipboard
Cards (`<article>` tags) have poor contrast with background in light mode
Describe the issue
Cards have very poor contrast with the background when using Pico v2's light theme.
Cards are sufficiently visually distinct in the dark mode.
Current Behavior
Cards are nearly indistinguishable from the background when using the light mode.
Expected Behavior
Cards are easily distinguishable from the background when using the light mode, perhaps by employing a slightly thicker shadow.
@gekoke, I prefer to keep the shadow light/subtle to keep Pico's style neutral. Plus, it's customizable with CSS variables.
But yes, it lacks some contrast, maybe we could do this: https://codepen.io/lucastests/pen/bGZZeBK
I believe that the contrast issues might be display-based. The UI in the attached screenshots looks fine on my 2021 14" MacBook Pro with adequate contrast.
Looking at it on my Gigabyte G27Q 1440p monitor with default settings there is almost no visible contrast even with the shadows. However, when I change the color temperature to a different mode the contrast becomes visible.
I have attached some pictures of my monitor with the different settings enabled to try to make the issue more visible. Hopefully these help.