loading
Portrait
What is this?
Hello there! This is a space to keep some accessibility insights and knowledge that I acquired throughtout the years in the industry.

It covers a couple of topics I'm passionate about in a varying level of details. It definitively isn't a definitive answer to all accessibility problems we face in this medium, but a small glimpse into the amount of positive impact we can make by acknowledging these problems, and trying to solve them in production.

Note:
I plan to expand and polish this further by adding more images, more examples and more resources!
New Section
Colour Blindness
When we cover accessibility, default option we expect from big games are accessible colour and high contrast options, since colour blindness is a fairly common condition, especially for men.

But there isn't really an easy solution for it, and for smaller games where the budget is tighter, building an alternative colour scheme, filter, or a fancy accessible options for the UI is just too much work to fit in the scope of the project, and even for big blockbuster games, the maintanance cost is not cheap.

So understanding how to mitigate colour dependency is the key to create a friendly and accessible colour palette from the start, and hopefully have a very friendly colour scheme that is not only beautiful to look at, but also accessible so everyone can enjoy them!

Easier said than done, certainly! Even this website is far from perfect and it only has 4 colours! But it's important to acknowledge the problem, and use your good designer sense(which is asking around for opinion and feedback) to mitigate it as much as you can.

TL;DR
Avoid common problematic colour combinations when possible, such as Red and Green of similar tone, and work with contrast even if you are using accessible colours!
New Section
Contrast
Contrast is the universal tool of an accessible UI: It doesn't rely on colours, makes everything more readable and can direct the eye for a nice and elegant visual hierarchy.

So before adding colour to differentiate your on/off toggles, warnings, or anything that is colour coded, try to work with the contrast first.

The right contrast between can communicate if something is disabled, if the button is focused, placeholder text for inputs, a toggled on/off switch and so much more.

An Interface with poor contrast can kill the experience even for those without colour vision deficiency and have a 20/20 vision!

TL;DR
Try to create a monochromatic UI to work with contrast, and use the contrast to convey the message instead of relying on colours!
New Section
Fonts and Glyphs
Fonts is a very complex and hard subject, so I'll cover the very basics for an accessible UI. You don't need to be an expert type designer or download it from a fancy website to get a good and reliable font for your game.

We have access to a unlimited amount of paid and free fonts online, as well as open source fonts with multiple language support. You can even make your own font if needed, but when it comes to accessibility, we have to limit ourselves and choose from a limited, yet still impressively vast amount of fonts that support certain features like supplement latin glyphs (So we can safely write words like Façade, Résumé, Señor etc.) and fonts for different alphabets (Japanese, Hangul, Cyrillic etc.)

Not only it needs to support the language you are developing to, but also think of how you want them to look like! Keep in mind that sans serif fonts are generaly favoured as a more accessible choice, even though most studies are not conclusive on the matter, it doesn't hurt to be on the safer side!

TL;DR
Find a font that support the languages you plan to localise to. Do give preference to sans serif fonts, but it is generally okay to use a stylised font if used in a big header with low word count and good contrast.
New Section
Font Size & Line Height
Once you've chosen a suitable font for all your needs, it's time to adjust them for you game's needs!

The recommended minimum font size for consoles games are 26px for 1080p, with an option to scale up for larger resolution if your UI is not scaling to match the higher resolutions.

For a lot of games, a 26px will just not fit. Especially those with dense, complex UI with a lot of information. And if you need to go below 26px, try to stick to 20px minimum, 18px for the absolute minimum, and think of ways to improve the readability by using alternative style like semi-bold or a higher contrast.

It's also important to set the correct space between the each text lines, also known as line height. The simple rule is to use 1.5x height for any paragraph longer than 2 lines of text!

For example: for a paragraph using 30px size font, aim to use a 45px line height(30×1.5) so each lines are separated enough to give a better distinction between them. The importance of it grows with the amount of lines your text have!

TL;DR
Try to stick to a minimum of 26-20px font size with good contrast, 1.5x line height for any paragraph longer than 2 lines and don't forget to scale the font for larger displays!
New Section
Font Style & Text Width
The key to a successful text is not only in the font itself, but how to fit them perfectly in your design.

When displaying a large paragraph, avoid using justified or centre aligned text. Left/Right aligned block of text is much easier to read due to the clear anchor point and an even spacing between the words.

Avoid using Title Case for any text longer than a couple words (Title Case Is When Every Word Starts With A Capital Letter Like This). and if you are thinking about using UPPERCASE to commucate yelling, or just to highlight a word, keep in mind that not all alphabet has different casing for each letter! Consider using Bold or something different if needed.

Lastly, try to keep your lines no longer than 80 characters long (or around 40 if your language doesn't have space between words or are full-width glyphs like Japanese, Korean and Chinese). Long lines can break the player's neck trying to read the whole sentence!

TL;DR
Avoid justified or centre aligned texts with multiple lines. Use different casing only if necessary and keep the width of your text in check: 80 charactes long or 40 for languages without space between words!


Go to Top