1
$\begingroup$

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:

Text on various bands of color, with the contrast ratios listed next to them. They descend from maximum contrast to minimum contrast.

I converted it to its luminosity:

The previous image, with the colors changed to grayscale using a luminosity algorithm, not brightness.

Then an edge detect:

The edge detection results no longer smoothly progress from maximum contrast to minimum contrast, instead having asymmetrical progression and discontinuities.

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.

Improve this question
$\endgroup$
5
  • $\begingroup$ 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. $\endgroup$
    – user1118321
    Apr 2, 2017 at 2:20
  • $\begingroup$ @user1118321 I moved it to the bulleted list at the end, nice catch. $\endgroup$
    – Tigt
    Apr 2, 2017 at 3:00
  • 1
    $\begingroup$ 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).. $\endgroup$
    – PaulHK
    Apr 3, 2017 at 10:43
  • $\begingroup$ @PaulHK I bet you're onto it. It's the browser's default luminanceToAlpha, which is probably fouling up somewhere along the line. $\endgroup$
    – Tigt
    Apr 3, 2017 at 12:37
  • 1
    $\begingroup$ Indeed, it's typical for luminance to give green the most weight and blue the least. For example, BT.709 luma. $\endgroup$
    – Olivier
    Apr 3, 2017 at 15:38

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.