pico icon indicating copy to clipboard operation
pico copied to clipboard

Cards (`<article>` tags) have poor contrast with background in light mode

Open gekoke opened this issue 1 year ago • 2 comments
trafficstars

Describe the issue

Cards have very poor contrast with the background when using Pico v2's light theme.

image

Cards are sufficiently visually distinct in the dark mode.

image

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 avatar Feb 13 '24 22:02 gekoke

@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

lucaslarroche avatar Feb 18 '24 05:02 lucaslarroche

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.

UI with standard monitor settings UI with sRGB settings

Brian-Pob avatar Feb 18 '24 20:02 Brian-Pob