BackgroundCheck(kennethcachia.com)
kennethcachia.com
BackgroundCheck
http://www.kennethcachia.com/background-check/
29 comments
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.
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.
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.
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.
> 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.
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.
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.
In graphics design I usually pick the colour that contrasts most with the background, and use a text-shadow (looks better than an outline, anyway) in the other colour. Use none or very little shadow blur.
What you should most definitely not do, is give each character (or word) its own colour depending on the background. As others pointed out, this would be a pain to implement, wrapping everything in spans etc, but most importantly it also just looks terrible.
Though the very first step is to simply try and see if you can avoid the situation entirely :) [which may be harder if the images are user supplied]
What you should most definitely not do, is give each character (or word) its own colour depending on the background. As others pointed out, this would be a pain to implement, wrapping everything in spans etc, but most importantly it also just looks terrible.
Though the very first step is to simply try and see if you can avoid the situation entirely :) [which may be harder if the images are user supplied]
I disagree although my first thought was exactly the same; how do you solve the problem of half of some text being on a dark background and the other half on a lighter area.
I see three solutions to the problem.
The first is not so elegant. If you have text then you wrap each letter in a span tag and apply the JS to each span. Very ugly, not practical, scalable, etc. but it works. If you've got dynamic text coming from a backend then just forget it. This solution is only viable for static content and even then it's not great.
You could implement this as instructed and then just give the text an outline of the exact opposite color. Chances are your text will not equally overlap both a light and dark background so this wouldn't look too bad at all.
The third solution is to just know your backgrounds very well and choose element placement very carefully so that no matter what background you have your text ends up in an all light or all dark part of it. If I had Medium style app where users get to choose the background image of an element that gets text laid over it this is what I might be okay with doing and accepting that not all the background images will lend themselves well to this technique.
Or... There's a fourth way that I've actually had to consider in one of my projects. Until I saw this post I didn't have the final piece of the puzzle but now I do. I would take the ability to dynamically change the text color based on a background and add to it a translucent background to the text with some padding to make it a blocky thing - kind of like how ios7 handles it in notification center.
The idea is that if you have an element over a mostly light background you give that text itself a light background with about 70% - 80% opacity and the text color dark. This way you're covered even if part of the text is on top of some random dark part of the image background. It's the same idea as using a text outline except its more cross-browser compatible and I personally think it looks better.
But like I said, if you're not in control of the text and/or background there probably isn't going to be a bullet proof solution and you'll have to accept trade offs but if you are in total control then there's no reason you can't mitigate these issues completely.
I see three solutions to the problem.
The first is not so elegant. If you have text then you wrap each letter in a span tag and apply the JS to each span. Very ugly, not practical, scalable, etc. but it works. If you've got dynamic text coming from a backend then just forget it. This solution is only viable for static content and even then it's not great.
You could implement this as instructed and then just give the text an outline of the exact opposite color. Chances are your text will not equally overlap both a light and dark background so this wouldn't look too bad at all.
The third solution is to just know your backgrounds very well and choose element placement very carefully so that no matter what background you have your text ends up in an all light or all dark part of it. If I had Medium style app where users get to choose the background image of an element that gets text laid over it this is what I might be okay with doing and accepting that not all the background images will lend themselves well to this technique.
Or... There's a fourth way that I've actually had to consider in one of my projects. Until I saw this post I didn't have the final piece of the puzzle but now I do. I would take the ability to dynamically change the text color based on a background and add to it a translucent background to the text with some padding to make it a blocky thing - kind of like how ios7 handles it in notification center.
The idea is that if you have an element over a mostly light background you give that text itself a light background with about 70% - 80% opacity and the text color dark. This way you're covered even if part of the text is on top of some random dark part of the image background. It's the same idea as using a text outline except its more cross-browser compatible and I personally think it looks better.
But like I said, if you're not in control of the text and/or background there probably isn't going to be a bullet proof solution and you'll have to accept trade offs but if you are in total control then there's no reason you can't mitigate these issues completely.
A reasonable solution to this might be to determine when the number of pixels that'd match dark v light is near the midpoint, adding a text-shadow (for text) or box-shadow (everything else) of 1px with the more dominant of the two colors.
Edit: Looked closer at the library, if he just added dark-mid or light-mid styles when close, the user can implement the appropriate visual differentiator. Should be good.
Edit: Looked closer at the library, if he just added dark-mid or light-mid styles when close, the user can implement the appropriate visual differentiator. Should be good.
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.
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.
It'd useful for overlaying things on maps, or tagged things in photos etc.
For designers it's not very useful of course.
For designers it's not very useful of course.
did you try half text in white panel and half in the third? it turns BLUE!! Ingenious. So they got the right direction, but they have to fix the sensing on that because yes, it still has trouble with the lamp
Another issue I see is that it doesn't take into account any of the elements which are already in position. Placing the small circle over the large circle hides it.
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.
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.
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
[2] http://people.sc.fsu.edu/~jburkardt/isu/reu_2001/voronoi_pap...
[1] http://en.wikipedia.org/wiki/File:Delaunay_Voronoi.svg
[2] http://people.sc.fsu.edu/~jburkardt/isu/reu_2001/voronoi_pap...
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.
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.
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.
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...
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.
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?
http://imgur.com/pQjoQ White text with black outline can be read on any color.
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.
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.
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-contr...
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?
Elements won't drag Firefox 23.0.1
It worked fine for me with Firefox 23.0.1 on OSX.
They do drag in Firefox 24.0.
Your demo does not work at all on mobile. I suggest you try pep.JS for drag and drop.
Elements don't drag from where I click. They seem to snap.
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.