Colour Blind Accessibility in Games

There are a number of ways to ensure a game is easily playable by colour blind players without becoming an expert on the condition. 

– ‘Understand where you are using colour as information in your game. This could be character colours, UI, puzzle elements, lights, items or even text’. ⁽¹⁾ 

– ‘Use colour blind preview tools/simulators to better understand how colour blind players will experience your game’. ⁽¹⁾ 

– ‘Don’t just use colour for presenting information. Consider using sound, shapes and animations to support the information’. ⁽¹⁾ 

– ‘If you cannot avoid using text colours for information, ensure there is another visual element present to inform the player, such as an icon, image or border. Don’t be tempted to make the text itself more visually complex, as this can make it harder to read for players with dyslexia or reduced vision’. ⁽¹⁾ 

– ‘If you cannot avoid using colour to distinguish information, then consider developing a colour blind mode for your players to use. The best colour blind modes allow the player to choose the colours of the most important elements. For example if your game is a team-based game, let the player set the colours for ‘my team’ and ‘opposing team”. ⁽¹⁾ 

– ‘Giving the player control over colours doesn’t just mean they can distinguish elements form each other, but they can make them distinguishable from everything else in the game. If you have a red team and a blue team in a brown environment the teams will be distinct from each other, but the red team will likely be hard for colour blind players to see against the environment’. ⁽¹⁾ 

– ‘If you have a large artistic team, create colour presets that they can assign textures to. This will allow you to manage the colour information of your products as a whole and work it into your colour blind modes’. ⁽¹⁾ 

– ‘In multiplayer games, character customisation often allows colour blind players to create a character silhouette that they can recognise. For example, I don’t need to know that my character is green, I just need to know that it’s the one wearing the top hat’. ⁽¹⁾ 

– ‘Make your colour options easy to find in the menus. Either have a specific accessibility menu or include them in the top-level game graphics options. Make it as easy as possible for players to find the options that can make the experience playable’. ⁽¹⁾ 

– ‘Finally, talk about your features with colour blind players to see if they’re usable. Remember that some colour features may be completely invisible to them, so be sure to explain the gameplay intentions of your features, systems and art’. ⁽¹⁾ 

References 

(1) Douglas Pennant. (2020). Color-Blindness Accessibility Guide 
Available: https://caniplaythat.com/color-blindness-accessibility-guide/.  
Last accessed 14th Nov 2020. 

Colour Blindness in Games

From completing puzzles to distinguishing enemies from allies, colour is implemented for a vast range of purposes in games. So what happens when 1 in 12 men and 1 in 200 women are affected by colour blindness? A large number of games have options in their settings that cater for their colour blind players. 

Filters 

‘Perhaps the most common way of implementing colour blind accessibility in is including modes for the different types of colour blindness via a whole-screen filter. This is meant to target the problem colours for colour blind people; however, these filters tend to oversaturate the entire colour palette, resulting in some undesirable colours’. ⁽¹⁾ Here are some examples:  

Call of Duty 

Originally COD’s colour blind settings would only effect its HUD and map but it’s 2014 release, Advanced Warfare, introduced filters for gameplay too. 

‘Overall, the colour palette seems unchanged; there is some slight subtle discolouration with certain aspects of the map. The most noticeable difference, is the colour of the stairs through the scope of the gun, which appears more purple [than red] with colour blind mode enabled’. ⁽¹⁾ The difference is also apparent in the sky as it has a much more green tone in the colour blind mode. 

colour blind left / default right 

The colour blind mode in Ghosts is much more noticeable. As shown in the image below, the red tones are purplish when colour blind mode is enabled. For the majority of cases, red and green colours are too similar so ‘colour blind mode adds a tinge of reddish bright pink to help the players differentiate between the two [but] this comes off as unnatural, even to those with colour blindness’. ⁽¹⁾ 

colour blind left / default right 

Conclusion 

