How to find out the true background color of an element? Considering all parents, who can have semi-transparent background colors?

Question

css

Actually, you need to calculate the contrast level of the font color and background color.
The background color can be semi-transparent, and consist of many overlays of semi-transparent layers behind it.
It is necessary to somehow calculate the real, real background color, taking into account all the parents from the desired element.
For example, such a structure (scss):

body {
  background-color: lightgreen;
  
  div.cont1 {
    background-color: rgba(192, 0, 0, 0.5);

    div.cont2 {
      background-color: rgba(0, 128, 128, 0.333);

      span.text {
        color: red;
      }
    }
  }
}

How to calculate what is the actual background color of span.text element? I understand that you need to somehow compile the colors, starting from the topmost opaque color, but how to do this? Is there any ready-made solution for such a calculation?
Oh yeah, I forgot to mention, this needs to be done in a Node.js environment, we load the page through puppeter and check it for all sorts of things.

Answer 1

Found the solution: https://jsfiddle.net/5ptdk7sv/
Thanks everyone, the answers helped me point my search in the right direction :)

Answer 2

Use browser extensions like ColorZilla for chrome