Category: Make it Accessible

Actionable tips and information to help you make your digital spaces and content accessible.

  • Learn and Lego

    Learn and Lego

    Reading, Writing, Arithmetic. These are the Three R’s of Education, even though only one word actually begins with the letter R. 

    But now Lego have stepped in to change things for the blind community and people with low vision, with the Three B’s. 

    Braille Building Bricks.

    The Danish toy brand developed bricks with the help of blind organisations from all over the world, with the traditional studs on top forming individual letters and numbers in Braille. 

    Coloured Lego bricks with differently positioned studs, forming the letters N and R in Braille

    Lego first announced these bricks to the world in 2020, and gave them to schools to encourage children with a fun way to learn. Technology has made things easier, with text readers for example, but many say that having the option is always better. The European Blind Union says that having an understanding of Braille helps in higher levels of education and can lead to better jobs.

    A man and a child look at a board with multicoloured Lego bricks on it

    This September, Lego released packs for the public to buy in the UK, which they hope will lead to a closer bond between parents and children as they learn braille together. Available from Lego.com, packs of bricks come in five colours, have fun online classes to go along with them, and they can fit with other Lego sets.

    Because Everything Is Awesome when you’re part of a team.

  • Make your content easier to read by using accessible typography

    Make your content easier to read by using accessible typography

    How you write can make your content easier or harder to read. But that’s not all that affects the readability of your content. Ensure your message is easy to access by making accessible typography choices.

    Why does accessible typography matter?

    Decisions about font style, type size and layout can make a huge difference. They can affect whether people can read and engage with your work or are not able to use it at all. Coming up we’ve got four quick and easy tips to make your typography accessible.

    These can be applied to all your digital media or products. Use these tips on your website, on social media graphics, in ebooks and in any other content.

    4 typography tips to make sure your audience gets your message

    1. Use larger text. It’s easier to read!

    This is such an easy change to make. It can make a quick and big difference in how accessible your content is. And yet many people will argue against this.

    You might hear comments like “big text is clunky”, or “it’s childish”. Unfortunately, this is an ableist attitude that is all too common. Let’s prioritise accessibility so that your audience can engage with your work.

    The bottom line is that small body text on websites is difficult for many people to read. Larger text is more readable for everyone. In digital design, using 20px for body text is a good start. Avoid going smaller.

    1. Use larger text. It’s easier to read!
    Small body text on websites is difficult for many people with visual or cognitive difficulties to read. Larger text is more readable for everyone. In digital design, using 20px for body text is a good start. Avoid going smaller!

    2. Don’t use lots of different fonts!

    With so many font options out there, it can be tempting to use lots of different fonts on a website page or social post. But this can be distracting and make it harder for people to read your text.

    Don’t get carried away with using lots of different fonts on a design. This can lead to cluttered pages that are difficult to negotiate.

    Keep it simple. You could use 2 fonts that complement each other and use them consistently. For example, use one for headlines and one for body text.

    2. Don’t use lots of different fonts!
    Don’t get carried away with using lots of different fonts on a design. This can lead to cluttered pages that are difficult to negotiate. Keep it simple. You could use 2 fonts that compliment each other and use them consistently e.g. use one for headlines and one for body text.

    3. Common fonts can be accessible fonts

    Again with lots of exciting new fonts to choose from, we can forget that familiarity is not a bad thing. There is a lot of debate about which are the best fonts for accessibility.

    Different disabled people may have preferences for different fonts. While no one best font suits everyone, familiar fonts are often easier for most people to read.

    When it comes to choosing, go for common fonts that many readers will be familiar with reading in. These include sans-serif fonts like Arial, Calibri, Century Gothic and Tahoma. Common serif fonts include Times New Roman and Georgia.

    3. Choose common fonts
    When it comes to choosing fonts, choose common fonts that many readers will be familiar with reading in. These include sans-serif fonts like Arial, Calibri, Century Gothic and Tahoma. Common serif fonts include Times New Roman and Georgia.

    4. Avoid fonts that don’t have distinct characters

    Some fonts don’t have distinct characters. For example in Gill Sans, I, l and 1 look exactly the same. This makes the text more difficult to read for many people.

    And if the letters b and d are too similar in shape, readers can confuse them. Look for fonts that have distinct characters like PT Mono or Comic Sans.

    4. Avoid fonts that don’t have distinct characters
    Some fonts don’t have distinct characters. For example in Gill Sans, I, l and 1 look exactly the same. This makes text more difficult to read for people with dyslexia or visual impairments. And if the letters b and d are too similar in shape they can be confused. Look for fonts that have distinctly shaped characters like PT Mono or Comic Sans.

    We also recommend a font called Atkinson Hyperlegible, which is specially designed to have highly distinctive characters. Find out about this accessible font here.

    Follow these four tips to help you make your content inclusive. Accessible typography makes digital spaces easier to use for many people. This can include dyslexic and other neurodivergent people, plus people with visual conditions.

    We’ve got lots more info on typography accessibility coming soon. Look out for information in our resources and on our blog.

  • Finding the most accessible font is easier than you might think!

    Finding the most accessible font is easier than you might think!

    Which fonts are easiest to read?

    Are you struggling to find an accessible font to ensure your content is inclusive? There’s a lot of discussion and disagreement about the best fonts for accessibility. Some fonts are easier to read than others, and there are a few good options. Here’s an example of a great font that we know is readable and accessible.

    It’s called Atkinson Hyperlegible. Applied Design Works designed the font in partnership with the Braille Institute.

    Atkinson Hyperlegible font is unique because it was designed to increase legibility. This is one of the reasons why it’s one of the best fonts for readability. And it’s free too!

    Atkinson Hyperlegible font

    Atkinson Hyperlegible

    Atkinson Hyperlegible is a sans-serif typeface. Read on to see how Atkinson Hyperlegible works and why it is so helpful. The font won Fast Company’s 2019 Innovation By Design Award.

    An accessible font for visually impaired readers 

    Low-vision readers can struggle with certain letters. Some numbers can also be hard to distinguish from each other. This typeface differentiates common misinterpreted letters & numbers using various design techniques.

    The letter and number B8 are shown in the Atkinson Hyperlegible font, and are then shown again blurred as they might be seen by someone with low vision.

    Recognisable footprint

    Character boundaries are clearly defined to ensure understanding across the visual spectrum.

    The characters 1Iil are shown in the Atkinson Hyperlegible font, and are then shown blurred as they might be seen by someone with low vision.

    Differentiated letterforms

    Similar letter pairs are differentiated from each other to increase legibility dramatically.

    The characters QGEFpqirO0 are shown in the Atkinson Hyperlegible font.

    Unambiguous characters

    Unambiguous characters increase legibility for people with low vision. Being dyslexic can also make it more difficult to read letters which are similar in shape. So this also makes Atkinson Hyperlegible one of the best fonts for dyslexic people.

    The characters ER79jr are shown in the Atkinson Hyperlegible font with another font behind it in a low opacity.

    Exaggerated forms

    These clarify potential misreadings.

    The characters Csa36 are shown in the Atkinson Hyperlegible font.

    Opened counterspace

    These define open spaces better.

    The characters aGbgrpqu are shown in the Atkinson Hyperlegible font.

    Angled spurs

    These increase recognition and define distinctive styles.

    The characters Ao8ij%?;,: are shown in the Atkinson Hyperlegible font.

    Circular details

    These link to the history of the Braille Institute and braille dots.

    So should you use this font for accessible design?

    Yes, we think so! The features outlined above help make the font one of the best fonts for visually impaired people. We recommend it for any of your publicity materials. This can include emails, website pages or social posts.

    You can see Atkinson Hyperlegible in use on our website. We find it particularly great for use in headings.

    Download the free font from Google fonts or from the Braille Institute.

    Find out more about what matters when it comes to accessible typography here and about the all-important question of font size here.

  • Inclusive design: “With great inclusion comes great design”

    Inclusive design: “With great inclusion comes great design”

    Accessibility and inclusion aren’t only about physical access to buildings and facilities. Inclusive design in digital spaces is crucial too. Many websites create barriers so disabled people cannot use them.

    We created a series of quotable posters for a community art competition by Wiilma. We want the posters to start conversations about accessibility in the digital world.

    There are lots of ways that we can design digital spaces to remove barriers that cause exclusion. And by creating with inclusion in mind, design becomes more valuable. Our contribution can be much greater, and celebrating differences can bring us together.

    A grey/green poster design with text reading "Digital spaces can exclude".

    A red poster design with text reading "With great inclusion comes great design".
    A blue poster design with the words "Being different shouldn't divide us".
    A golden brown poster design with text reading "The internet is for everyone".
    A purple poster design with the words: "we're all human".

    Just as great power needs responsibility, great inclusion comes with great design. Design can be that much greater when it’s inclusive.

    The power of inclusive design

    A vegetable peeler that’s designed for someone with arthritis will be beneficial to all. The same goes for digital design. If we design for disabled people, our designs will be easier for everyone to use. And our design work will be that much greater for it.

    We think Peter Parker would agree. Do you?

    The internet should be accessible to all. At we’re all human we help creators, businesses and organisations use inclusive design. Join us to get tips and resources to make your digital presence accessible. Find out more on our Patreon page.

  • Use contrast & make your posts more accessible

    Use contrast & make your posts more accessible

    Using contrasting colours is an easy way to make your content more accessible. Colour-blind people will be able to access your content. People with other visual disabilities will also find it more readable.

    When you create a social post or any other digital resource for your audience keep this in mind. You’ll be improving the accessibility of your online presence.

    In this post, we explore the WhoCanUse tool. We look at how useful it could be in helping you identify accessible colour combinations. When you find a good combination you can use it with confidence for your content!

    Accessible content in action

    Text reads “Review of color use in BBC Creative Instagram post”. Below is an image of a post by BBC Creative. The BBC Creative logo is picked out in bright pink magenta against a black background. Below is a bright (almost neon) green shape. The shape is like a square but has rounded corners. It resembles a chunky stylised capital U. Below the green shape text in magenta reads “Creative test” in chunky capitalised type. Below the black box text is the BBC Creative logo.

    To explore this we review the colours used in an Instagram post by @bbccreative

    A screenshot of the WhoCanUse tool. Text reads “We used tools from WhoCanUse.com to check the colour combination used in this post. This nifty tool shows how people with different vision can use this combination, and what percentage of the population they make up.”

    We looked at the colour combination used in the BBC Creative post with a tool from WhoCanUse. The tool lets you enter your colour combination.

    The black and pink colors used in the BBC Creative post are shown in circles that overlap on a white background. Text describes the hex colours used, “Foreground #f46efg”. and “Background #272b37”. A screenshot of the WhoCanUse tool is also shown. Text shows the pink foreground color used and reads “The quick brown fox jumps over the lazy dog” on the same black used in the BBC Creative post. Colour swatches show the colour hexes used. Black text on a white background below the screenshot reads “Font size 30px, Font weight Bold, Contrast Ratio 5.68:1, WCAG Grading AAA”.

    It will then show you how the combination appears to people with different types of vision. It also lets you know what percentage of the population has each vision type.

    A table view of information shows the percentage of the population that experiences different vision, the name of the type of vision and a simulation of the color combination used in the BBC Creative post. The table shows 68% of people have Regular Vision, (Trichromatic). 1.3% of the population have Protanomaly vision. 1.5% of people have Protanopia. 5.3% of people have Deuteranomaly.
    A table view of information shows the percentage of the population that experiences different vision, the name of the type of vision and a simulation of the color combination used in the BBC Creative post. 1.2% of people have Deuteranopia. 0.02% of the population have Tritanomaly vision. <0.03% of people have Tritanopia. <0.1% of people have Achromatomaly.
    As the previous posts, a table view of information shows the percentage of the population that experiences different vision, the name of the type of vision and a simulation of the color combination used in the BBC Creative post. The first row shows 1.2% of people have Achromatopsia. The second row shows that 33% of the population have Cataracts. The third row shows that 2% of people have Glaucoma. The fourth row shows that 31% of people have Low Vision.

    The tool also shows how the combination works in different situations and environments. You can see how well the combination will stand up in direct sunlight. WeCanUse also shows how the colours will look on a phone in night mode.

    A table view of information shows simulations of the color combination used in the BBC Creative post in different situations. The first row shows the effect of Direct Sunlight when using the color combination. The second row shows the effect of Night Shift Mode when using the combination.

    The tool shows us that the BBC’s post uses a high contrast ratio and meets the WCAG AAA standards.

    Because BBC Creative used colours that contrast well the image is readable for many. It’s also readable in different situations and environments.

    A deep blue/purple circle is accompanied by a yellow emoji thumbs up. Text within the circle reads “Great job!” Text reads, “The BBC Creative post has a lot of contrast making it usable to many people.” Below the text sits the BBC Creative logo in black and white.

    The post by BBC Creative is a good example of using contrasting colours to make posts accessible.

    When creating content for digital spaces make sure you use contrasting colours. You can use the WhoCanUse tool to check who will be able to pick out the colours. Enter the colour codes to check the combination. If you don’t know the colour code you can use a tool like ColorPicker to find the code.

    How to make sure your colour choices are accessible

    By doing this you’ll be helping make your content and the internet as a whole more accessible to more people. Great job!

    We hope you found this post helpful.

    You can get early access to all our tips when you join we’re all human as a member and supporter. Check out our membership options here. They include access to exclusive resources to support you, plus cool anti-ableist merch!