‘Whole screen filters are, typically, not the best approach to colour blind accessibility. 
– Compressing the entire colour palette pushes hues away from the problematic areas and bunches them closely up against other hues, swapping colour clashes for other colour clashes. 
– Changing all of the colours that are distinguishable to those with colour blindness makes the game look bizarre and unnatural. 
– Do not alter that which does not need to be altered. 
– Help the player distinguish between vital information necessary to play the game. 
– A player should not experience colours in games differently than they perceive them naturally in the world’
. ⁽¹⁾ 

I am inclined to agree with the above conclusion. The unrealistic colours can be distracting and disorienting for players, especially if they already struggle with colour differentiation. The drastic changes to environment colour palettes is unnecessary and hinders gameplay more than it helps. 

DOOM 

DOOM uses the same idea of a filters that cover the HUD, map and gameplay. ‘DOOM inherently uses a lot of reds; notice how turning on deuteranopia mode drowns all of these out, which essentially makes all the colours bland and muted’. ⁽¹⁾ 

colour blind bottom / default top 

Customisable Colours 

‘Another way to implement colour blind accessibility in video games is to include preset or customisable colour combinations, based on types of colour blindness, for representing different types of vital information in the game. This method tends to receive more favourable feedback from those with colour blindness since it only induces changes in colours that are problematic without altering the rest of the game’s colour palette’. ⁽¹⁾ 

Battlefield 4 

‘Battlefield 4 changes the colours of specific essential visual indicators, such as the colour of UI elements related to the player’s squad, team and enemy. Additionally, as many people do not know their classification of colour blindness, the game instructs players: “If colour blind, choose the team colours that differentiate the most among each other”‘. ⁽¹⁾ 

Destiny 

‘Similar to Battlefield 4, Destiny offers preset colour palettes for these three types of colour blindness’. ⁽¹⁾ 

Conclusion 

‘Ideally, provide the option to let players select and customise colours for vital information. 
– These can be applied to outlines, health bars, icons, names, object indicators, etc…
– One size does not fit all. 
– There are varying degrees of colour blindness, so customisation can offer a personal and, ultimately, more optimal experience’
. ⁽¹⁾ 

I fully agree with this statement. Less is not more when it comes to accessibility and offering players the ability to customise their experience to their specific needs or preferences is a huge plus for a game. 

Iconography 

‘Perhaps the best approach to colour blind accessibility is including iconography as a form of supplementary conveyance. While it is always best practice to convey information via multiple methods (eg: audio, visual and textual conveyance), is is not always plausible. It is imperative that vital game information not be conveyed solely by colour, as it colour negatively impact the experience of a player who struggles to see a specific colour’. ⁽¹⁾ 

Grand Theft Auto V 

‘GTA V, as well as many of the games in the GTA series, include icons as a form of conveyance. Although there is a colour assigned to specific icons, colour alone is not relied upon to understand what they mean’. ⁽¹⁾ 

Hearthstone 

‘In a 2016, changes were made to the card collection UI on Hearthstone. ‘While it may be possible that these changes are purely aesthetic and were not implemented with usability in mind, there are now colours associated with specific heroes for each of your deck. In addition to these colours, Blizzard also incorporated each hero’s symbol used on the tabs of the card collection UI. Again, including this iconography not only allows the player to make an association between the hero/colour/icon, but not rely solely on colour as the only source of information’

Conclusion 

‘Avoid relying on colour alone (by adding symbols, text, varying enemy design, etc.) 
– If not possible, include a simple colour palette that can be used as a single-colour choice that is not problematic for those with colour blindness (eg, dark orange/light blue). 
– If neither of these are possible, a brief review of the game aspects that absolutely need to be differentiated in order to successfully play the game (eg, teammates vs enemies) can be done to decide if specific UI/gameplay elements can be modified’
. ⁽¹⁾ 

I like the idea of symbols to indicate points of interest or icons but they can be difficult to read in certain situations, such as fast paced multiplayer shooters. Icons can be great but, for me personally, they would have to fit the genre and pacing of the game to be effective. 

