Design for Accessibility | Canva Webinar

so i'm very happy to welcome mr to canvas space she is a software engineer here at canva and an inclusive design expert so over to you nissa thank you so much jessica uh and welcome to everybody today for coming to us from all over the world um it's really exciting to see so much diversity happening here okay uh hello everyone and welcome to today's talk and we are talking about inclusive design designing for accessibility in this workshop we're going to outline some practical things that you ca

n do in canva to make your designs reach as wide an audience as possible i'm presenting this workshop to you today from the middle of a locked down sydney uh which always was and always will be on the lands of the gadigal people of the euro nation i'd like to pay my respects the traditional custodians of this land and the elders past present and emerging and i would also like to extend that respect today to the traditional custodians of the lands of whatever wherever you might be watching from t

oday so hi i am nissa buguevic from canberra i am the lead software engineer for the accessibility team uh it's a very new team and my work centers around trying to make canva as usable and as useful for people who experience disability as it is for people who don't so basically what we're trying to do is we're aiming to make create the most accessible design tool on earth so what is canva uh i'm pleased to let me know if you guys have used canva before uh canva is a free tool and you can visit

canva.com and start designing without even signing up for an account today i'm going to show you around our free product but we do offer a monthly subscription to our pro version and that gives you a lot more tools and stock images and lots of fancy things uh we also offer premium versions for free for students and registered not-for-profits so if you do fit into one of those categories please do have a google of that and go and sign up we'd love to have you here but it's not just all about the

product uh one of our core values is to empower the world to design this is why canva works in over a hundred languages and this is why we're investing in accessibility and inclusivity so you can't empower the world to design if you don't empower absolutely everybody in it and that's what today is about okay so this is what our workshop today is gonna look like um it's based around a few practical activities uh so if you haven't already got canva up in another window or tab now is a really reall

y good time to do that the structure of the presentation is divided into three main topics and each is followed by a small practical where we use features that we to implement what we have learnt in those presentations the first topic is about design tips so that you can better include people with low vision or color blindness topic two is about design tips to include your audience who experience hearing loss and to access canberra just go to canva.com and finally we have a section on how to bet

ter include people who experience intellectual disability and light-sensitive seizures i think it's really important to mention before i proceed that the design tips in each section will help a large quantity of people but they do not cover all different types of medical conditions and situations i would really really love one day to be able to give you instructions on how to create one design that would include absolutely everybody regardless of their situation uh but the human body is amazingl

y complex and as a result so is disability um it's also likely that some of the strategies today will make things worse for some individuals but better for many others simultaneously because of how complex the human body is everyone's situation is different and it's a really good idea to connect with your own audiences to find out if they have special needs and what they are and find out having said that the tips in each topic will help your designs reach a larger audience than they otherwise mi

ght have done before you came to this session so before we start talking about disability uh we should probably define it just a little bit uh the definition has changed a lot over time and it often has different connotations for different people depending on their background um i'd love to hear from all of you in the chat right now uh what you might define disability as and to answer your question charles no you do not need to sign up to access it dave says lack of one or more sense that's yeah

that's definitely part of it yeah um i'll tell you what i'll i'll be kind to you uh what i will do is i will give you an answer uh so i don't want to get too political here because this can get very political and contentious uh this is the un's definition of disability from the convention on the rights of persons with disabilities uh now in my opinion this definition is a little bit too limited uh but it does touch on a concept i'd really like to highlight so i'm just gonna read this out for yo

u now uh and it's a long sentence too uh disability is a long-term physical mental intellectual or sensory impairment which in interaction with various barriers may hinder a person's full and effective participation in society on an equal basis with others uh again i feel that that's quite limited the barriers are in how society is designed so for example a person who uses a wheelchair can experience equal access and participation in places where there's a ramp but if society chooses to only bui

ld stairs then you've got a barrier today's workshop is about the often forgotten barriers in visual design and which can easily be remedied so this is uh and part of a nifty image the image is actually a lot bigger than this uh that i really like about categorizing disability and yes shout out to social model of disability uh this particular category uh is touch but you can extend it through to vision or hearing or smell it doesn't really matter any particular sense the reason i really like thi

s image is because it includes disability which isn't about something medical like jess was talking about earlier so something that's situational if you need two hands to operate something like maybe a car and you are holding a baby please don't do that uh the barrier is just as real as a person trying to do it with a broken hand a situational visual disability might include something like trying to view an image on your phone when the sunlight in the background is way too bright i do that all t

he time uh for hearing it could be that you're in a situation like you're on the train and you've gotten your headphones and you can't turn on the sound on a video because it would be really very rude um but so those are a couple of different situational examples of things that we should be looking out for a hugely important part of inclusive design though is that by reducing the barriers for someone with a permanent disability uh you are also likely reducing the barriers for people experiencing

situational disability so you're winning far more people than you otherwise might expect from your accessible design choices a really great real world example of this is uh the curb ramps on the streets um again that's a bit location dependent uh it used to be it was designed for people who use wheelchairs so that they can get off the pathway onto the street and back up on the pathway again but if you've ever pushed a pram around uh you'll know that that has benefited you an awful lot as well s

o we're going to have a teensy meatsy uh pop quiz about disability now that we've defined it i'm going to admit the following numbers do not include situational disability which is probably impossible to measure so let's go for question number one put your answers in the chat please and on a system please do not google these um this is going to be a bit of an easy one uh how many people in the world today live with disability let's get some guesses going a lot yes that is that is correct uh one

in five okay we've got a couple of votes for one and five fifteen to twenty percent one in ten [Music] thirty percent interesting we've got some 20 million in mexico oh that sounds like you actually know what's going on there uh 15. oh we got work okay one in a hundred no i'm afraid it's definitely not one in a hundred um the actual answer is one billion or fifteen percent and yes there are five hundred thousand registered with the ndis in australia but the ndis does not include 89 of disability

