Making html sections visible when the screen is too bright

Ask a question+

I have a page that I am trying to view on 23” and 24” inch screens, but I have a problem. Sometimes the screens are too bright, and since my page has subtle borders, the sections of the page are not well separated since a user can’t see because the screen is too bright.

I checked on which browsers luminosity is supported https://caniuse.com/#feat=css-mixblendmode&search=luminosity, but that didn’t yield much.

This didn’t work either.

@media screen and (luminosity: bright) {
  body {background-color: #ddd; color: #111;}

Can I detect when a screen is too bright using CSS alone?. I haven’t come across a javascript solution either.

add comment

1 Answer


I am not a expert but, I beleave, most used browsers(e.g. Chrome and FF) dont automaticly increase or decrease brightness, so for most the screen should look without any alteration of brightness, thought not browsers but drivers may couse flickers in brightness which is indictable by browser or even the OS and that cannot be changed with css or js

Hid3ly 30
add comment

Your Answer