References 

(1) Bill Hardin. (2016). Colorblind Accessibility in Video Games – is the industry heading in the right direction?. 
Available: https://www.gamersexperience.com/colorblind-accessibility-in-video-games-is-the-industry-heading-in-the-right-direction/
Last accessed 14th Nov 2020.

What is Colour Blindness?

As mentioned in the summary of my previous project, I would like to research into the effects of colour blindness on colour differentiation in games. I need to learn more about this condition and how it can be considered when designing UI to be more inclusive.

What is Colour Blindness?

Dictionary.com defines colour blindness as: 
The ‘inability to distinguish one or several chromatic colours, independent of the capacity for distinguishing light and shade’. ⁽¹⁾

Gamasutra states that ‘colour is perceived by the brain as a result of light rays reflecting off objects and hitting the retina of the eye. However, different colours can have different biological effects and not all people see colour the same’. ⁽²⁾

How Does Colour Blindness Work?

‘In the [eye’s] retina, there are two types of cells that detect light. They are called rods and cones. Rods detect only light and dark and are very sensitive to low light levels. Cone cells detect colour and are concentrated near the centre of your vision. There are three types of cones that see colour: red, green and blue. The brain uses input from these cone cells to determine our colour perception.

Colour blindness can happen when one or more of the colour cone cells are absent, not working or detect a different colour than normal. Severe colour blindness occurs when all three cone cells are absent. Mild colour blindness happens when all three cone cells are present but one cone cell does not work right’. ⁽⁴⁾ 

Types of Colour Blindness

There are multiple types of colour blindness in which specific colour perceptions vary. 

Trichromacy is classed as ‘normal vision [and] uses all three types of light cones correctly’. ⁽³⁾ 

Dichromacy is where ‘only two types of light cones are able to perceive colour’. ⁽³⁾ 

The image below shows the comparison between trichromats (people with normal vision) and dichromats (people with colour blindness).

Deuteranopia

Deuteranopes are more likely to confuse:
1. mid reds with mid greens
2. blue greens with grey and mid pinks
3. bright greens with yellows
4. pale pinks with light grey
5. mid reds with mid browns
6. light blues with lilac

Protanopia

Protanopes are more likely to confuse:
1. black with many shades of red
2. dark brown with dark green, dark orange and dark red
3. some blues with some reds, purples and dark pinks
4. mid greens with some oranges

Tritanopia

Tritanopes are more likely to confuse:
1. light blues with greys
2. dark purples with black
3. mid greens with blues
4. oranges with reds

Monochromia

The image above shows an extremely rare condition known as Monochromacy (Achromatopsia), in which a person ‘can see no colour at all and their world consists of different shades of grey ranging from black to white. Achromatopsia is extremely rare, occurring only in approximately 1 in 33,000 and its symptoms can make life very difficult. Usually someone with achromatopsia will need to wear dark glasses inside in normal light conditions’. ⁽³⁾

References 

(1) Dictionary. (2020). Colour Blindness. 
Available: https://www.dictionary.com/browse/color-blindness?s=t
Last accessed 1st Nov 2020.

(2) Herman Tulleken. (2015). Color in Games: an in-depth look at one of game design’s most useful tools. 
Available: https://www.gamasutra.com/blogs/HermanTulleken/20150729/249761/Color_in_games_An_indepth_look_at_one_of_game_designs_most_useful_tools.php#:~:text=The%20Function%20of%20Color%20in,them%20easier%20in%20the%20game.
Last accessed 1st Nov 2020.

(3) Colour Blind Awareness. (2020). Types of Colour Blindness. 
Available: https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/. 
Last accessed 1st Nov 2020.

(4) David Turbert. (2019). What Is Color Blindness?. 
Available: https://www.aao.org/eye-health/diseases/what-is-color-blindness#:~:text=Color%20blindness%20occurs%20when%20you,and%20reds%2C%20and%20occasionally%20blues. 
Last accessed 1st Nov 2020.

