Quick Tip: Check Your Color Contrast

Today I have another quick tip to keep in mind when developing your game UI and visual assets: color contrast.

By color contrast, I mean that you should make sure that the colors of your text, icons, or any important visual assets in your game stand out against any background colors.  If the background and foreground colors are too similar, they will be hard to see.  

For example, check out the screenshot below: 

For most people, the orange text against a bright red background is very hard to read, especially if they are viewing this image on a small phone screen.

On the other hand, consider the game screenshot below, showing a message box:

The dark brown text stands out against the light brown or tan background, making the text easier to read.

When you are designing the visuals for your game, you want to things easy for your player to see.  This may seem like an obvious tip, but sometimes you might not be sure if you have chosen a good set of contrasting colors, especially if your vision might be sharper than another viewer's.

To help you determine whether your colors are a good contrast, you can use some of the free internet color contrast checker tools, such as the tool from Coolors. For example, in the screenshot below, I entered the text and background color codes for the bad contrast image into the tool (if you need help finding your color codes, check my last post):

As you can see, the tool gave the color combination a very poor rating for contrast.  

Now here is the contrast report for the message box background and text:

This time, my combination got a much better rating.

Color contrast is a big deal in games, but is also an important factor to consider if your software of any kind needs to meet accessibility standards. For example, in the U.S., federal government websites must meet strict accessibility requirements.  There are many tools and resources, including color blindness simulators, available to check your color contrast from an accessibility point of view.