
BackgroundCheck - zzzsh
http://www.kennethcachia.com/background-check/
======
MarcScott
I'll start by saying that I think this is pretty cool and clever, and pretty
useful for text. It works great on Safari.

I should however add, that while moving the elements over the picture, I
didn't once lose sight of my cursor, as it is black with a white outline,
which seems to be a much simpler solution to the problem.

~~~
georgemcbay
Agree 100%, especially when it comes to the text elements.

Even if they expanded the system such that it were capable of automatically
creating spans in the text to adjust from white to black depending upon the
background color under specific letters, having the text switch from black to
white and back again along with the background would look horrible and would
be terrible for reading. But using high contrast outlines works fine on just
about anything, which is why that is the go-to for all "meme" photos (Impact
white with black outline). While I would suggest avoiding Impact unless you
are actually trying to make a "meme" association, this sort of high contrast
outlined text is still by far the best way to handle text over images that may
themselves be high contrast.

Sadly, true text outline support is inexplicably very bad among browsers, at
least as of the last time I checked, though in CSS3-capable browsers you can
cheese outlines using textshadow.

~~~
waster
I'd add that though we've adapted to the look of a cursor, the designer in me
cringes at the thought of outlined text (though I'm willing to allow that
there are probably applications of this that work elegantly; I just can't
picture any).

Sometimes the answer might be yet a different color of text (not black or
white), although that too has design downfalls.

But all that said, tools to help text and other elements adapt to background
images are mighty helpful. I'd definitely consider using this, even as is.

~~~
ewolf
> I'd add that though we've adapted to the look of a cursor, the designer in
> me cringes at the thought of outlined text (though I'm willing to allow that
> there are probably applications of this that work elegantly; I just can't
> picture any).

Outlined text is quite common in videos (e.g. for subtitles or credits). The
outline doesn't disturb at all if done properly — it doesn't have to be thick,
a subtle shadow will usually suffice.

------
andrewvc
This is a nice step, but not good enough for practical use. Put the text half
on the black lamp, half off, and you get 1/2 invisible text. While
interesting, it's not reliably accurate enough to use in any sort of automated
fashion.

~~~
emiliobumachar
If it implemented some requirements of your choosing with perfect accuracy,
how would you go about automating any work other than flipping colors to
contrast with background?

I'm not in the graphics design business, but I could only imagine applying
that tool manually, in an interactive see-if-it's good environment much like
the demonstration.

~~~
andrewvc
It'd useful for overlaying things on maps, or tagged things in photos etc.

For designers it's not very useful of course.

------
matthuggins
Didn't seem to do anything. I'm on Chrome 29.0.1547.65.

 __Edit __: I tried again, this time releasing the elements. It sounded like
it should be live updating as I 'm dragging in the description, but it's only
when you DROP the elements, not DRAG the elements.

------
crb002
I would do it in RGB space. Run kmeans to get a set of Voronoi cell centroids,
5-6 should be good. Then take the Delaunay triangulation of that and pick a
color midpoint between Voronoi neighbors that maximizes the distance sum from
all the Voronoi generator points.

[1]
[http://en.wikipedia.org/wiki/File:Delaunay_Voronoi.svg](http://en.wikipedia.org/wiki/File:Delaunay_Voronoi.svg)

[2]
[http://people.sc.fsu.edu/~jburkardt/isu/reu_2001/voronoi_pap...](http://people.sc.fsu.edu/~jburkardt/isu/reu_2001/voronoi_paper/voronoi.pdf)

------
angersock
So, I'd propose a modification to handle text:

Color is part of the battle, but the real killer is having things of roughly
the same frequency behind the text--that is to say, having fine lines and
detail of about the same resolution as the letters of the text. That seems to
be what makes it harder to pick out words.

So, if you could maybe do a 2D FFT or DCT on the area the text would take up,
and if the frequencies you find are beyond a certain threshold, add a
background color for the text, maybe opacity based on how close in frequency
or harmonics the image is to the text.

------
reginaldjcooper
This is cool but I think the best general solution is bordered text. You can
see some edge cases where this solution fails for half the text, like the edge
between dark and light on the tub.

------
DigitalSea
It appears this script uses the Canvas element to determine the colour to make
the overlaying text or element. It might be worth noting in the README that
for images to work being loaded from a CDN like Amazon Cloudfront or Amazon S3
that the header access-control-allow-origin needs to be set to _. So like-so:
access-control-allow-origin:_ — otherwise your Canvas is tainted and you can't
get the image data out of it due to security restrictions...

------
MarkHarmon
This is cool, but I found a small defect. If you drag the dot over the images
while they are loading, the color change doesn't take place. It might be
necessary to call your function after images have been loaded on your demo
page.

------
gbog
Hehe, nice. I tried to put the small dot on the big one, both had the same
dark hue, so I guess it works only on background, not on other placed
elements, right?

------
joeframbach
[http://imgur.com/pQjoQ](http://imgur.com/pQjoQ) White text with black outline
can be read on any color.

------
jogzden
This is a pretty cool concept, but it still needs a bit of work. While I agree
with black borders around the text, I think it seems to meme-like. Maybe work
on getting a shadow around the text when it is over multiple colours (e.g. the
third picture near the concentration of lights). Other than that, it's a great
concept, and I'd love to use it.

------
NKCSS
Fun idea, but poor execution. Why would you sample an area 4x or more
unrelated to the data at hand? You should calculate the tightest bounding-box
for your object and then apply the code, or just hit-test the non-transparant
part of the current element, because you can still overlay items white on
white, as long as the parts around it are dark enough.

------
joshfraser
This reminds me of Kevin Hale's post on Calculating Color Contrast for Legible
Text:

[http://www.particletree.com/notebook/calculating-color-
contr...](http://www.particletree.com/notebook/calculating-color-contrast-for-
legible-text/)

------
sureshgv
Its good. I kept small drop overlapped on big drop on first picture. Finally,
I saw on black drop only. Is should show black drop with white drop at center
right?

------
Emass12
Elements won't drag Firefox 23.0.1

~~~
erichurkman
It worked fine for me with Firefox 23.0.1 on OSX.

------
woah
Your demo does not work at all on mobile. I suggest you try pep.JS for drag
and drop.

------
RobotCaleb
Elements don't drag from where I click. They seem to snap.