in australia uh so the answer to this question is 1 billion or 15 now this was calculated 10 years ago though so this number is only expected to have increased as life expectancy gets longer on average and there's been a dramatic increase in worldwide of chronic health conditions like diabetes and heart disease you get disability coming along with those these numbers also get much higher for many different groups of people especially people in lower income areas and already marginalized groups

for example indigenous australians are 1.8 times as likely to live with disability compared to non-indigenous australians here's another one for you this one's a little bit tricky which what percentage of your life can you expect to live with a disability if you live in a country with a life expectancy of over 17. so i'd like to apologize firstly to anybody who experiences colorblindness this was unfortunately the best version of the map that i could get but basically the countries which have a

life expectancy of over 70 are almost all of north america almost all of south america you got middle east western europe northern europe northern africa a lot of asia and australia and new zealand are definitely in there yeah 20 years 40 percent 10 percent got some guesses going 30 interesting um you can expect to live 11.5 of your life with a disability and that is about eight years um that's a lot so this is again only uh in countries with an average life expectancy of over 70. uh importantly

the older you get uh the more likely you are to live with disabilities so for example australian numbers because that's what i have the most access to i'm afraid uh about 85 percent of over 90 year olds experience disability as soon as we start talking about around 60 years old it goes it's about 25 uh this one i won't quiz you on because it's actually quite difficult so how common are different types of disability so these statistics are hard to nail down for various reasons so just sit back a

nd absorb these numbers uh for hearing loss around 17 of australians in 2006 uh were affected by hearing loss the projections for 2050 indicate that this will be one in four people that's a lot of people and if you're keen on looking at the source uh we've got the bitly link up in the top left corner with a qr code okay full or partial blindness in australia there are currently 357 000 people uh who have full or partial blindness this is only 1.4 of australians uh but it doesn't actually include

people with a lot of different chronic vision issues if we're talking about chronic vision issues it's 52 of australia so this includes all of the people who experience partial and full blindness like before but if you are long or short-sighted hello uh if you are colorblind if you have astigmatisms also hello um cataracts these these are all covered by this number so more than half of australians you are more likely to run into somebody on the street with a chronic vision issue then you are no

t and as a bit of a sydney lockdown special slide i felt like i should probably include this one uh 45 of australians aged 16 to 85 experience a mental health condition during their lifetime uh i can only imagine that the global pandemic has very much not helped this number and i would really like to just remind everybody to take care of yourselves and take time to do that and take care of everyone around you the best that you can but firstly yourself that's the important one so the takeaways fr

om what we've just talked about uh these are the things that i really want you to walk away from with this because the numbers i know probably won't stick uh disability is a wide array of different issues and different severities it's a spectrum it's a huge spectrum living with disability is in most of our futures or present uh the amount of people living with living with disability is expected to increase uh yeah so that leads us to our first topic and this one underpins uh our next couple of t

opics as well so it's super important and it's also really important because canva is obviously a visual communication tool primarily so the first thing i would like to do is to remind everybody again uh if you just in case you missed it that the following strategies do not help everyone with all different vision related disability types um unfortunately because eyes are very complex different people need different things but the strategies generally will work for people with chronic eye conditi

ons okay okay so here are the precious five guidelines um these will help improve the readability of any of your designs but you'll notice a couple of these pop up in general design recommendations as well but these will help people distinguish your text content more easily and for different reasons firstly bigger and bolder is better larger text is more noticeable and this is this one is why you frequently see billboards or advertisements with only a few words uh but for people with reduced vis

ion it's especially important uh make the most important statement in your work the thing that you need your audience to know immediately use the most real estate in your designs and i'll show you an example of this in another slide heavier font faces so your bold thick and chunky fonts are also easier to discern from anything in your background so that's what you want to go for sans serif font faces are frequently easier to read than serif font faces this can be a little contentious and you'll

need to use your best judgment here on one hand serif fonts will have more going on which can clutter up your text and content but on the other it can be very useful to prevent confusion between different similar looking letters um again i'll provide some examples in a minute fewer different fonts are better this is a common piece of advice and design and it can definitely help to make your work look more professional but it also helps to reduce clutter for each new font someone has to try to re

ad they have to put in the mental work of understanding what that font is doing and communicating the less you need to make your audience work for your message the more likely they are to receive the message that you're intending to communicate you use decorative fonts sparingly this one follows on from fewer different fonts guideline uh there are a lot of really beautiful fonts out there which are very very fancy and complicated and so they require more time for people to understand what is goi

ng on if you really want to use a complicated and fancy font make sure that you only do it for tiny little bits of text like titles using decorative fonts for entire paragraphs of text is sure to make many people regardless of how good their eyesight is stop reading entirely and lastly and again this isn't a deal breaker in its own right but if you have the choice to do it i recommend it fonts with more space and breathing room require less work from the audience to read it it can be really temp

ting to use a skinny font so you can get all the content you want into a tiny little space but that's actually a sign that you need to reduce the amount of content and increase the amount of space which one of these is your eye drawn to place your answers in the chat i would love to know one one one one one oh three one i think we've got a little bit of a consensus here though that it might be the first one and uh for me uh it is also the first one uh the other two are still nice they still conv

ey the same message uh but the focus of the middle picture i the first thing that my eye is drawn to is the dog's eye um the last one is also pretty the focus competes a little bit between the eye and adopt don't shop if you close your eyes and open them back up again the first thing that will end up drawing your eye is probably the very thick white text on the left this is down to the size of the text and also the heaviness of the font face so it contrasts a lot more with the background and yes

the dog is sad and i do believe in adopt don't shop which is why this picture is up there okay so for the person who asked what is sans serif and what is seraph this is for you so sarah are the fonts that have all the little tails and little baubles and all the little extra bits on on the letters sans serif it doesn't have any of that it's just as much as is necessary to communicate just the letter form um serifs are actually stylistic remnants from when the romans used to carve letters into st

