Mobile app version of vmapp.org
Login or Join
Lee3735518

: How to choose font color against yellow background? There are similar questions like this and this. However, this question is different because of different design constraints. This is the interface

@Lee3735518

Posted in: #Color #ColorTheory #Fonts #InterfaceDesign #Ios

There are similar questions like this and this.

However, this question is different because of different design constraints.

This is the interface for our game. When the user solves a word, we show a yellow star as with the word MOM. (Ignore the distorted share and menu icons, please!)



We are exploring alternatives for highlighting a solved word. The star sticking out from the bottom feels unclean.

Our current choice is to integrate a yellow glow effect under the letters -- similar to this white glow:



Instead of white, our glow will match the yellow color of the star, but our designer is struggling to find a font color that matches the rest of the design.

The linked questions suggest contrast as the key to showing fonts on a light-colored background, but black, brown, and gray clash with the other colors. White fails because the contrast isn't high enough.

So what's the best approach to finding a high-contrasting color that also complements other colors in the design?

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Lee3735518

3 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi706

Does the type have to stay white?

You could merely set the type to yellow.. removing the star.



Or if you wanted that outer glow, yellow type with a white glow...

10% popularity Vote Up Vote Down


 

@Chiappetta793

I recently ran into this shot on dribbble and found it really interesting in terms of getting a specific color to fit into a color scheme:

She uses different photoshop blending modes to overlay the main color of your design with the color you are looking for (a.k.a. yellow), and play with the opacity of the main color layer until you get something that looks right.
dribbble.com/shots/166246-My-Secret-for-Color-Schemes
As far as the glow goes, I personally would think about just changing the colors of the green blocks themselves to yellow, or one green color vs. alternating greens to show they belong together... just a thought. If you did use a glow I'd put it around the letter blocks as a whole instead of individual letters.

10% popularity Vote Up Vote Down


 

@Kevin459

If I understand your question, the problem is that colours bright enough to contrast with the background tend to blend in with the white?

You could potentially solve this by having a slight 'hold-off' around the text before the outer glow starts. This will retain the contrast between the letters and the background, while allowing the glow to show that the letters are highlighted.

Something like this:



I've used a simple glow for illustration purposes, but i think it would look even better with the kind of fancy glow that you are proposing. If you could animate that glowing effect then you could really be on to something!

Hope this helps.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme