Path: csiph.com!.POSTED.208-71-239-109.cust.centrio.cz!not-for-mail From: Cezary Tomczyk Newsgroups: comp.lang.javascript Subject: Re: Finding a real background color of an element Date: Tue, 4 Sep 2018 19:02:02 +0200 Organization: csiph.com Internet News Service Message-ID: References: <5e2c4fe7-9a52-2552-8b5d-d269fd83e923@PointedEars.de> <1826877.oMNUckLgyt@PointedEars.de> <1799156.3UefHMCHME@PointedEars.de> Mime-Version: 1.0 Content-Type: text/plain; charset=utf-8; format=flowed Content-Transfer-Encoding: 8bit Injection-Date: Tue, 4 Sep 2018 17:02:03 -0000 (UTC) Injection-Info: csiph.com; posting-host="208-71-239-109.cust.centrio.cz:109.239.71.208"; logging-data="3353"; mail-complaints-to="admin@kev009.com" User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:52.0) Gecko/20100101 Thunderbird/52.9.1 In-Reply-To: <1799156.3UefHMCHME@PointedEars.de> Content-Language: en-US Xref: csiph.com comp.lang.javascript:35559 On 03/09/2018 15:09, Thomas 'PointedEars' Lahn wrote: > 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?”. I do traverse up to the body HTML element, but when the body itself contains rgba(0, 0, 0, 0) then I can't use it. > 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.) I do calculations correctly, but the only trouble is to get what's really rendered. So, instead rgba(0, 0, 0, 0) in reality I see white background. I think Julio's right by saying that not defined explicitly background for body is an issue and that is something I will raise in the ASLint. Also https://www.w3.org/TR/WCAG20-TECHS/F24.html > Note also that this approach does not handle background images, and requires > additional work for non-rectangular shapes (e.g. round borders). If background-image is defined then calculating contrast ratio is impossible. -- Cezary Tomczyk http://www.ctomczyk.pl/