1


I have a background image and some UILabels above it.
The background image can be changed to anything by the user, while I have to determine which color would be better to use in the UILabels, white or black?

The best example for this is the iOS 7 Home Screen.
When the background is dark, the text becomes white, and vice versa.
But, when the background is between dark and light, for instance: half image 100% white and the other half 100% black - the text becomes white and drop shadow effects are added so it will be readable.

The problem that I've been facing is how to indicate what type of an image is this?
Is it dark? Is it light? Is it between dark-light?
How can I turn this, which is so clear to humans into code?

I want to write the code by myself obviously, but I have no clue.
I started learning about contrast and brightness, yet I can't glue the pieces together.
Where should I start? Thank you so much!

Noam Solovechick
  • 1,127
  • 2
  • 15
  • 29

2 Answers2

10

Find the average color with this link

Then style your text

CGFloat red = 0.0, green = 0.0, blue = 0.0, alpha = 0.0;
[averageColor getRed:&red green:&green blue:&blue alpha:&alpha];

int threshold = 105;
//Formula for computing Luminance out of R G B, which is something close to luminance = (red * 0.3) + (green * 0.6) + (blue * 0.1).
int bgDelta = ((red * 0.299) + (green * 0.587) + (blue * 0.114));

UIColor *textColor = (255 - bgDelta < threshold) ? [UIColor blackColor] : [UIColor whiteColor];

something like this.

You could also use the link above to get the UIColor from the image and use matt's category for UIColor to get light or dark.

Look at this Question. Will help you for sure.

PS: I am Copying Code so that even if the post is deleted, information would be available

Community
  • 1
  • 1
Prince Agrawal
  • 3,619
  • 3
  • 26
  • 41
  • 3
    Dont copy the contents of another post. unless youre going to edit the code. A link is fine buddy. – Pavan Jan 07 '14 at 17:44
  • 1 up from my side too bro @pavan .. I've mentioned my intentions in my answer. Please let me know if its wrong. :) – Prince Agrawal Jan 07 '14 at 17:46
  • Hey, I read the answers but it seems the answers refer to background color, yet I have an entire image. Will getting the average color of the image be enough? Or an entire new algorithm is required? – Noam Solovechick Jan 07 '14 at 17:49
  • This answer suggests you to find average RGB components of your image & derive RGB for your text so that it would be visible. It may not be perfect for all the cases, but for most of the cases, its enough. – Prince Agrawal Jan 07 '14 at 17:51
  • @NoamSolovechick No need of other algorithm, try this. If it's not working, let me know – Prince Agrawal Jan 07 '14 at 17:54
  • Thank you so much! I'm sure this code works well, though I won't feel alright using this piece of code until I'll fully understand it. What bgDelta actually does to the color? Where the numbers 0.299,0.587,0.114 are from? Again, thank you so much for helping! :) – Noam Solovechick Jan 07 '14 at 18:01
  • Feel free to accept/upVote answer then ..:) @NoamSolovechick – Prince Agrawal Jan 07 '14 at 18:02
0

I've been using this to calculate the perceived brightness of a color and then changing my text color accordingly.

Michael Mangold
  • 1,741
  • 3
  • 18
  • 32