one it's how they made the lines all neat and line up and square um obviously today we are not carving in stone usually so for most texts sans serif is you know it's a little bit easier to read at least that's what the studies usually say so here on the right hand side here is a template that i have chosen from our library uh the image on the left i have just yes you're right the newspaper does use serif font and that is largely historical but there is also studies which show for large blocks of

text if there's no other competing elements that a serif is fine uh the image on the right again like i said is from the temple library the image on the left i have just changed the typography so that it's using sans serif fonts both look nice enough uh but it's generally quicker and easier for most people to read the text on the left one the consistency in the line weight is definitely part of this so if you look at the a here you've got a very skinny left line and a very skinny a very thick r

ight line and it makes it just a little bit more work to try and figure out what is going on there but sarah if there can be a little bit of complication this is why this can be a bit contentious um and this is something i really want to point out uh sans serif fonts are more likely to suffer from an issue that affects a great deal of fonts you know serif or sensor for like some of the letters might not be easy to distinguish so for example here i've written the same text in three different font

faces and that text is 10 capital i capital o lowercase l um in this is mozart which is the sans serif one it's nearly impossible to tell the difference between the lowercase l and the capital i um even in the the serif font though neuer montreal um you can see not much difference between the lowercase l and the one and if the either of those letters or numbers were in isolation you could easily mistake them so here's a font that is very very clear about it because it was developed specifically

to do so your zero has a dotnet to make sure you can tell it from the o the i has the top and the bottom the one that the l has a little bit on the left and the one has that diagonal just to disambiguate it so it's very important uh to you know judge this for yourself and use a little bit of discretion um especially if you are not using common regular words or just only tiny bits of text um if you're using short words words that aren't common it can be the difference between someone typing in y

our correct business name or url into google or going somewhere else entirely this is especially an issue for people who live with dyslexia viewer different fonts is generally better so some of us are old enough to remember a time when word art and text first and text processing was a pretty new thing uh we'd send out and receive party invitations with whole lot of different styles and colors and shapes and it was just because we could however can really increase the amount of cognitive load for

people who are just trying to understand what you've written uh so what i've done here is i've tweaked this template from our library a little the one on the left is closer to the original i just tweaked this bottom one here it uses five different font faces and weights but the one on the right which i have changed is only uses one font face and one weight so the stylistic differences that you are getting from here like this text looks different to this text you know i'm using sentence case uh

this is all capitals the letter spacing has changed a little bit so you can still have the variation and aesthetic interest but it's a little bit easier for people to understand each line because they don't have to work as hard to understand the different fonts use different fonts fonts sparingly uh some fonts are made to be read and comprehended uh and some are just made to look fancy and fabulous and these are decorative fonts it can be really really tempting to try to add that fabulous to jus

t about everything in your design but please please resist this template from our library on the left uh uses a few different fonts uh contrary to my previous point i know uh the image on the right though only uses the one font for everything but that choice makes it unreadable in parts especially this email address on the bottom so be careful not to make everything fancy you might be compromising your message in the process yes it is hectic uh which is why you need to be very careful with decor

ative fonts go spaced and go wide this one is especially important if you expect your design to be viewed from a distance so you might be making a billboard or a poster that's going in real life or maybe a presentation uh if you're like me uh you if you've ever looked at a movie poster they'll always have this bottom everybody's name that's worked on it is made in this really really compressed uh thin text because they're trying to fit all of the information on the poster um but it's very diffic

ult to read uh so when people are better able to distinguish where one letter starts and one letter ends so you know there and where one word starts and ends or phrase they're going to have an easier time reading what you've written and therefore understanding it so this is another template from our library i've tweaked it though so this is using lava bus wide for the text and you can see that this one is a little bit easier to read on first class the one on the right is the condensed version of

the same font face um and i i am not a fan personally um so remember if you are tempted to reduce the width of your letters to try and squeeze more information in you're probably trying to do too much in too little space okay this is color contrast and uh this one is the one i see most frequently forgotten in design uh no matter how professional it is and it's my personal pet peeve text with a higher contrast to its background is easier to read and the fancy ratio that you want to aim for is 4.

5 to 1. and i'll show you how to find this ratio in a minute i'm not going to get into the science behind it because it is really is a lot and it's very complicated what you do need to know though is that 4.5 to 1 is the ratio where the average 80 year old will start to struggle to read so if you want to sell your product to somebody who is over 80 years old and i'm sure most products you know you want to sell them to uh you're going to want to think about this ratio so a higher contrast ratio t

han 4.5 to 1 is almost always better 7 to 1 is fabulous uh please go ahead you know you can go even higher just don't go lower than 4.5 many people also use lower contrast ratios to do sneaky things um so hiding disclaimers and contractual fine print you will see that a fair bit so be very very careful the rule is if you intend for someone to read it it needs to be readable so here is an example uh for color contrast uh the image on the left is a little bit tweaked from the template that i found

in our library no i don't know why it says disk instead of discount uh the image on the right i have only changed the color of that title the left image starts off okay so i can see disk pretty well but as soon as i get to the word off it becomes really very difficult to read the reason the title on the right is so much easier to read and understand at first glance is because the text has a higher contrast ratio to the background there are other ways you can boost the contrast of your text too

uh so for example canva we have some text effects so shadowing and lift and hollow tools which can allow you to create some extra contrast around the edges of your letters and boost it if you can't change the colors a little bit you know so this is my a link to my favorite tool and i'd love for you guys to open it up in another tab uh you can follow the link or the qr code and one for jessica will put the link in the zoom chat for me as well uh this will take you to my personal favorite color co

