getComputedStyle gives "transparent" instead of actual background color

Question

This was a surprise. The following code does not seem to give me the actual colors on the screen:

h1 = document.querySelector("h1");
window.getComputedStyle(h1).color

Gives rgb(0, 0, 0) which I think is correct. However

window.getComputedStyle(h1).backgroundColor

gives rgba(0, 0, 0, 0). The actual background color I see on the screen is white.

The element I call h1 is visible on the screen. I was expecting to get the actual background color. The value I get above (in rgba) is not wrong, but not very useful either. It just tells me the background is fully transparent - and that is not a color.

How do I get the actual background color in RGB?

Resurrectionism

Try to use dom traversal, if current element's bg is transparent then check parent and so on. – Crashing

Thanks @Tony, but getComputedStyle should give me exactly that. – Resurrectionism

@Leo: Why do you think it should? – Shinar

A very good question, @Bergi. I realize now that background-color is a bit different from other values since it depends on so many other things than background-color of parent elements. Testing on another element, a <span>, I get this rgba(0,0,0,0) again even though the actual background is yellow. There is no position, float etc involved. The element is positioned within the box of the containing element that has the CSS yellow background. I can see the reason for the decision of returning rgba(0,0,0,0) however. – Resurrectionism

But @Bergi, it still prevents me from what I wanted to do. I wanted to get the contrast between the foreground and the background colors so that I could test for this part of accessibility. As things looks now I think this is impossible in javascript. – Resurrectionism

Maybe check How do I detect the inherited background-color of an element using jQuery/JS? – Shinar

possible duplicate of How to get element color which has no background? (no solution, but very good explanation. Also consider background images or gradients :-). – Shinar

For accessibility testing, you could use an external tool (or browser addon?), or take a screenshot and analyze that – Shinar

Thanks for the link, @Bergi. You can however actually do much better than that and it would be good if there was javascript/DOM support for it. I am just as surprised as BigDave in the question you linked too. The alternative you mention is a hard way if you want to automate this. – Resurrectionism

But as you see in Athari's answer, a dom element might not have a single color, so there's no native function implemented for this (transparent is the correct value). The traversal already mentioned by Tony is probably the simplest way. – Shinar

Yes, there could of course be several background colors, images and transient colors. But you can at least catch those cases - i.e. under certain layout assumptions (for example the viewport dimension+scrolling). – Resurrectionism

To be more clear: It is a rather simple thing to implement if you are in the position of developing the Chrome Workspace for example. – Resurrectionism

Answer 1

If you set your background-color: rgba(255, 255, 255, 0) in your css; getComputedStyle() will return transparent (in some browsers) instead of your rgba value.

Easy fix for this is setting alpha to something higher than 0 for example rgba(255, 255, 255, 0.01); This will return rgba(255, 255, 255, 0.01)

Presentable

the problem is with Firefox :) I wasted all day searching for a reason why getComputedStyle returns transparent instead of rgba – Chitwood

Answer 2

getComputedStyle(h1) provides the css value of element after applied in active stylesheet.

Which means you can get those css value only which applied to particular element in any way.

Eg:- if you applied background for h1 :RGB{255, 255, 255}, then you will get the background color white in rgb format otherwise not. It does not provide value for html's default style.

To get the value by getComputedStyle(), First you should apply this to element.

For more info getComputedStyle()

Gemma

Hm, thanks, yes, that was what I saw, of course, but how do I get the html default style color values? – Resurrectionism