Have you ever created a really great looking website design, ideally on a color-corrected LCD monitor only to find it looks terrible on another user's monitor? I've noticed several times, designs I have created look extremely washed-out on some of my co-workers factory default, cheap, LCD monitors. Sometimes the users have their brightness/contrast/gamma turned up so high that hex colors such as #ececec or #dddddd look almost the same as #ffffff (white). So what could be done to fix this?

Overlay A DIV?

Originally I thought it could be possible to overlay a DIV, with opacity, over the entire viewport in a futile attempt to make the screen 'darker'. This was futile because the DIV essentially makes it impossible to click anything underneath it.

A New CSS Property

After giving it some thought, I came to the conclusion that we need a new CSS property which I've decided to call 'intended-brightness'. The syntax might look something like this:

html { intended-brightness: 0.5; }

Intended-Brightness would take a decimal that could range from 0.0 to 1.0 (much like opacity does). This would allow the designer of the website to design using their native brightness and then ensure that the website looks the same on all monitors rather than dark on some and washed-out on others.


Obviously accessibility proponents would complain about this new property because some users (heaven forbid) would want their browser's brightness cranked up to 95%. Because of this, browser vendors could create an option like they do for other CSS properties related to browser accessibility such as font-size, color, background-color etc. See below for Firefox's tab regarding these settings:

Firefox's default styling options

CSS Inheritance?

One issue I'm not sure on yet is whether the property could be inherited by child elements. The property could act like the various 'background' properties where the background-image is only set on the current element and not the child elements. The property could also allow inheritance basically allowing child elements to have a different brightness than other elements.

Personally, I think it would be easier, and faster to implement using the non-inheritanced method which is usually the desired effect web developers would want.

Does This Belong In CSS?

Of course! CSS already allows the styling of many other features native to the operating system such as form controls, scrollbars, cursors and text-selection colors. Another very similar property already present in CSS is opacity which I think further strengthens my case.

So what do you think? Feel free to discuss below -