How to set CSS for dark mode to have still acceptable contrast when phone screen is dimmed?

35 Views Asked by At

The dark mode on my web page has a quite different contrast on my mobile phone screen (Android), depending whether the screen is dimmed or not.

Any guidelines to choose colors so that the contrast is appropriate for all three cases (desktop vs mobile dimmed vs mobile not dimmed)?

1

There are 1 best solutions below

0
Lord-JulianXLII On

You could look into Accessibilty guidelines. There are guidelines for contrast, use of color, highlighting, font-size and so on. If you try to follow them I'm confident, that it will be legible on all devices. following website has mor information on this: https://www.w3.org/WAI/fundamentals/accessibility-principles/#distinguishable

But in general ... accessibility gudielines (for the web) are probably a good place to start.