4 Week Diagnostic Project Conclusion

What I Found 

I learnt so much about what makes interfaces look good. I learnt that friction within UI can make or break a game. From matching UI to the game art style in order to maintain immersion; to altering the scale and shape of buttons proportionally to their function; to colour palettes and how they can seriously effect playability as well as player wellbeing; and to animations potentially ruining the pacing of a game. 

I also learnt about what makes interfaces work well. I learnt that UI can be organised into categories depending on their involvement in game story and game space. I also learnt that these categories work better or worse depending on game genre and that I should pay close attention the function based on genre in the future. 

What I Need to Research Further 

Having spent a lot of time looking at the sensory implications of UI, I would like to further explore accessibility in interfaces. I feel that this should always be a major consideration when designing interfaces in the future. 

I would like to research into the effects of colourblindness on colour differentiation in games and how this can be considered when designing UI to be more inclusive. I feel that a lot of games fail to take into account how visual issues like sensitivity or colourblindness affect the player’s ability to connect with the game – especially when those elements can inflict physical pain. 

How My Understanding of UI Has Evolved 

I now have a basic understanding of how aesthetics and function have to be balanced when making an interface. After making my own version of The Sims 4 main menu, I also appreciate how difficult it can be to make everyone in your player base happy as satisfaction with an interface is largely subjective. Pleasing the majority of users is a difficult goal but one that must be achieved as it is impossible to make every player happy with a single design. 

Summary 

Overall, I have really enjoyed this project. Although challenging at times, I have learnt a lot and am looking forward to researching more into this field of game design. 

(314 words)

Prototype Redesign of the Sims 4 Main Menu

This is the original main menu from the Sims 4. In my personal opinion, it is far too vibrant and the colours clash, fighting for the player’s attention. The llama gif in the lower right is distracting as it constantly moves and removes the player’s focus from the more important elements of the menu. The pack icon colours do not look right to me either, they are too similar to contrast but too different to match and it can cause many issues for players with colourblindness. The brightness of the clashing colours also causes migraines and headaches for players with sensory issues. 

My goal for the main menu redesign was to reduce these effects by choosing more understated colours that compliment each other better. In theory this would prevent migraines and create a better gaming experience for players with sensory issues. 

For this redesign I decided to focus more on recolouring than layouts as I would like to spend longer researching the technical aspect behind a good UI layout. Perhaps this could be the focal point for a future project? 

My design uses a gradient of blue that was present in The Sims 4 logo before the 2019 rebrand. These paler blue and green tones compliment each other far better and provide a great base for the rest of the menu. 

I used the darker of the blue gradient to frame the news section on the right and pack panel at the bottom. I also used a paler, lower opacity version of the gradient to recolour the triangular shapes in the pack panel in order to make them less vibrant and loud on the menu. 

Getting the icons right was very difficult as I wanted to base my design off the opinions that I gathered in my previous research. Some players liked that the packs were differentiated by category; while others preferred packs to have their own individual colours. Some players liked the balance of colours between packs but others claimed that the colour palettes were too similar. 

I decided that I would try to balance opinions by matching the colour swatches to each other and to the rest of the menu. I created two variations of the pack icons that are the reverse of each other. These represent packs that have been purchased or not so the player can clearly see what they have installed. I decided that this would help players with colourblindness to differentiate between purchases even if they are unable to see the gradient between the pack categories. 

I created two versions of all of the pack icons – one in green and one in blue. I like the green icons as they tie in the plumbob from the logo nicely. However I do not think that the green icons stand out as nicely from the pale blue triangular background as the blue icons do. For this reason, I personally would choose the blue icons for my menu. 

To make sure I was making the right decision by picking the blue icon theme, I sent both versions to my MA classmates and created a poll for them to vote for the one they prefer. The result was 5 blue : 1 green. 

