How to use JavaScript to measure how bright a users monitor is?

Question

I've noticed that the brightness of computer monitors drastically varies between computers.

As such, this changes the look of web pages greatly.

Is there a way to use JavaScript to automatically detect how bright (or dark) a users monitor is so that I can adjust my web page colors accordingly?

UPDATE

Please note that I do not want manual user involvement. I want this detection to be automatic so that users don't realize I dynamically change the color palette automatically based on the brightness/darkness of their monitor.

UPDATE 2

Please also note that I'm not talking about wanting to adjust/calibrate the end users actual monitor but instead, programatically adjust the color selected to be displayed on the web-page itself. Meaning, if the end user has a darker than normal (brightness) display, I'll instead display a version of my web page that uses brighter colors instead.

Bennion

Sorry, but what you ‘want’ is simply impossible. For any program, let alone JavaScript. – Cobbler

Even if this was possible, don't you think the user has adjusted their brightness for a reason? – Straightjacket

+1 crazy question, -1 obnoxious updates – Arianism

You probably wil also need to check the brightness of the room the monitor is in- if the curtains are drawn, for example, the image will appear brighter. – Lorenlorena

@James: I wouldn't necessarily think so. Never underestimate the stupidity of users. I had a customer who complained the site I built was too big... She has IE7 zoomed in 150% and had no idea she'd done that, the solution to her complaint was to show her how to zoom in/out rather than to shrink the design! – Roil

Answer 1

There's no way to do this programatically. What you'd need to do is write some sort of monitor calibration test, possibly using variations of images like these, showing the user two or more images and asking them to chose the one which looks closer, adjusting colors each time they make a choice, until you feel the changes you've made are accurate.

EDIT: Basically I'm suggesting building something like this.

Roil

What you recommend requires manual user involvement, right? If so, that's not what I'm looking for. – Bennion

+1 There is no way to do it in Javascript but I think it is becoming possible. Have a look at Display Data Channel en.wikipedia.org/wiki/Display_Data_Channel – Gaston

@HankV: There's no way (currently) to do this in JavaScript without using user involvement. Have you considered using Java? Even then you will probably need either user involvement or hardware as to calibrate the monitor you need to see what the real world output of a given color is, and adjust that color until it's correct. I.E. if 0xFF0000 shows as 0xFF1111, you know all colors must be darkened to appear correct – Roil

@Josh, I think you misunderstand. I do not want to calibrate the end users monitor. Instead, I want to simply change what colors I display on the web page if I know their monitor is darker than normal. – Bennion

@HankV: Sorry if my answer was unclear, I did understand that. What I'm saying is you need to query the real world to know if their monitor is darker than normal. This can be by asking the user, or a piece of hardware. – Roil

@Shaji: DDC doesn't provide a way for the monitor to know what the ambient light in the room is and thus how color displayed on the monitor is actually perceived. To calibrate, either hardware or a human eye is necessary because the actual light produced by the monitor must be sampled and analyzed. – Roil

@Roil Thanks for the comment and you are correct. I did not think of it this way. – Gaston

@Shaji: Sure. Not to detract from your comment -- it was still useful information! – Roil

Answer 2

Most of the brightness/darkness settings are a function of the monitor. Nothing in the computer (let alone JavaScript running in a sandbox) is able to access this kind of information - it's mainly a one-way data flow between computer and monitor. Factors such as brightness of the room, and whether there is light behind the monitor will influence the appearance of the screen just as much.

There's no way to get everyone to see your website the way you see it. The sooner you realise that, the easier your life will be.

Boundless

+1 for "There's no way to get everyone to see your website the way you see it. The sooner you realise that, the easier your life will be"!!! – Roil

Answer 3

What about a flash/silverlight app instead? It can use the user's camera (if they have one). You could then analyze pictures/video from the camera to make inferences about how much monitor light is reflecting off the user's face.

It would be a very very fragile and complicated app.

Leftward

-1 There is absolutely no way this would ever work! +1 for ingenuity though :) – Boundless

Ask the user to hold up a mirror to the camera so that the camera captures the screen, and calibrate... lol! – Roil

Silverlight 4 does allow access to local API calls, but it requires the user to grant elevated privileges. Even then, I'm not sure if Silverlight would have access to the necessary screen properties to make those types of changes. – Brunswick

+1 CRAZY, I like it :), especially because in an odd sense the brightness of the room does correspond to the monitor brightness because low brightness is only legible in low light rooms so an assumption in that direction is actually reasonable – Arianism

Answer 4

You can't do that with javascript (and I don't think that you could do that in any other language, at least, without a piece of hardware to help).

Footsie

Answer 5

No. As a general rule, JavaScript is not allowed to find out a whole lot about your computer for security reasons.

Jackofalltrades

Answer 6

After Update 2 of your question, your requirement is a lot clearer. However, I would suggest you give user a feature to calibrate the brightness in your website. We can achieve that through program.

One way, could be, you can create a Brightness Bar and through the offset value you can update background color of the body.

/*Pure JavaScript code for brightness Calibration*/
let brightnessBar= document.getElementById('brightnessBar');
brightnessBar.addEventListener('mousemove',function(e){
    let blue = 255-`${e.offsetY}`;
    document.body.style.backgroundColor= `rgb(255,255,${blue})`;
}); 

Here default background color of my website is White, so when somebody is trying to decrease the brightness by adjusting the sliding bar, I am taking 'offsetY' since my brightnessBar is vertical.

Another way could be, you can have the brightness bar and have multiple images one slightly darker than the other one. As soon as a user decreases the brightness, you show the darker images and when a user increases the brightness, you show brighter images.

I hope I could answer your question.

Dermatoglyphics