Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35557

Re: Finding a real background color of an element

Show key headers only | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-21 19:40 +0200
  Re: Finding a real background color of an element "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-08-21 21:14 -0700
  Re: Finding a real background color of an element JJ <jj4public@vfemail.net> - 2018-08-22 14:32 +0700
    Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-22 19:01 +0200
      Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-08-22 11:37 -0700
        Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-23 07:52 +0200
          Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-08-23 04:54 -0700
            Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-24 19:09 +0200
              Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 03:55 -0700
                Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 04:28 -0700
                Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 05:09 -0700
          Re: Finding a real background color of an element "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-09-02 12:40 -0700
            Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 03:51 -0700
              Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-03 03:55 -0700
            Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-09-04 18:52 +0200
  Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-08-29 22:12 +0200
    Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-08-31 22:30 +0200
      Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-09-02 05:09 +0200
        Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-09-02 19:57 +0200
          Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-09-03 15:09 +0200
            Re: Finding a real background color of an element Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2018-09-04 19:02 +0200
              Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-09-04 22:15 +0200
                Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-04 22:48 -0700
                Re: Finding a real background color of an element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-09-08 15:39 +0200
                Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-08 06:57 -0700
                Re: Finding a real background color of an element Richard Damon <Richard@Damon-Family.org> - 2018-09-08 13:32 -0400
                Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-08 10:43 -0700
                Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-08 10:44 -0700
                Re: Finding a real background color of an element Richard Damon <Richard@Damon-Family.org> - 2018-09-08 14:23 -0400
                Re: Finding a real background color of an element Julio Di Egidio <julio@diegidio.name> - 2018-09-08 11:31 -0700
                Re: Finding a real background color of an element Richard Damon <Richard@Damon-Family.org> - 2018-09-08 17:59 -0400
  Re: Finding a real background color of an element Silvio <silvio@internet.com> - 2018-09-04 22:05 +0200

csiph-web