ntrast checker and it's uh by webaim so the reason i like this one so much is because as an engineer uh it's design it's been engineered to be accessible to people who use screen readers or other assistive technologies but there are a lot a lot of color contrast checkers on the web you can absolutely find you know your own another thing that you might want to do uh to check your designs is see how easily they can be understood by people with different kinds of color colorblindness so colorblindn

ess predominantly affects men and it's much more common amongst caucasian people than any other group it's estimated that around 10 of scandinavian men for example live with colorblindness that's the biggest proportion on earth uh there are different types of color blindness though and some are more common than others uh this is a tool uh example showing how you can check uh your image for colorblindness with the link that we're gonna provide so uh it's called cobless which stands for colorblind

ness simulator it provides a pretty easy interface for you to upload an image and check out how it looks uh it's only an approximation of what people with colorblindness experience because this is not really an exact science uh but the one of the important things to know is that red green color blindness is the most common so if you're going to check for any one type your designs against that check for those um but ideally in the most ideal circumstances you will have chosen colors which are sti

ll easy to distinguish for anyone with any kind of color vision i'll demonstrate in a little bit using this tool to check uh but you can use this download function in your own designs to export whatever you create and upload it to this and you know find out what your designs look like so we will be doing that in this activity uh so what i'd love for you all to do now but you don't have to do it i this video this is being recorded so you can do this later um if you so wish but what i'm going to d

o is spend a few minutes using what we've covered in the previous slides to create an instagram post for your new fictional bakery i don't know why it's a bakery i just like bread uh or other kind of business you don't have to do a bakery uh we're only going to make a simple non-moving image instagram post alongside it with a little bit of text making sure that you consider how readable each piece of text needs to be and weighing that up against which business text might just be more for flavor

uh it might be the name of your bakery it might be telling us about a daily special or a discount whatever you would like to do so here are the tips and just for a mini refresher and the links again for the colorblindness simulator and the color contrast checker bigger and bolder is better sans serif is easier fewer different fonts are better use decorative fonts sparingly ghost based and go wide so what i'm going to do now is i'm going to demonstrate live because i am crazy uh and if you prefer

you can go and do that and we're going to spend about 10 to 15 minutes just getting used to this and having a look at that so i'm just going to swipe over so i am going to create a new design and as i can see i've already got an instagram post template there for me wonderful uh so i actually already know which one i would like to use and that is this one over here yes i was practicing earlier uh so look it's a perfectly nice design uh but i think we can improve the readability of this text it's

already doing a couple of things it's using a very wide font so that's already a good point for it it doesn't have any decorative fancy fancy fonts which is good uh it's only got if we have a look here daily motivation that's a grandia wide medium uh i'm fueled by happy thoughts and coffee true uh that's also a grander wide medium and the last one is a grand deal wide medium as well so we've satisfied the fewer different fonts a better idea and it's all sans serif so all of those are a tick and

it's i think though that we could probably make some of this a little bit bigger um so i'm just going to make that 36 just just to boost it up a little bit move it up and you know if i'm quoting a site that i really want everybody to go to i probably want that to be a bit bigger as well so one of the other things that i think i need to do here though is i am not confident that that color of this text is a good color choice for this background i don't think it has enough contrast so what i'm goi

ng to do is i'm going to select that piece of text and i'm going to go up to the text color box which you can see just up there i'm going to click on that and it opens up this contextual panel over here as you can see this burnt dark red here uh is highlighted and that's the current color of the text and the tool tip on that it's a little bit difficult to read it says 993817 and what that is is it's a hex code uh so it's how one of the ways in computer world that we describe and define colors so

i could try and memorize that but i don't really want to memorize things so now that this has been selected i'm going to go to the add a new color box where it has already been pre-filled for me so anytime you select an element and you go into the new color box over here you'll find that that color code is in there already for you and i'm just going to copy that and i'm going to move to the color contrast checker i'm just going to refresh that so i'm going to give it a nice clean one okay so th

is is what it looks like by default and it's a little bit complicated but it's not too bad what we have here is this is for the foreground color so this is where i'm going to put my text color i'm just going to paste that and if i click outside it you can see it's changed to the color of the text and this will be for the background color which i'll get in a second and here is the important part the contrast ratio so this one right now if if the background were white it would contrast seven point

one six to one you've got some other complicated stuff down here uh you don't really need to think too much about that if you know about the four point five to one rule um if you don't remember the four point five to one rule uh just look for the dub cag double a normal text and that happens i happen to know that's 4.5 to 1. um so what i'm going to do is i'm going to go back to my design and yes there will be recording later uh and i'm going to click on my background and as you can see up here

there's the orange and that's where i can change the color of my background it's or again it's already highlighted for me and it says cf 8b3f but if i click the add new color box it's already there and highlighted for me so i'm just going to copy that go back to my contrast checker put it in as the background color and there we go and that's what we've got so that's our current text color on our current background color the contrast ratio is only 2.52 to 1. uh that is obviously less than 4.5 to

1 so we are going to need to do something to try and boost this color contrast to really make it readable and what i'm going to do is i think i am going to make the background lighter okay so i've gone over the 4.5 to 1 now it's 4.84 you could do better than that but let's just for the sake of argument stop here so i'm going to copy that background color now that i have now changed go back to my post click that orange background bring up the contextual panel add a new color and paste that new va

lue in and as you can see the background has changed color so the contrast of my a really great site text is now way better on the background unfortunately that has made the contrast for the main text i am fueled by happy thoughts and coffee that's now poorly contrasted so i'm just going to repeat this again i'm going to click on that text and go to the text color it's already highlighted i can see it's ffe acf i'm going to click the add a new color button copy the value go to the contrast check

er and place it in my foreground color and as you can see the contrast of that text on the background is only 1.26 to 1 so we need to do something and i am just going to reduce the lightness of that color so it's a much darker color if i wanted to i could also just press this color here and but this this we'll leave aside for now how pretty the color combination is but i've got a a much higher contrast ratio and that's what i'm looking for so i'm going to copy this value i'm going to go back to

