How to choose font color against yellow background?

Question

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?

Answer 1

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...

Answer 2

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.

Answer 3

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.

https://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.