Auto-generated transcript I'm going to teach you an extremely important concept for building more accessible websites and this is something I don't see any other designer talking about. Most people are so obsessed with making beautiful interfaces that they forget to make them usable in the first place. Because here's the thing, if we use color as the primary means of distinguishing between different elements in our UI, we risk making our website inaccessible to colorblind people, which is a surprisingly large amount of people. Millions of folks all over the world are suffering from some form of color blindness so it makes sense to build UIs that they can use easily right because after all if they can't read your content in the first place then they're just going to leave so I'm going to show you some crucial tactics you can use to create accessible interfaces for these folks without sacrificing your design aesthetics first of all my name is Hassan I run a freelance web design agency and in my spare time I make educational content like this one you're clearly interested in this so scroll down and click subscribe right now it's a win-win for both of us now let's get into it how do we build accessible interfaces for colorblind people so the thing is most designers are not colorblind and that makes it very easy for us to forget about the symptoms forget about the needs of colorblind people or just disabled people in general like design is such a visual field that no colorblind person is even going to consider it as a career and since designers don't have these symptoms, they can't understand these symptoms, and then they can't build accessible interfaces for people who do go through these symptoms. So that's the conundrum we find ourselves in. So keeping that shortcoming in mind, here are a bunch of crucial tactics that you can implement right now to build more accessible interfaces for colorblind people. And again, without sacrificing the design aesthetics of our website. We want to build accessible interfaces, but we don't want to sacrifice our design aesthetics for that. So the main thing you have to keep in mind is this. Don't use color as the primary means of distinguishing between different elements. If there's some important information in your UI and you're only using color to convey that information to the user, then you're doing it wrong. Don't use color as the only way to show that information to the user. And if you take nothing else from this video at least take this one rule All of the tactics that I gonna discuss in this video are based on this one exact rule Most people would save this best stuff for last but I just going to give it to you right now This is the single most important element for designing a colorblind accessible interface. You want to use color as a supporting element to support the information that you're trying to convey, not as the main element. Now with that being said, let's dive into specific, practical actionable tactics first use icons and symbols alongside color now this is a big one because if you use icons and symbols alongside color in your ui then suddenly people don't need to rely solely on the color to get what's going on in your app let's go through some examples and you'll understand what i mean first here's two versions of a finance app that's currently displaying our account balance now it's pretty obvious what's going on here in the first example we made a profit and you can tell that because it's green. While in the second example we made a loss and you can easily tell that because it's red. Now here's the thing. The most common form of colorblindness is red-green blindness. And this is where a person cannot distinguish between red and green. So a red-green colorblind person is going to see our UI like this. See how difficult this is to understand? I can just barely tell the difference between those two images. It's like a completely different image now do you see there's no way to tell whether we made a profit or a loss but I can fix that just by adding a bunch of icons here now with these two icons here we can clearly tell whether we made a profit or a loss even if I remove the color from the picture entirely the icons still give us the crucial information that we need and that's how you use icons correctly to show information to the user and this is also why it's a good idea to use icons in alerts like success messages or info messages or warnings and errors, someone who suffers from monochromacy, big word, I know, but basically someone who cannot perceive any color at all. If we use icons, they'll still be able to understand these alert messages even without the color, just from the icons and the message contents So you can see how important icons and symbols can be to creating an accessible UI So now that we understand this here how to implement this practically Anytime you notice in your UI that you using color to indicate some information try adding some icons there icons or symbols or textures or anything like that That way you're not using color alone to indicate that information and it will make your UI a lot more accessible and honestly, probably a lot more beautiful as well. Using icons intelligently like this makes your UI look better, not worse. Now moving on to the second tactic, links. Links should be underlined or at least somehow differentiated from the rest of the text and this is doubly important for inline links which are the links inside a regular text paragraph or something because if you don't differentiate those links then it's almost impossible to tell whether they are a link or just part of the regular text. Now again in these cases most people just use color alone to indicate to indicate links but we're better than that so we're gonna go one step further. We're going to use underlines or some other CSS trick or design trick to differentiate those links from the rest of the text. If you don't want to use underlines that's fine but have some way some CSS trick or design technique to differentiate these links from the rest of the regular text. Underlining is the obvious solution here but of course you can choose whatever you want just as long as you're somehow differentiating these links from the rest of the text. Just look at this paragraph of text here and see what happens as I turn it to grayscale. the link disappears or more accurately it's impossible for us to tell what is and isn't a link anymore but if i add a simple underline here the link is suddenly visible again now instead of underlines you may also want to try using a chevron right or a similar icon next to the link and this can work as well but it does mean that you'll be mixing up icons inside of your regular text and some websites can do this other websites it just looks weird based on their design rules and their design playbook but it is something you can try out and if it looks great then awesome now you might ask what about the links in a nav bar those are all links and none of the websites I see underline them or distinguish them in any way you just put them there like regular text right and the reason is actually very simple it all web conventions since most users expect nav bars to be full of links we don need to add any striking visual styles to indicate that since all the users already expect it to be just a big list of links. But when it comes to body text or other content where links are intertwined or mixed in with all sorts of different content and this kind of separation isn't really obvious, then you should really indicate what is a link and what isn't. This makes things easier for your users here. Now moving on to the third and final tactic that I'm going to show you for building colorblind accessible interfaces. Develop in grayscale and then add color later. This is the single best practical actionable tactic I can give you for designing colorblind friendly interfaces. Developing in grayscale will force you to use things like icons and textures and spacing and borders and all sorts of different visual techniques, design techniques to indicate information to your users. If you design a UI fully in grayscale and then add color after that, the color will just be a supporting element. It'll just be there to support the information that you're already conveying. And even if you remove color from the picture entirely, your design will still be very functional and usable. And also, since this forces you to use things like icons and textures and borders and spacing and all of these other design techniques, right? Since this forces you to use all of these things, you actually end up making much more beautiful UIs because you don't over rely on color alone to indicate any information in your UI. You use all of these other techniques in your design tool belt and the result of that is just a much cleaner and more beautiful UI. So develop in grayscale, try it out and once you've built a complete UI in grayscale then you can add some color to it. So that's all of the tactics that I can come up with right now. Now you should be able to create much more accessible UIs. A lot of the design tactics that I post on YouTube, I go into a lot more detail on them in my free book on web design. And I think you'll enjoy reading that, so I'll link that in the description as well. It's free and it's full of design tactics, just like the one we discussed in this video. So, if you're interested, check that out as well. Like, subscribe, and if you want to work with me, then check out my website. The link will be in the description. That is all. Thank you for watching and bye.