and it's already highlighted and already there and i'm just going to paste it whoops there we go oops i've actually copied the text that's not what i wanted make sure the text is selected go to text color add a new color paste there we go so i don't love this color combination but uh this is just a bit of an example for for how to do it um the other thing that i mentioned before was checking this against color blindness as well so let's assume that i was happy with how this looked uh what i can

do now is i can download this as a png or a jpeg that either one is fine i'm just going to download that the way it is now and as you can see down the bottom right it's downloading for me and i know it is downloaded thank you and i would like to save it thank you okay and now i'm gonna go to my color blindness simulator where i've actually already uploaded this one but you can click the browse button here to find the file on your computer that you've just saved so this is what it looks like to p

eople with normal vision i don't really love the word normal but the average vision um now if we have a look at the different types of color blindness red and white red wheat proto-anomaly you can see that it's still readable that's good uh green blue red because we made the color contrast decent and the colors themselves work in this particular case even if uh the person does not have any kind of color vision which does happen it's pretty rare um then you can see that this is still gonna be mos

tly okay for them if you click on red green week uh or red blind or green blind and you see that it's difficult for you to read the text then you might want to consider changing your colors to something else yeah um so i am going to give you a few minutes uh to try that one out yourself uh with with canva if you so like also because i would really like a sip of water um okay so there are your uh guidelines again and have a crack great and when you've had that sip of water nissa i've got a couple

of questions for you so let me know absolutely okay i can listen and drink at the same time so okay she is multi-talented everybody um so charles just had a quick question uh about the color blindness simulator um when using a specific color and it doesn't contrast um charles is asking if you actually use that tool to improve the visual or just give you insights into what you need to change i don't think the tech that the tool actually changes the design for you doesn't it no you just this is j

ust so you can see what it might look like to uh people with different kinds of color blindness uh unfortunately we don't i would love to put a way to do this in canva um but it won't change the colors for you you will need to go back to your post and do that work again and check the color contrast and then check to see that it makes sense um i can't remember which specific colors are the best for uh as a kind of guarantee uh you'll have to you'll have to google that one yourself i'm afraid um t

hat follows on to another question from andrea um what do you think are the main font colors that are the most comfortable for visually impaired even partial sighted people to read is it just a matter of that high contrast or are their preferred colors um they're okay so uh if you go to the tool now the tool uses actually a very simplified way of working out the contrast ratio and so this tool will always give you the highest contrast ratio with white on black and but the algorithm it uses is is

just there to be an approximation uh if you actually want the highest contrast in colors i believe it's actually a yellow a light very light yellow and a very dark blue that will give you the most contrast uh because humans we have a perceptual color system rather than whatever this algorithm is um it can be a good idea to not go as high a contrast as is possible because that can actually get a bit painful for people uh with with average vision um and i have actually run into at least one perso

n where they experience difficulty reading uh white on purple so you've got different conditions which will affect different people differently um so just go for something that's above 4.5 maybe closer to 10 and you're probably going to be golden beautiful thank you uh and one quick question before we get back to it um an anonymous person asks do you have any advice for people who might be working with brand colors that don't contrast well is it a case of education here and really going and mayb

e evaluating the brand colors or do you have any kind of work around advice uh this is something that canva has actually dealt with as well uh and twitter uh look i i come from a perspective where more accessible is better and that is always what i will argue for but i appreciate that there are a lot of designers out there uh and you know a lot of really beautiful color combinations that aren't really contrast heavy you can go and start trying to change the brand colors that is going to be a ver

y difficult fight for you i'm afraid um but often the brand colors are something that you can use to highlight and emphasize things instead so for example if i go to the canva homepage you can see that our logo has white on this kind of teal and it used to be that you know all of our buttons had that white on teal as well but they didn't need to be so what we've done is we've changed our user interface elements uh to have this higher contrast color combination but our canva teal color is still u

sed to uh decorate and emphasize specific bits so if you can't change your brand color pick a color that goes with it that does have that contrast and use it for your body text and your and and all of your important elements fantastic tip thank you very much and that's it for questions at the moment hey yes secondary colors are complimenting definitely an option um i'm just gonna close that down and go back to my thing okay so we are now on to topic two uh topic one was a big one because like i

said it underpins everything else that i'm gonna talk about really um so this will be a small section on how to include people who are experiencing hearing loss of some kind so the internet has increasingly become more and more about video content uh and as that's happened we've needed to start thinking more and more about how to deal with audio on top of either static images or on top of animated ones so here are my top tips for that uh captions and transcripts which i will go into in a minute

uh it's important that you don't just limit yourself to the visual uh and this just doesn't just benefit people who are deaf we've all been in a situation where we can't or just don't want to for some reason turn on the sound for whatever we're watching on our phones and captions and transcripts benefit you here too so transcripts help your content to be more computer understandable as well and that's really important if you want your content to be found on search engines like google uh it needs

to be machine understandable and human understandable if you want to rank another fantastic benefit of writing text alongside your visual content is that research shows that it benefits comprehension especially if you are speaking like me in what might be an unfamiliar accent to your ears or maybe english is not your audience's first language uh it'll really help those people out too even for native speakers though captions can even benefit memory so your audience is more likely to remember you

r message if you reinforce it through text as well as audio as well as something else the second tip is related to captions uh it's about positioning and ownership so putting down captions or a transcript is good uh but it's also good that you think about how understandable that is uh putting thought into where it is on the screen and how you differentiate sources of information can make all the difference in people's comprehension of your message and the last tip is actually all of the tips fro

m the first topic uh so everything we discussed in topic one absolutely applies here too there are many people out there who experience disability in weights which affect multiple senses so it's all very well to put in a transcript or captions but if you don't follow the guides on color contrast and text legibility that we talked about earlier you'll still be excluding people so for best effect uh it's good to use these concepts with your transcripts and captions okay so i'm just going to get in

