Warning when settings are low-contrast for QR codes

[rugk]

There should be a warning setting when the contrast of the background/foreground colors is too low. It should say that scanning QR codes with such a low contrast may not be possible.

I guess as one needs to use some color comparison, this issue could be a bit complicated and maybe a new library needs to be introduced. So sharing your ideas before making a PR would be appreciated.

Requires:

• the warning error message is not completely, so this would need. As with the others, use FF Photon icons.
• warning message should be shown immediately, but should not block saving the information; i.e. just show it, but
• warning message may be dismissable or not (I'd rather prefer not, as the warning is obviously always applicable.) If not, it must be shown again when the settings are opened another time, of course.
  Or you could save the dismissable status, but that would be some more work.

[ENT8R]

Does https://stackoverflow.com/a/9733420/8575129 fit your needs?

[rugk]

On the first look, lookd good. The linked repo is rather not so good as it depends on jQuery and is not really packed as a module…

BTW as for searching for stuff: Maybe you could also look for the accessibility contrast checkers (you know, these who tell you it's AAA, AA or A, …). Maybe they also some clever up-to-date algos or libraries.

[ENT8R]

Maybe this is a suitable accessibility contrast checker: https://github.com/jxnblk/colorable (but the last commit was about 3 years ago 😏) There is even a list of a whole bunch of tools, but it does not really contain what we want IMO: https://github.com/prettydiff/a11y-tools

[rugk]

Okay, but the main source code for that "colorable" looks quite nice and is not too much – problem is it depends on some stuff there.

Mhh, can't we have an easier version?

I mean, if it works well… the Stackexchange answer might be sufficient and easy enough to maintain – just some mathematical stuff. 😆

[LMLB]

When it comes to LeaVerou/contrast-ratio, the actual color contrast calculation code is in color.js (rather than contrast-ratio.js which seems to be about managing the user interface on the website).

[rugk]

Okay, well, still ~200 LOC for just a contrast calculation? And it also seems to include some "toString" code and other unrelated code. (And is intended for use by underscore JS as it seems to extend –) All this is stuff we don't actually need. The only thing we need is a simple contrast calculation returning one value…

[LMLB]

The underscore in that code is just a local variable and has nothing to do with underscore.js. Your other point is fair and I made a simple (~10 LOC) function based on that code: https://gist.github.com/LMLB/47cb7997f9e7e4cf1f1052f80f93b195

[rugk]

Oh, thanks!
BTW, did you actually saw this Stackoverflow answer linked before? Because the code looks similar at the first glance… (though your code is better documented 😉)

If you think the Stackoverflow code is better, then integrate it in your code, if needed.
If you think your code is better, then maybe post it on Stackoverflow (if you like, of course). Or maybe even create a tiny lib…

[rugk]

Done in #86