UI Design Contrast: 2 MUST NEED Tools & How to Use Them
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703721748_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: UI Design Contrast: 2 MUST NEED Tools & How to Use Them
There’s a very good chance you’ve been screwing up your contrast and I’m here to help you with two excellent tools before we begin this video sponsor Isla node and they make it easy and affordable to host your site app or service on whatever technology stack you use unlike entry-level hosting services
The node is a step up to powerful fast fully configurable cloud computing with server plans starting at just $5 plus no hidden fees or surprise outages Linode offers a no-nonsense hosting at a price you can afford so sign up now using the link below to get a $20 credit on your
New Linode account so I’ve done contrast videos in the past but I never really got in depth very much and there’s a couple tools that I want to feature that I didn’t mention in the previous video that are awesome alright so first before I talk about those tools there’s
Something called the wcag 2.0 contrast standard and you can find out more information here if you just go and type in Jeff wcag 2.0 color contrast you’ll get to this link and there is a ton of literature here about how they arrived at these but basically the idea is it’s
A is the contrast minimum is a visual representation of text and images of text that has a contrast ratio of at least four point five to one except for the following like large text etc so basically what this means is when you’re going to create a color scheme for a
Project you should adhere to these standards and the reason why there’s a double a and then a triple a is because we’re all have different issues with our eyesight some people have perfect eyesight many people don’t there’s 2040 vision there’s 2080 and if you can create your color palettes so
That it can reach as many people as possible or in other words as many as people as possible can read I in in you know be able to experience your project as you intend it then that’s the better thing so we’ll see how these ratios and
Stuff come into play when we look at the plugin so the first plugin we’re going to look at it’s not a plug-in it’s actually built into Chrome right now and it’s in the dev tools and it is awesome so I’m gonna show you how to use that and we’re gonna
Look at a few different examples to see if they actually meet these these standards and then also we’re gonna hop into Adobe XD to check out a plug-in called Stark now Stark is also as in stark contrast by the way Stark is also for sketch and as well as eye figma
That’s right figma and it has a free version which is perfectly fine and then a paid version which is like two bucks a month or twenty dollars a month and I’m going to we’re going to create our own color scheme with a help of a color scheme service called coolers CO and I’m
Gonna show you how to fine-tune it to make sure that your colors and such as you’re using them in the context of the UI design you’re designing your UI elements and components that make sure that they adhere to at least double a of the wcag 2.0 color contrast standard
Alright so if you have it yet make sure to subscribe okay so here’s gonna be our first example we’re gonna check out three different websites here just to show you this in action when it comes to get out of here okay when it comes to checking contrast here within Chrome’s dev tools
So here’s just a nice-looking landing page and we’re gonna take a look at some of just a couple of the areas here to ensure that the contrasts meets these men minimum specifications will at least double a alright so to get this out hit ctrl shift I and we want to go into I
And select one of the type based elements so that we could check the contrast here as much as possible so the area that we’re gonna check here well first check this button alright so it’s this I you know pretty vibrant sort of green with a white text on top so
We’re gonna choose this little selector right here you select any element click on it and we can see first that if we click this a element we can see the background color associated with it right here and it falls right here on the color spectrum and it’s actually
Very similar to my eye corsetry branding color and then we have they have a div class and here for the label and we could see the color is right here now immediately we can see right away contrast contrast ratio is two point three four and it has a stop sign
Meaning it doesn’t meet the required four point five ratio as specified here so double a is four point five for smaller text if you get to larger text as you see in another example it’s 3.0 i but the higher the number for instance Triple A that means the the most
Contrast or it’s it’s engineering the most contrast as possible for people who have really really bad eyesight like twenty eighty or something like that and so now you have a couple options like how do we fix this situation well you have two options really you can adjust the foreground color or you know
The actual color of the color property here in CSS of the text itself or the background so we can see these lines right here and these are indicators letting us know that if there’s if you want to be able to adhere to this standard at least two double-a then you
Need to be within this section right here based on the current color that has chosen so what we could do we can see the color you could barely tell the color picker right here is at it’s completely white so it’s way up here but you can see as you move this around its
Gonna start adjusting the color ratio based on where you’re at in terms of saturation and the hue and all that good stuff all right but if we come down right here anywhere inside of this line we can see it gets to a green checkmark and you can see how it’s showing us in
Real time in this button and this button which has the same class what it looks like alright so if we go all the way down beneath that line this second line here we could see it’s satisfied and it’s in a triple-a you don’t have to do
That I but it’s there for your you know your reference and you also have other options you don’t have to necessarily stick with in like that this red color which is just default you can move perhaps into the same green hue right here and notice when we move
This up if we move this around notice how the lines are changing and that’s based on if you’re getting into the blues and the purple area you generally are able to have a little bit more color in order to satisfy these requirements but if we go right around here which is
Roughly the same color as the background you know we can we can push it more this way and give it more of that green color if you wish while still satisfying these I I ratings right there alright let’s check it take a look at another example so
Right here this is a nice sight very well designed I what about this what do you think this would pass well let’s see control shift I let’s first take a look at the labels because we have two different sizes here that we’re working with so I’ll choose that and we’re gonna
Find the color and this is passed now notice it’s 3.0 why is it 3.0 it’s because this is larger text so it’s either 14 points bold and larger or it’s 18 points regular and larger in order to be just 3.0 and then as well Triple A
Goes from seven point zero to four point five i when it comes to larger text now if we do choose however this and we go here we could see that this one fails the contrast ratio it’s pretty close as three point one seven but we need to get
To four point five if we want to satisfy these requirements again you can go beneath this line and get there or you can change the background color and get there as well so you can see it’s kind of up here we could come down this way
We could shoot over to the right let’s see what that ends up doing so we go here and OH four point four nine we are literally very close to a satisfying I was trying to think of the mathematic well I won 100 right so we’re very very
Very close so I this is a great way for you to really determine you know are the elements that people need to be able to see that doesn’t necessarily mean it’s it’s images it could be icons or text rather but it could be icons as well I are they adherent to these standards
Very important stuff let me go check this one out and this is 3.17 that’s because it’s a pretty large text right here and it’s very close so you can get very close within these guidelines and it’ll work out quite well so instead of doing another example we’re just going
To go on to creating our own color scheme here I think you get the point with the Chrome extension so there’s a bunch of tools that you can use to help you come up with color schemes of course you don’t have to use any you can come
Up with them on your own I’m choosing just to use one right here coolers dot see oh I’ve done a couple video as I believe where I’ve outlined different tools and this is one of them that I featured I do start the generator and this is a very robust app for just
Coming up with color schemes you hit your spacebar as it suggests right here to just randomly come up with color schemes all right so once you find maybe one or two that you like or you’re just a single one you can hit lock like hey I like this one I think that’s freaking
Good these complement each other well so does this one right here I in fact I like almost all of these so you can keep on hitting the spacebar and it will continue to change these up this is like an almost white let’s keep that yeah you
Know what this is all good let’s go ahead now and export this so let’s export an SVG file and now I’m going to show this in the folder and I just moved it off-screen and now I have a blank document a desktop 19:20 document open here in Adobe XD you can use whatever
You also you want for this example and I’m going to drag in the SVG file that was exported from that coolers app alright so I’m going to turn off responsive risa actually it doesn’t even matter I can just take this we’re just gonna use this as a quick
Color palette section right here alright so how will we use this in the context of you know in an actual app or whatever well let’s get out our artboard tool create another artboard maybe we’ll just do iphone XR right here alright so at this point you have to ask yourself you
Know we don’t really have much context of what this app it’s not even an app I just wanted to do to design a quick just a quick section maybe like a hero section of a landing page or something you can ask ourselves all right eye which background color do we want to
Start with well you can go light you go dark sometimes you have sites that go full-on color blasts and maybe a little use something like this well let’s just give it a shot and see what happens we’re gonna use this pinkish color right here so I’m gonna take our tour here our
Rectangle tool get rid of that border that’s always being added it’s very annoying and let’s see here we’re going to choose that color right here so we’ll say the requirements of this app we need a headline of some sort so we’re going to left-click here and we’ll say I don’t
Know a fun time I literally just came up with that off the top of my head I can’t think of anything else I don’t know why I come with these come up how I come up with these ideas but it was like the first thing that came to mind I don’t know
Let’s just do new neato it’s like a fun round roundish sort of font alright so how do we know if the contrast here is working well in Adobe X XD or sketch or figma well I I believe for all three of these apps I know for
XD for sure and I know for sketch for sure I’m not sure about figma there’s an eye a plugin you can get it’s free with a paid version where you can extend it called Stark alright I have it installed already so if you go to plugins and discover plugins and you type in
Right here I this is the one that you want to install so get it installed and here’s how you use it we’re gonna select two elements like a foreground and background we’re gonna go to plugins and you can also use a shortcut and check contrast
Shift ctrl Q all right so you won’t want to remember that because you’re gonna be using a little bit I although we can use the rapid contrast no checker as well all right let’s just do this check contrast all right so it shows this dialog that you can’t really move
Around or anything but it’s letting us know hey wait a second even for normal text I this doesn’t suffice but because this is large text it is sufficing at a three-to-one ratio because it’s at 3.75 it’s very close so let’s close this and another way to check this with this
Plug-in and I do have the paid version of the plug-in so I’m not sure if this is disabled or not rapid contrast checker I think that’s what the the C is the final see in that acronym there we go where it shows you this right here so
Now we can just like choose these things on the fly without having to hit a shortcut it’ll show us automatically so let’s go ahead and let’s get a second piece of type where we have smaller type like a sub-headline of some sort so i’m just going to do that and then i’m going
To we’ll make this like sixteen alright and then we will also go to my lorem ipsum here insert text all right that’s good now let’s check this let’s take this hold shifts like the background and doesn’t work this is a no-go so what do we do
Like I said we have the options here unfortunately we don’t have that really cool RGB sort of lines that to let us know what is acceptable so it’s kind of trial and error you can go black in which case this does work it’s five point six one or
You could take this background now let’s go ahead and we’re gonna duplicate this duplicate ctrl D move this down select this one and then let’s go ahead and change this color because remember we just kind of randomly chose this color sort of randomly but we were now we’re
Getting into the area where we’re going to really tune in on exactly where we want to be with this in order to satisfy these double-a ratings with white text so we can push this over perhaps down let’s see what that’s done oh we are so close four point four six look at that
So we can just take this again four point eight six there we go so now it works and it definitely works with this one because this is a large text anyways so if you wanted to get to Triple A it would have to be seven to one which is I
You know quite difficult when you’re using vibrant really saturated colors that are kind of bright and so looking at this I what you your my gut reaction to this is wow you have to really kind of change like look how big of a difference these two colors are and that
Does seem true when you’re comparing them right next to each other so if we got rid of this we can see that this isn’t all that far off from this color right here again that’s if you want to satisfy the requirements you know of these right here I and if you’re as
Interested as you should be I would say to try to make everything as accessible as possible to you know is a wide array of audiences and people who have eyesight problems then to me it makes perfect sense to go with this if you’re gonna use you know white text as opposed
To something like this over here alright so I will do another example this just to keep on playing around let’s do a button this time all right let’s get in here a little bit closer get rid of that border so we’ll just have a button right here and this
Is a process so your job isn’t just done after you do a certain area you have different components that are in elements that are a part of your design like buttons for instance so you have to make sure because a button obviously will have text in most cases that people
Can see it all right so it’s also a balancing act when you’re dealing with multiple elements that to make sure that the contrast you know in relation to this background here and then with the text here and everything kind of fits together in a coherent way for instance
Like we have our little color scheme that we quickly checked out if we go ahead and let’s say and change the color here to this for instance these don’t really that this doesn’t look very good in my opinion it doesn’t mean that you have to stick to these colors at all but
They’re there for your reference and like this would be very ugly like that doesn’t really work well at all you can see they don’t contrast well together either so let’s just use this one it’s it can vary off white is so barely you can see it’s like slightly green it
Looks like and again you don’t have to be tied to these I always kind of like this color combination where you have this sort of color right here it goes very well together it’s not quite white but it’s a cream color that really does well with that sort of color so you
Could say okay well go ahead and change that to this there we go all right so then let’s use our contrast picker again with the center this will say let’s go I don’t know all right and so I guarantee you based on here let’s make this bold based on this color
It’s awesome is twenty point five five it’s practically the most you can get I you can also experiment by perhaps using this color will this work I honestly did not know if that would work and it is very close it’s 4.75 works well it’s large text so yep definitely I
What about using for instance different background colors how does things change or how do things change for instance this background let’s say for instance we wanted to use this purple color alright you can already tell this is going to contrast a lot more than this so it’s at twelve point six five this
One’s at four point eight six so these are just decisions that you should really take seriously when you’re determining you know like what a large background color is going to be if you really want to make it as accessible as possible what if we wanted to make this this button that color
Well that doesn’t in this case it doesn’t really contrast too greatly in fact you probably want to bump this up a shade or so and then where we go we go black with this it’s actually five point four nine I personally don’t like that I always like white on saturated colors
Usually this is three point eight three so again it’s one of those balancing acts where we would take this down a notch but then it starts not to contrast quite well with the background so if we take this these two elements it’s actually 5-1 this actually works pretty
Well right there alright so hopefully you found that helpful all this stuff I’m going to be explaining in more detail and also showing it how it all comes together in terms of complete UI design in my upcoming course which is going to be releasing here I by 2020 and
That is of course a complete UI dot design visit that in the browser I’ll have a link here in the description in the comments and enter your email so that you know when it releases and it is going to be an awesome course so definitely give a
Like give a comment if you enjoyed it and also subscribe I’ll see you guys soon goodbye You
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Hey all, I'm working on an elaborate UI design course called CompleteUI. Go here: https://completeui.design and enter your email so you're ready when it's launched!
i dont have contrast ratio block in dev tools
Unbelievable. I didn't know that TJ Dillashaw is a designer.
When I open the inspector in Google Chrome, I don't see a contrast option when I select a color. What am I doing wrong?
11:58
Wow thankks i needed this
Great Content! Subscribed.
You are a lifesaver for us people who are stumbling through designing without any guidance!
Love your videos man. Especially the new UI vs UX videos you just started. Looking forward to more!
I really needed this, thank you.
Very good and informative tutorial, but I don't find the contrast scale in Chrome dev tool, should it be enabled somewhere? thank you.
What if these changed tones do not match the brand colors?
you really need to make a video for making svg animations without selling your soul to adobe
This is THE BEST VIDEO ON INTERNET FOR UI/UX.. hands down, respect!! Thank you❤️
Adobe XD latest version not showing Time Trigger how to solve it?
I don't know about that.. Thanks btw. 👍
Ps( plz update the upcomingGame ionic application udemy course )
Ur background video & audio is so subtle
Love ur videos sir 🙏💖
goood
Black T-shirt from linode nice.
I've been learning Xd on my own and stumbled upon your videos last week. I've been addicted to watching them! Keep the great content coming!
Thank you again!:)
Always looking forward to your videos. I switched to figma after watching your tutorial video and I must say,that's the best decision I've ever made! Thanks a lot man