In conclusion, I much prefer the redesign with the blue pack icons as the colours are far more fluid and uniform compared to the original design. I think my version is a lot easier on the eyes and it allows the player to clearly differentiate between purchased and outstanding packs. It would be interesting to see if this has reduced the effects on people with sensory issues but I believe that will be a much larger task and might be an experiment for another project with further research into how colourblindness and sensitivity affect colour choice.

The Community’s Opinion on The Sims 4 Interface

The Sims Community is very vocal about their thoughts and feelings on The Sims games. People often tweet or message The Sims page on Twitter with thoughts on new packs or ideas and concerns for the direction of the game. There are also a number of YouTubers who voice their thoughts and get their followers to respond with opinions under their videos in order to start conversations about matters surrounding the game. These YouTubers also share mods – fan made modifications to the game – that they enjoy and think their audience would benefit from. 

I will be looking in more detail at opinions by three Sims YouTubers involving the issues with the game that I mentioned in my previous post. I will be focusing mainly on the main menu and loading screen. 

Main Menu 

Plumbella

Plumbella has a very similar opinion on the main menu as I do. She claims that ‘it looks way too commercial’ and that ‘this is the least ‘Sims-y [menu] screen that I have ever seen’. ⁽¹⁾ I am inclined to agree with this statement as, looking back at previous Sims games, the Sims 4 main menu really does not match. 

Both the Sims 2 and Sims 3 menus are almost straight into the game and are simply a choice of which neighbourhood the player wants to use. There are no advertisements and no options for spending more money, the game is just that – a game. 

She states that ‘it could just be because of nostalgia that I’m saying that [but] the old menu screens make it look like an actual game but this menu just looks like it’s for a business’. ⁽¹⁾ With the number of advertisements and links to webpages to buy more packs, I have to agree that this menu definitely focuses on earning money rather than gameplay. 

She also briefly mentions the colour palette saying ‘the colours are just so off’. ⁽¹⁾ She goes on to say ‘the contrast of the colours in older games worked really really well – it was very fluid. These colours, the blue in the logo and the green in the plumbob, they clash’. ⁽¹⁾ As seen in my last post, I 100% agree with this opinion as there is a distinct lack of fluidity between shades. 

Plumbella then goes on to talk about the new colours for the extra packs. She says ‘I think in some ways it works well because now you can clearly see what’s a game pack, what’s a stuff pack, what’s an expansion pack and what’s free. And I can see this working with younger audiences to initially help them differentiate between packs’. ⁽¹⁾ She then argues her own point by saying ‘kids aren’t stupid, they’re going to play around with the game, they’re not going to know what’s what. But after a couple of weeks they will know what’s what and they’ll be able to differentiate between a game pack, an expansion pack and a stuff pack because they’re not thick’. ⁽¹⁾ While I absolutely agree that kids will be able to figure out the game for themselves – as I did with the first Sims game in 2000 – I also believe that it is immoral to encourage children to spend money on in-game extras. 

She then shares her personal view by saying ‘I do definitely prefer the individual colours. It made packs stand out a lot more [and] was more aesthetically pleasing. It made more sense in your head that Cats and Dogs is red, Seasons is green, and I think that way works the best as we can connect with them colours’. ⁽¹⁾ 

EnglishSimmer

EnglishSimmer says that, although she does not suffer with colour blindness, she ‘really struggled at first [with the] distinction between the game packs and the expansion packs. At first I genuinely could not tell the difference between those pack icons’. ⁽²⁾ She goes on to explain that ‘colour is such a specific thing to a person, you can never really describe how you see a colour. So I think those packs need to be more distinguished, whether that’s adding in a third colour, I don’t know’. ⁽²⁾ 

Deligracy

Deligracy’s opinion on the main menu was much more positive, she said ‘I know a lot of people didn’t like this but I personally really like it. I think it’s really nice and simple, it’s easy to see, it looks easy to navigate. It looks good to me, I like it minimal’. ⁽³⁾ 

