Path: csiph.com!aioe.org!news.mb-net.net!open-news-network.org!.POSTED.29.235.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Finding a real background color of an element
Date: Mon, 03 Sep 2018 15:09:59 +0200
Organization: PointedEars Software (PES)
Lines: 46
Message-ID: <1799156.3UefHMCHME@PointedEars.de>
References: <plhirc$1e8i$1@csiph.com> <5e2c4fe7-9a52-2552-8b5d-d269fd83e923@PointedEars.de> <pmc8h7$1f7l$1@csiph.com> <1826877.oMNUckLgyt@PointedEars.de> <pmh8ao$1nnh$1@csiph.com>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
Injection-Info: gwaiyur.mb-net.net; posting-host="29.235.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch:178.197.235.29"; logging-data="9058"; mail-complaints-to="abuse@open-news-network.org"
User-Agent: KNode/4.14.2
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
Cancel-Lock: sha1:UmXEOB4Ktd5tK6Dm0IBcTrnNUZ4=
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
X-User-ID: U2FsdGVkX1+b9KAvLDdpQ6RcP17vvZFl88+m2eyxvwWtfrZ0XSj4Ew==
Xref: csiph.com comp.lang.javascript:35557

Cezary Tomczyk wrote:

> On 02/09/2018 05:09, Thomas 'PointedEars' Lahn wrote:
>> Cezary Tomczyk wrote:
>>> On 29/08/2018 22:12, Thomas 'PointedEars' Lahn wrote:
>>>> Cezary Tomczyk wrote:
>>>>> I am trying to figure it out how to determine a real background color
>>>>> of an element that is visible on the screen.
>>>> Why?
>>> To calculate high contrast ratio.
>> Why?
> 
> Because I am working on https://www.aslint.org/ and implementing
> https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Very good.  Then I suggest, too, that you traverse the document tree upwards 
from the target element node:

  let node = targetElement;
  do
  {
    … document.defaultView.getComputedStyle(node)
        .getPropertyValue("background-color") …
  }
  while ((node = node.parentNode));

Note that this should return an RGB*A* value *string* for each element in 
the traversal, so in order to obtain the *visible* color, some calculation 
and therefore knowledge of color theory, is required.  For example, you have 
to be able to answer the question “What color, in the RGBA color space, is 
the combination of 50 % skyblue ("rgba(135, 206, 235, 0.5)") on white 
("rgba(255, 255, 255, 1)") in the subtractive color model?”.

You could use my JSX:dom/css/color.js:jsx.dom.css.Color type to parse that 
string into an object whose numeric properties you can use for the 
calculation.  (The type itself does not provide the required calculation 
methods yet, but it does provide methods for conversion to and from HSL and 
HSV, which should be helpful.  Pull Requests are welcome.)

Note also that this approach does not handle background images, and requires 
additional work for non-rectangular shapes (e.g. round borders).
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.