to a couple of definitions again transcripts are the full text of audio which sits separately but alongside some video or audio and i'll show you an example in a minute uh captions are the text that you will see on top of the video they are frequently referred to as subtitles but subtitles are for when content is being translated from another language and it assumes that you can actually hear the audio at the same time captions though adjust the text version in the same language as the content b

oth captions and transcripts together are a fantastic combination and if you have the opportunity to provide both i really recommend it here's an example of a transcript uh so there's a link down the bottom and this is just where the transcript uh belongs it's for one of our fantastic canva design school articles uh so it sits alongside a video um underneath it but uh this one is pretty straightforward as well so it says hi i'm catwork on the camera design school that's because we only really ha

ve one speaker there so it's a pretty simple just bit of text that you can plonk uh on a web page uh this is captions uh this is the same video for what the transcript was referring to uh so it's the same link as well uh you can see though that it's got these auto-generated youtube uh captions on top of the video so you can choose to do that instead of sitting there and reading through a transcript that it's not as computer accessible we're very lucky now that social media companies are generati

ng captions for us in videos but relying on them can lead to some interesting mistakes they're not yet at a level where they can account for all accents and words so if you do enable auto-generated captions on any media that you're providing on social media it's really good to double check that they're not something a little bit off topic and i will be very interested to see what the order generated captions sorry transcript for this presentation will be when it gets uploaded um another thing th

at auto-generated uh captions don't do well yet is that you can't tell necessarily who is talking if there's more than one person speaking at a time uh positioning and ownership so if you are creating captions uh here are some things which are really great to keep in mind use different styles to show who is speaking obviously don't go over the top with this we don't want your crazy word out uh but simple color choices can really help distinguish different speakers or even just one speaker with t

ext that sits alongside so if you're watching the news there will be somebody reporting on a topic but it might say their name and who they are underneath so you can at least differentiate between those two bits of text as well be careful very careful of your caption location this one is really hugely important because video components like timelines or auto-generated captions and subtitles might end up covering up your important text even if you're showing it live if your text is to bottom to t

he screen and i've experienced this multiple times in real life i was watching a presentation it was a super large room i was sitting behind tall people uh if all of their heads were covering up the captions and i couldn't hear the video properly so the captions were just rendered useless and i'm going to be very very sneaky here and i'm going to introduce another text guideline which really could have been a topic one uh try to keep your text bigger than 24 point now canva uses i believe point

by default uh people who have vision and totally benefit from this uh but it's also possible that people without vision impairments will benefit because frequently your video might be displayed smaller than you expect um so it'd be a bit of a waste to caption your video and take that time if it ends up being too small to read unfortunately different fonts interpret their size of 24 points very differently so you're gonna have to use a little bit of judgment again we probably could use some inter

national standardization on font sizing but that's that's a dream okay so here's the ownership um so this is an example it's the same text on both sides but changing the colors can help distinguish who is who uh this is a video that i found in the candle library and i completely made up the dialogue i couldn't hear anything with it so i've just made up the text this is not what they're actually saying if we play the example on the left both people are being represented by the black text on white

now if for example the reading order needs to change of the text just because of perhaps timing it's going to be difficult to keep up with who is saying what now so what i've done is on the right is i've associated a color with a speaker and i measure for people who might not be able to see color what i have done is i have made the text for one person white and the text for one person black so even if you can't see color you will be able to figure out who is speaking just that little bit better

so let's have a look at that thing about captions is if there are multiple speakers it can be tricky so that's an example of just how to to associate text with a person now i have gone for two different very different colors here you don't even have to do that even if this were yellow and black so black text on yellow this could be yellow text on black and it would still have that difference this particular one might be tricky for someone with certain types of color blindness again i highly rec

ommend putting it through the tool and and trying it out but the reason this one would be okay even despite color blindness is because one speaker has white text on a dark background and the other speaker has dark text on a light background i've managed to differentiate it that way too so this is an example of position which i encountered when actually making the previous video uh so as you can see these are just screenshots these are not the same video uh on the left i have taken a screenshot o

f the video and the timeline for the video and the chrome and all the controls are covering up what it says on the right hand side the same information is just shifted up just that little bit slightly so all of the controls are now easily uh distinguished and if youtube for example put some automated captions or translation over the top you'll still get the text there for the english speakers now if you had a larger amount of space and even more speakers than you got in this video uh you could c

apture you could put position the captions a little bit closer to whoever is speaking at the time uh that's another way of associating a person with text but the bottom of the screen is pretty ingrained culturally for captions and subtitles just historically and it's it's a good idea to generally keep them there so that we don't have to you know look all over the screen for whoever's speaking like we're watching some kind of ping pong match okay so you can make captions in canva and i will be sh

owing you how to do it but it is a little bit tricky so the next activity the next demonstration will be a little bit on the trickier side uh we are working on better ways of doing this please stay tuned i wish i could give you spoilers it's going to be great but for activity 2 we're back to the bakery i still love bread what we are going to do is create a new design for your bakery and this one's going to be a video for instagram and i am not endorsing instagram specifically this is just one of

the standard use cases we get for people making stuff at canva so in the canva library we surprisingly have a fair amount of different videos for bread uh so don't feel like you need to caption an actual conversation like i did on on the previous videos but what i'd like you to do uh in your own time or just watching the demonstration here is split up a short video into two or three different segments that still flow and add some captions or text with accessibility in mind to describe what the

viewer can't see so perhaps you want to you know communicate to a potential audience how good the bread smells or the atmosphere of your bakery or just the directions on how to get to your bakery it doesn't really matter uh one thing you also want to keep in mind is that if you've got a large bit of text you are going to want to leave it on the screen for a longer time because people won't want to feel rushed reading it and that can get really really difficult okay so uh i'm gonna demonstrate th

