top of page
  • Writer's pictureMark Elrod

Compare and Contrast

According to some estimates, there are around 300 million people with some form of color blindness in the world today. While this number may seem small when compared to the almost 8 billion people alive on earth today, it is still a significant number of people who have trouble differentiating between certain colors. To add to the complexity of the situation, there are a wide variety of visual impairments that can affect individuals’ ability to read text, differentiate between objects, and see outlines. Fortunately, this is a problem that has been around long enough for a lot of very smart people to come up with several guidelines and rules to follow when designing content that accommodates these visually impaired individuals. This week, I want to look into some examples of good, bad, and ugly attempts to create universally legible content, and talk about why this is such a big deal.


A colorblindness test

The Standards

There are three industry standard levels of accessibility provided by the Web Content Accessibility Guidelines (WCAG): A, AA, and AAA. An important part of earning these accessibility levels is using foreground colors that sufficiently contrast against their background colors. Meeting these accessibility levels means that people with visual impairments will have a much easier time interacting with your content, while failing to do so can alienate a surprisingly significant portion of your potential userbase. If you’re curious about what this looks like in practice, check out this free tool that tests how accessible color pairs are, and let me know about any color pairs you’re surprised aren’t accessible enough: https://webaim.org/resources/contrastchecker/


The Good

Slay the Spire's main menu
The contrast works beyond a shadow of a doubt!

Slay the Spire does one really cool trick to help ensure its menu text is legible. When light text has a dark outline (or dark text has a light outline), it maintains its clarity when placed on top of any background. This trick is present in both the menu text and the game name in the center of the screen, with small shadows providing the dark contrast that the light lettering needs to stand out from a multicolored background.


The Bad

Fortunately, I had a lot of trouble finding a game that truly and utterly failed to provide players readable text. Development teams everywhere are generally aware of the fact that if they can’t read their menus, then players definitely won’t be able to either, and take steps to ensure this doesn't happen. But that doesn’t mean things never slip through the cracks.


Civilization Beyond Earth's Steam banner art
Welcome to ID M ATIO DEYONn FARTH

In case you can’t read the above image, this is a screenshot of Sid Meier’s Civilization: Beyond Earth’s banner image on Steam. Having everything centered in the banner like this ensures players will always see the image and game name, regardless of the banner’s width, but comes with some significant downsides. The first is that “Sid Meier’s Civilization” is written in black text, and placed over an image of outer space. Black text on a very dark blue background is almost as unreadable as text comes, regardless of your vision. Similarly, “Beyond Earth” changes color to black towards the bottom of the letters, making each letter harder and harder to read the further down you look. This is a bad enough mistake that this has to have been thrown together towards the last minute before the deadline for the final banner image.


The Ugly

League of Legends is an incredibly popular game, with over 10,000,000 players logging in on any given day. With that large of a playerbase, it is extremely likely that a significant number of players are visually impaired in some fashion. For the most part, Riot Games does a decent job of presenting colorblind friendly options and interfaces, with their main color scheme being pale gold lettering on a dark blue background. Where they get in trouble though, is when they deviate from this strategy.


League of Legends home page
Hope you didn't want to know what's changed recently

There are several different tabs and pages in the League of Legends launcher including a “Home” page with news about the game, a “Teamfight Tactics” page with information about a popular League of Legends-based game mode, and a “Clash” page with information about the regular open tournaments players can participate in. The problems arise when these pages use custom backgrounds, such as the background for the “Overview” tab below. The menu items on the left are given a nice dark blue background, which fades away to let the artwork behind it shine, but it does so before the end of the menu items. These background images change periodically, and this month, that means that the pale gold menu items are put against white hair. Not only do the colors blend together, but the complexity of the background helps hide the “Patch Notes” tab.


There are a couple of ways Riot could fix this. One is to extend the dark blue background behind the menu, so that the tab names have a consistent color to contrast against. Another is to outline the tab names in a darker color, so that they more consistently contrast against any color background. Yet another option is to only use images that use dark colors at the top, so that the light text won’t blend in. Any of these fixes would improve the readability of the tab names for all League players, not just those who have trouble distinguishing colors.


In Conclusion

When preparing text to include in your game, website, or promotional images, be mindful of the background(s) said text is going to be presented on top of. Similarly, when preparing background images to put underneath text, keep the readability of the text in mind. It’s really that simple.


In the meantime, I hope I colored your opinion on accessibility a little, and I’ll see you next time!


15 views0 comments

Recent Posts

See All
bottom of page