tigt/contrast-o-vision

Check accessible Web contrast in real-time

contrast-o-vision's Issues

Make the URL field work good

Turns out browser URL bars have decades of UX refinement tweaks behind them WHO KNEW

Get real server backend for progressive enhancement

Right now I'm between jobs and real poor, so I dread the idea of paying for a server if this were to get popular unexpectedly. But when I have the cash to do so, a server backend would provide:

• No mooching off httpbin

• Rock-solid shareable preview URLs

• More accessible filter toggle switch, instead of the checkbox hack

• Server-side UA sniff (ahem), because holy butts why is Blink so bad at <foreignObject>

  • This would also serve different HTML/styles for iOS, since its viewports do weird stuff

• X-Frame-Options/Content-Security-Policy frameblocking detection

• More meaningful error messages in general, since it wouldn't be limited by the same-origin policy

• Probably lots of other stuff I'm forgetting right now, but cursed when I realized there wasn't an accessible and performant way to achieve in static HTML

Give feedback if page fails to load in <iframe>

We don't get a specific error message because of the same-origin policy, but I think we can listen to the <iframe>'s error event and display something like:

That page errored while loading.

Why? Could be any of these:

• It has X-Frame-Options: DENY or a frame-ancestors Content Security Policy that prevents it from being embedded in <iframe>s.
• You typed the wrong URL.
• The network hiccuped or something. Computers are terrible.

Actually make the Contrast-O-Vision filter WCAG AA-compliant

The dirty secret: right now, it has a lot of false positives/negatives. I've been trying to to fix it for months, but even my reduced test cases baffle me.

I irresponsibly put this online in the hope that somebody calls me out on it and inadvertently points me towards fixing it.

Other filters?

Some other filter ideas I had:

• Only show contrasting edges: — i.e. don't layer the original underneath the edges.

• The big 3 colorblindnesses — one for each of RGB!

• Blurred vision — not wearing glasses, drunk, etc.

• Dim vision — age-related visual acuity degradation.

• Low vision — extreme dim/blur, for testing screen-readers along with vague visual context.

• Visual snow

• Other WCAG compliance levels/text sizes — by default it's body-text, level AA.

• Washed-out — cheap Android screens, sunlight, etc.

Unsupported browser warning

IE and Edge don't support SVG <filter> references on HTML. Edge at least supports <foreignObject>, so that might work.

Safari allegedly works, but it produces terrifying visual artifacts instead. For now, the only engines that display a useful result are Gecko and Blink.

I wonder if I can replicate this using CSS filter shorthand? That might solve a handful of issues: Edge, Safari bugs, and lack of hardware-acceleration on Blink.