She also mentions the pack icons briefly, saying ‘I also happen to really like the icons for the games. Again, I kind of would’ve preferred not to have that shiny, fragmented shape thing overlaid over the icons, I just feel like simple is best. Just block colours would have been nicer for me but I do appreciate that it’s so easy to see’. ⁽³⁾ She does also mention the colours of the pack icons, saying ‘I do think it’s interesting that they’ve gone for blues for both expansion packs and game packs, I thought they would’ve wanted to differentiate between those colours a little bit more’. ⁽³⁾ 

Loading Screen 

Plumbella

Plumbella’s opinion on the loading screen is also very negative. Her initial thought is that ‘it feels so flat and ugly, I hate it’. ⁽¹⁾ She goes on to say ‘I think it’s because I can’t justify this loading screen because I can’t understand how someone can look at this and think, yeah good design’.⁽¹⁾ She also says that ‘there are a lot of loading screens in The Sims 4, if you want to leave your house, you’re going to have to sit through one. So shouldn’t the loading screens be kind of interesting.’ ⁽¹⁾ I really agree with this point as it is so true. Everything in The Sims 4 requires a loading screen so the designers should definitely have paid more attention to the look and feel of this element. 

She explains that she ‘did have a conversation with someone on Twitter who has sensory issues and they said that these colours are too much and even YouTubers sharing these images are getting too much for them. I do agree with that person [and] I am a bit sensitive to sensory things – probably actually why this loading screen is offending me so much. I think this could be an oversight with EA in terms of accessibility‘. ⁽¹⁾ 

EnglishSimmer

EnglishSimmer goes into more detail about the sensory issues involved with this loading screen. She explains that ‘people have been getting migraines, headaches, light sensitivity [and] blue light sensitivity.Being at risk from getting severe pain through that loading screen, that’s not a game that you’ll likely want to play or spend your money on’. And this is true. The Sims Team are completely overlooking a huge portion of their player base by creating unnecessarily bright screens that harm their players. And while the argument from some of the community that blue loading screens are not new for The Sims, the old games use ‘different tones so they aren’t one static blue colour’. ⁽²⁾ 

She then goes on to argue the point that not everyone with sensory issues has a problem with the screen. However on the flip side I’ve also seen people who have light sensitivity issues saying that the blue actually works a lot better for them over the [previous] white’. ⁽²⁾  This shows that even within the group of players with sensory issues, there are varying degrees of effects. 

She also talks about how other branches of EA are making life changing steps in accessibility. ‘I actually sat down at EA Play with Karen Stevens who is the wonderful mind behind behind EA Accessibility and she has done some amazing work within the EA Sports side to really open up accessibility. There are people who play Madden who have complete sight loss. So I hope that the team are serious about inclusion and accessibility’. ⁽²⁾  With this in mind, it puts into perspective how behind The Sims Team are when it comes to accessibility if no one considered the sensory implications of adding such vibrant screens. 

The final point that EnglishSimmer makes is that, in order for her audience to continue watching her gameplay videos, she will edit out all of the loading screens that appear in game. The fact that this is something content creators have to do in order to protect people from the game is ridiculous. Although the loading screen was updated to a darker blue more recently, I believe these issues should have been addressed before the initial rebrand launched in 2019.

References 

(1) Plumbella. (2019). Why Does The Sims 4 Look Like This?! (New Design Reaction). 
Available: https://www.youtube.com/watch?v=47qm95whlvA&t=137s
Last accessed 9th Oct 2020.

(2) EnglishSimmer. (2019). Everything Wrong with The Sims 4 Rebrand. 
Available: https://www.youtube.com/watch?v=6yE3eilHyPU 
Last accessed 9th Oct 2020.

(3) Deligracy. (2019). Graphic Designer Reacts to New Sims 4 Logo. 
Available: https://www.youtube.com/watch?v=5s94fzQABNI 
Last accessed 9th Oct 2020.