<p>I'm researching highlighting accessible color contrast via filter operations. I have a test screenshot of SRGB hex values compared with <a href="https://www.w3.org/TR/WCAG20/relative-luminance.xml" rel="nofollow noreferrer">WCAG's official contrast algorithm</a>:</p>

<p><a href="https://i.sstatic.net/iiLxk.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/iiLxk.png" alt="Text on various bands of color, with the contrast ratios listed next to them. They descend from maximum contrast to minimum contrast."></a></p>

<p>I converted it to its luminosity:</p>

<p><a href="https://i.sstatic.net/xBHPX.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/xBHPX.png" alt="The previous image, with the colors changed to grayscale using a luminosity algorithm, not brightness."></a></p>

<p>Then an edge detect:</p>

<p><a href="https://i.sstatic.net/jM5nb.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/jM5nb.png" alt="The edge detection results no longer smoothly progress from maximum contrast to minimum contrast, instead having asymmetrical progression and discontinuities."></a></p>

<p>This no longer looks like a smooth progression; there's a noticeable reversal between, say, <code>#f00</code> and <code>#777</code>. And after applying a threshold to remove insufficient contrast, it seems like one side is favored out of proportion.</p>

<p>I have a few leads, but not enough understanding of color theory to know which to attack:</p>

<ul>
<li>Is it a byproduct of how browsers antialias text?</li>
<li>Am I in the wrong color space?</li>
<li>I tried inverting the input and averaging its results together with the original's results, but I'm not seeing a difference other than which way the ringing travels.</li>
<li>Similarly, switching the kernel matrix's signs doesn't change the progression.</li>
</ul>

<hr>

<p>These images are from The GIMP's filter operations, but ultimately I aim to create an SVG <code>&lt;filter&gt;</code> to dynamically highlight insufficient color contrast in web pages. I'm sure I'm not articulating with the right terminology, so please ask for more context if I'm unclear.</p>

CC BY-SA 3.0
2017-04-02T02:20:31.480Z
How are you calculating the contrast ratio after you perform the edge detection? What results are you getting? Also did you leave out half a paragraph right below the images? There's a sentence fragment at the end.
user1118321
CC BY-SA 3.0
2017-04-02T03:00:12.897Z
@user1118321 I moved it to the bulleted list at the end, nice catch.
Tigt
CC BY-SA 3.0
2017-04-03T10:43:54.860Z
How does your luminosity conversion work? It seems the contrast labelling does not match the actual luminosity output you have made (the red F00 is much darker than the grey 777, even though the label indicates that the F00 should have a higher contrast ratio)..
PaulHK
CC BY-SA 3.0
2017-04-03T12:37:47.213Z
@PaulHK I bet you're onto it. It's the browser's default `luminanceToAlpha`, which is probably fouling up somewhere along the line.
Tigt
CC BY-SA 3.0
2017-04-03T15:38:00.563Z
Indeed, it's typical for luminance to give green the most weight and blue the least. For example, [BT.709 luma](https://en.wikipedia.org/wiki/Rec._709#Luma_coefficients).
Olivier
<color><edge-detection><filtering>
Why does this edge detect show different results for the same color combinations?
Tigt
# Why does this edge detect show different results for the same color combinations?

(Asked by: username_0 on 2017-04-01)

I'm researching highlighting accessible color contrast via filter operations. I have a test screenshot of SRGB hex values compared with [WCAG's official contrast algorithm](https://www.w3.org/TR/WCAG20/relative-luminance.xml):

[![Text on various bands of color, with the contrast ratios listed next to them. They descend from maximum contrast to minimum contrast.](https://i.sstatic.net/iiLxk.png)](https://i.sstatic.net/iiLxk.png)

I converted it to its luminosity:

[![The previous image, with the colors changed to grayscale using a luminosity algorithm, not brightness.](https://i.sstatic.net/xBHPX.png)](https://i.sstatic.net/xBHPX.png)

Then an edge detect:

[![The edge detection results no longer smoothly progress from maximum contrast to minimum contrast, instead having asymmetrical progression and discontinuities.](https://i.sstatic.net/jM5nb.png)](https://i.sstatic.net/jM5nb.png)

This no longer looks like a smooth progression; there's a noticeable reversal between, say, `#f00` and `#777`. And after applying a threshold to remove insufficient contrast, it seems like one side is favored out of proportion.

I have a few leads, but not enough understanding of color theory to know which to attack:

* Is it a byproduct of how browsers antialias text?
* Am I in the wrong color space?
* I tried inverting the input and averaging its results together with the original's results, but I'm not seeing a difference other than which way the ringing travels.
* Similarly, switching the kernel matrix's signs doesn't change the progression.

---

These images are from The GIMP's filter operations, but ultimately I aim to create an SVG `<filter>` to dynamically highlight insufficient color contrast in web pages. I'm sure I'm not articulating with the right terminology, so please ask for more context if I'm unclear.

**Tags:** color, edge-detection, filtering

> **Comments:**
> **username_1**: How are you calculating the contrast ratio after you perform the edge detection? What results are you getting? Also did you leave out half a paragraph right below the images? There's a sentence fragment at the end.  
> **username_0**: @username_1 I moved it to the bulleted list at the end, nice catch.  
> **username_2**: How does your luminosity conversion work? It seems the contrast labelling does not match the actual luminosity output you have made (the red F00 is much darker than the grey 777, even though the label indicates that the F00 should have a higher contrast ratio)..  
> **username_0**: @username_2 I bet you're onto it. It's the browser's default `luminanceToAlpha`, which is probably fouling up somewhere along the line.  
> **username_3**: Indeed, it's typical for luminance to give green the most weight and blue the least. For example, [BT.709 luma](https://en.wikipedia.org/wiki/Rec._709#Luma_coefficients).  

---

## 0 answers