at for you now if you like you can have a go at it yourself at the same time or you can just watch and come back to the video later and we can yeah so here i go and here i am i am back on my canva home page uh and i'm gonna create a design and instagram yeah i'm going to create a reels video because why not we've got all these different templates i'm just going to wait for that to load a little bit so we have a lot of different videos and in this particular case you can't see the videos tab so i

f you head down to more in the object panel the videos button should oh i've already put it in there so videos might turn up in here but i've already got it in my object panel over here so we've got a lot of really gorgeous stunning videos uh but like i said we are going for bakery related ones and i already happen to have used this toast one previously uh it's not the right aspect ratio for this this template format but it's it still works pretty well so i have just dragged that video into my d

esign uh and the first thing that i'm going to do is i am going to add some text to this video for whatever our captions might be so if i go to text on the left hand side i'm going to add a heading added a heading i'm going to move it down here and this is a video about toast i'm just gonna say this is about toast just just just make it keep it simple for myself uh so the text here in this particular case uh already contrasts pretty well with the background but videos obviously move uh so it's a

little bit unpredictable so what we're going to do is we're going to go to elements on the left hand side and i'm going to search for rectangle and what this is going to do for us is it's going to come up with a bunch of rectangles which i'm just going to place onto my canvas drag and drop it's chosen a color for me there which i'm not very happy with so i'm going to choose a different color i'm going to go for this purple because i actually really like color which is why it's my background uh

and so i am gonna move that and it's already behind my text which is nice but if it's not you can use the position button here just bring it forward and that's so i have put it behind my text and it doesn't need to take up this much space you can make it a lot smaller than that just so it gives a background for your text obviously the contrast on that is terrible so i am going to change the color of my text to white so this is our video so if i just demonstrate this for you you can see it's 8.4

seconds long this is the little uh play preview button here and i'm previewing it now and it's an eight second video that just says this is about toast so i want the text to update because obviously it's captions what i'm going to do now is i'm going to go to the bottom i'm going to right click on the first slide and i'm going to tell it to duplicate and now we've got two exactly the same slides and as you can see the time has gone up to 16.8 seconds but we don't want to duplicate all of the vid

eo we don't want to watch captions on one video all the way through and then it changes that's not how that works so the first thing we're going to do is i'm on slide one i am going to click the background the video which as you can see there and if i go up to this toolbar you can see that it says 8.4 seconds with a little scissors icon next to it i'm going to click on that and it brings up this timeline and it starts playing for me automatically so i'm just going to pause that because i don't n

eed it to do that and what i'm going to do is that is the entire length of the video i don't want the entire length of the video so what i'm going to do is i'm going to drag this purple bar at the very end and as you can see the tool tip is updating on the bottom and it shows me what seconds i'm up to and i'm going to drag that to 3.9 and i'm going to drag it as close as i can get to 4 without it changing over about there yeah that's good enough so now i have 3.9 seconds worth of video great now

i'm going to go to slide 2 and i'm going to click on the video and it's still eight point four seconds in this particular slide and i'm gonna do it's gonna be this purple bar over here and i am gonna drag that so it starts at four seconds so our first slide will take 0 to 3.9 seconds and our second slide will go from 4 seconds to the very end of the video and obviously because we are trying to update the text here and show that it's captions i'm going to change my text on slide two oh and i got

a bit lucky there just gonna why not okay so um i am going to download that video because i would like to have a look save file okay i'm going to open up my file on my computer and just drag it over here so that we can all have a look and if i press play on this now you can see that the toast is doing the thing and it switches the caption but the flow of the video is not interrupted so the first slide takes from 0 to 3.9 and because i have made sure that i have dragged those bars to be as close

to 3.9 and 4 as possible you cannot see any change in the video that is how you add captions to a video at the moment like i said before it's a little bit complicated and time consuming but it's doable and i'm really looking forward to the way that we're going to be doing it in the future let's close that down so how to include people will better include people with intellectual disability and light sensitive seizures so this one is very very very very important i cannot emphasize how important

this is i cannot also demonstrate this for you unfortunately uh this is one of the few parts of visual design that can actually really really hurt someone even kill them so it's important to know about and keep in mind always if you are creating any kind of content which uses animation please make sure that you avoid anything which flickers or flashes at high speed especially if the flickering or flashing uses contrasting colors it's estimated that around three percent of people with epilepsy a

re susceptible to light sensitive seizures and while that's not a massive amount of people overall any one single seizure can directly or indirectly kill somebody or injure them um back in 1997 there was a really very famous episode of pokemon uh it had a sequence where there was a lot of red and blue flashing uh over 600 children were transported to hospital when that episode aired uh it's not the only incident of tv causing seizures but it was definitely the most widespread incident either way

even if your content only causes one person to experience a seizure it's just too many uh even if it doesn't cause them an outright seizure either it can still make them feel extremely ill so be very very careful with flashing and if you must have animation and flashing and flickering make it lower contrast using the same tool that we saw before and make it small size so definitely not the entire screen like we've got going now for this slide this is a bit of a follow-on to keeping flashing to

a minimum uh it's generally a good idea to keep everything to a minimum unless it serves a good purpose so animations are fun and we have a lot of fabulous ones in the canva library but they can be very distracting to people with different conditions uh especially things like attention deficit disorder and as a result it can prevent them from understanding your message altogether because they're just focused on the animation if you're going to use animation keep it simple and make sure it's emph

asizing a point that you're trying to make and not detracting from it likewise keeping your text simple uh in terms of like sentence structure is important for people with intellectual disability and learning disorders of course it also benefits your audience who might not speak your net language natively as their first language or other people who might not have a good grasp of advanced language so children are a really good example here if you are trying to keep uh children engaged you need to

