Loading bar color clashes on Checkmate malicious blocked pages

[seanh]

When a page is blocked because Checkmate thinks it's malicious the color of the loading bar is very similar to the background color of the page. Example:

https://via.hypothes.is/https://example.com/malicious

Slack thread: https://hypothes-is.slack.com/archives/C1M8NH76X/p1621360348014500

See also: Loading bar doesn't finish on Checkmate pages

Suggestions

Just use a different color

As long as the loading bar doesn't dynamically adapt its color it's always going to clash with some pages. But we should choose a color that doesn't clash with our own pages. Blue or purple are common loading bar colors.

Dynamically change the color

Pick two very different colors, say red and blue. Use a red loading bar by default. Detect the background color of the page and, if it's too similar to the red (color comparison algorithm required) then swap to the blue instead.

If our two color choices are far enough apart then a site can't be overly similar to both at once.

May require the loading bar to actually change color mid-load, when the website's background color appears.

Other ideas?

I think there might be better ways to dynamically adjust a loading bar's color based on the color behind it.