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:
I converted it to its luminosity:
Then an edge detect:
This no longer looks like a smooth progression; there's a noticeable reversal between, say,
#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.