keep your text simple and there's a really fantastic tool that i love to do that and it's called the hemingway app so it's a really good way of keeping your text simple it makes a lot of different suggestions on how to refine your copy uh so on the right hand side you can see this is grade six uh many newspapers actually try to keep their content at around a grade six reading level and grade six for people in different countries it's equivalent to about the reading level of your average 12 year

old it's a good baseline if you follow the qr code or the link that jess has posted in the chat uh it'll open hemingway up for you and as you can see from the page title it's all about making your content bold and clear which is again a running theme of today's session so what we're going to do is we're going to write some text that might accompany your instagram video uh or the image that you've done we've just created in the past it doesn't have to be original you might just go and try some e

xisting content you find on the web and see how that looks in hemingway but give it a go uh try to simplify your text and follower suggestions and i am going to do that now again uh with you uh with text that i have grabbed about baked goods uh from wikipedia because baking is the topic of today and so this is some fabulous historical text all i need to do is i'm already on hemingway this is the default page when you open it up um and if you hover over things it'll tell you but they're also colo

r-coded so i can see the summary in the right-hand side but i'm just going to remove all of that text including the title if it'll let me there we go and i'm gonna paste my wikipedia copied text about baked goods uh so as you can see uh basically have been around for thousands of years and the art of baking was developed early during the roman empire debatable but it's also provided a number of suggestions for me so was developed is using a passive voice so maybe we could try and make that activ

e roman the roman empire developed baiting um it was a highly famous art as roman citizens loved baked goods and demanded them frequently for important occasions such as feasts and weddings this one's in red but you can hover over it as well it says that this sentence is very hard to read so what you're going to want to do is you're going to break it up into smaller chunks uh maybe it's highlighted the words frequently and highly here because it's got a lot of adverbs we probably want to reduce

the size of that sentence and break it up into two and i'll probably be happier with that um it was a highly famous artist robin citizens love baked goods citizens demanded them frequently for important occasions such as feasts and weddings and as you can see that sentence has now no longer been highlighted as hard to read so if you do this yourself uh you can take anything that you have written past present or future and just make it a little bit easier now again the text that i've copied it sa

ys grade 10 okay a for nine i would say aim for six uh so as an occupation it might be employment or some simpler word i am personally actually very terrible at finding the simpler words especially on the spot like right now so i'm not going to bother trying any further um that's what we wanted you to do i forgot to put that slide up for you uh but hopefully you've all had a go at that or if you're re-watching the video you're gonna do that but i just wanted to review what we've done today so wh

at we've done today is we have gone through the activities we have made our text visually more accessible um on a static image we have learnt how to make more captions more accessible uh and how to actually caption videos and we have also learned how to make text more understandable generally so um at the end of this you should have a simple image instagram post with improved text accessibility and instagram video with a little bit of time text and some text to accompany those items in the descr

iption and that's a really good day of social media content for a business if your bakery were a real place in terms of the topics we have covered these are how i would boil it down into some simple dot points uh if there's one word i want you to remember from all of this it's the word simple it's natural to want to pack in as much information as you can for your audience spend a lot of time making it sparkle and shine and look really beautiful i don't want to discourage any of that either it's

it's still important design is a lot of fun and so is experimenting with all the amazing tools at canva but at the end of the day design is about communication and if your audience doesn't hear the message you want to send it might not be the best design so remember keep it simple and you'll be doing lots of people a favor with or without disability and creating more effective designs in the process um but i would actually be super keen to hear from all of you as well what did you learn about ac

cessibility or disability or what do you what have you heard today that might make you make some different decisions in the future if you've already been designing have you learned anything today that you didn't have any idea about before um i would love to hear any and all of that in the chat um and if there are any questions from the last ones that would probably be a really good time to deal with those too okay you mean yomna has a question what size fonts are mostly used in flyers do you kno

w yeah i i don't off the top of my head i can tell you that for websites the minimum font size that you want to be going for is 14 pixels if you're doing print it's it depends on what font you're using because like i said earlier different fonts measure themselves differently so 24 points in one font might be huge and it might be tiny in another one um what i would recommend because i couldn't give you a good number and what unit it's in uh test it out uh print out a flyer or two uh and have a l

ook at what your audience says because uh your your audience might be everybody on earth but if your audience is for example an older demographic uh you're gonna want to be printing it bigger um so test test test uh there's lots of resources that you can do that with fantastic michelle says the san francisco public library is excited to implement these tips and tools and how we communicate with our patrons and advertise and share our programming i'm so excited that the san francisco public libra

ry is implementing this yeah i'm excited that you're even here today so it's great to have you live on the call so i think that's it for um questions oh quick question um we usually use calibri font um someone told me that in canva carlito and lato are the most similar to this are they both considered easily accessible to carlito and lato well i guess as long as there's sans-serif i don't know whether you have specific font knowledge nissa but as long as there's sans-serif fonts i mean look you

can use server as well i don't want to like tell people to never use serif because there is definitely a time and place for whether it is accessible depends on the content that you are printing uh so like i said before if you are choosing text if you are only having the words 10 numerals and percent on your your information you know maybe it could be confused with io percent or something you want to test out different fonts for yourself and see how readable they are the better fonts for people w

ho live with dyslexia are usually ones where the letter forms themselves are uh very different from one to another and we don't have this one in our library i'm afraid but one of the best fonts i've heard for dyslexic people is comic sans because each letter is so different um again test it out use your best judgment and ask around that's yeah that's all i can really tell you on that uh i wanted to wrap up by putting a challenge out to all of you uh so anything that you have learnt today just ma

ke and share something using any one of the strategies or all of the strategies or you know just put into practice what you've learnt so that it sticks just that little bit better thank you so much everybody for coming i have really really enjoyed uh giving this talk and seeing your feedback it's it's been really fabulous so thank you so much and we hope to see you at another campus-based event very soon take care thank you [Music] you