Categories
Online Marketing

How to check for accessible colors — A11ycasts #17

Really Really different, Whereas if you take two colors that are very Close together on the color wheel, it ’ s, going to be harder to tell the two apart Now the reason why this is important in web Design is because often times our whole goal is convey some information to the user, usually Through text and images, But if the contrast of our text is a little Too subltle and too mixed in with the background, it might be difficult for the user to read.

The page and that might sort of degrade the user experience. So what I wanted to do today is walk through Some of the process that I use to sort of check the page and figure out if it has appropriate Contrast and how to tune it up if I find some issues But to start follow me over to my laptop And I have a little presentation that I want to show you It kind of walks through how we measure contrast.

On the web, So here I ’, ve got a set of text boxes on A white background, and up above you can see, I ’ ve, got these numbers up here for some Contrast ratios, So I ’ m measuring in terms of luminance The difference between this foreground color and this background color Now on the web. We actually have guidelines That try to instruct us what our contrast minimums should be So the web content accessibility guidelines, In section 1.

4.3, they say for body text: you want to aim for a contrast: ratio of around 4.5:1, for, like smaller text or your general body copy For larger text, something that is 14 point. Bold or 18 point you can ratchet that contrast ratio down just a little bit to 3:1. So if we go back and we look at our image – Of contrast, we ’ ve got these first. Two examples would meet that minimum contrast requirement.

So this one is just pure black on white, so its 15.9:1 Thats really high contrast. This one is a little more of a subtle grey But we still have 5.7:1, which is pretty nice. These last two, though, are just a little too Low contrast, so they wouldn ’ t quite meet that requirement. We can also actually bump this up, though Theres a enhanced contrast recommendation in the web content accessibility guidelines, As well So this is for situations where you know you Might have either an older audience or a low vision audience.

In that case, we can bump the contrast ratio. Up to 7:1 or 4.5:1 for the regular body text. So if we go back – and we look at this example – Here, really only this first one would meet that enhanced contrast, ratio requirement So consider who your audience is going to Be when you ’ re, building your site or application, and that can help decide where you want to Aim on the contrast ratio scale, I use a number of different tools to try to Figure out, if I ’ m nailing those contrast, ratio, minimums And actually my friend Louis, has done this Really cool thing where he has put together this accessibility testing for the web handbook.

Called OATMEAL, which stands for Open Accessibility, Testing Methods for Experts and Lay folk. He actually has a whole guide in here about How he measures color contrast and the folks on his team do that, And so we ’ re going to kind of follow this Guide a little bit, We ’ re not going to use all the exact same Tools, but this is a really cool methodology that you can check out and use in some of Your own apps to maybe figure out your process, So what I ’ ve got here is a website called The accessibility blog and we ’ re, going to follow two of the steps in that OATMEAL Guide doing a sort of semi-automated check using a tool like aXe And then we ’ ll, do a more manual spot.

Check using a WCAG, color contrast analyzer, So starting on this site, the first thing: I ’ m going to do. Is pop open, my DevTools, I ’ ve already installed the aXe. Extension For Chrome, If you actually check out our previous episode, On A11ycasts and I’ll leave a link to this down in the show notes we covered all the different Ways that you can install aXe on your system, So I ’ m just using the extension for Chrome Here – and I ’ m just going to open it up and check out this page and hit the analyze button, And you ’ ll – see that it tells me over here.

On the left that I have a few elements that do not have sufficient color contrast, I ’ ve. Got about 7 issues here: It ’ ll! Try to give me a CSS selector to the Elements that need some work, but there ’ s an inspect button that I often use to just Inspect the element in the Dom – and I can scroll up and say who exactly is this Alright, so we ’ re starting of with these Little anchors up here in our navigation – and this is one those areas that I see a lot where It looks like we ’ re, actually pretty close to having good contrast here, but we ’ re.

Sort of on the bubble – it ’ s, a little unclear. Are we hitting that or not So? What I ’ ll often do. Is I ’ ll. Take this Foreground color and I ’ ll, take this background color and I can use another tool this one That I often use is called Lea. Verou: ’ s, Color Contrast Checker, so I ’. Ll also include a Link to this down in the show notes, And then we can just drop in our foreground.

And that background color, and we can see that the contrast ratio of these two is 3.6 So its not quite where we want to be for smaller text Again, we want to bump that up to about 4.5. So this is an area where I know that I need To go back, and since I also have some of these elements right here that are even lighter, And since I know that this is pure white text – and I can ’ t make it any brighter, my only Real option here would be to make this header bar a darker blue, so that all three of those Links pop a bit more Another thing that we might notice in our Tool, if we step through some of the options, is that we also have areas down here like This little sub-heading, which we ’ ve, got a kind of subtle, grey on white thing, going On and again we can take that into Lea Verou: ’ s, Color Checker and we can figure out.

You know, Are we on the bubble One option if we want, we can make the text Bigger so we can maybe hit 3.0 contrast ratio That ’ s one option we just make the text Sort of larger, if we ’ re on the bubble Or we darken the foreground text because The background is pure white, so we can. ’ t really make the background any lighter, So we can go through and we can work through. Our CSS and tune those colors up and that ’ s really what a tool like aXe is doing It.

’ s actually, looking at the CSS values, For background and foreground, But there are some situations where a tool Like the aXe inspector is not going to be able to tell us if we have contrast issues And that ’ s in situations where we don ’ t have clearly defined foreground background. Colors So, for instance, over here on the right, I ’ ve, Also got this advertisement, and these are pretty common, where you have some text over An image background and the text itself might even be an image right So for a tool like aXe.

It can ’ t pick out. Two distinct foreground background colors, so we ’ re going to need to use another tool. To figure out, if we have contrast issues over here, So the tool that I like to use is the WCAG 2.0 Color Contrast Analyzer, It ’ s, another Chrome extension and I ’ m. Going to warn you, it ’ s a little bit buggy, but I ’ m going to walk you through how I Use it and maybe point out some of the issues, so you can work around those, But basically what we do here is after we ’ ve.

Installed the extension we ’ ve got this extension up here in the top right click. On that, What I found to be sort of an issue here is On retina monitors, if you try to tell it to analyze a region and you select a region, It ’ ll, be sort of off Like it sort of zooms in and it doesn. ’ t. Seem to be able to handle retina that well, So, instead, I ’ ll tell it to capture visible Content And what this is going to do, you can see That it ’ s already sort of zoomed in what this is going to do.

Is it ’ s going to try To scan all the pixels on the page and it ’ ll highlight the contrast between that pixel And the ones next to it, So you can pick out those areas that have Low contrast, While it ’ s scanning, so it will take a while Right, it ’ s, only up to 27 %. So far, so I can walk through some of these settings for You, though, So the first one here is asking us what level We ’ re measuring at So again.

I mentioned that we have the minimum Contrast ratio of 4.5:1 or we can take it all the way up to the enhanced contrast ratio. Of 7:1 right So again you can choose your target there. Then there ’ s. Also this pixel radius option And at first I wasn, ’ t quite sure what this was for by default, it ’ s set to one. So it ’ s. Going to compare the two pixels next to each other, but it goes all the way up to 3 Often times when we ’ re working with text.

On the page, it ’ s, not a clearly defined. The text ends here and the page starts here. Instead, it ’ ll, do a sort of anti-aliasing Thing So if we go and we look at the image of our Text this D: here it ’ s, actually sort of three colors. So we ’ ve got a couple greys and then the Solid white and that ’ s, what forms the body of that character When it ’ s, asking us what pixel radius that We want to use it.

’ s, basically asking us what sort of anti-aliasing range do you want? To accommodate, for So what I do is I tend to set it to 2. That way I can analyze a couple pixels next To each other, Alright cool, so it looks like it just finished. And what it ’ s doing here? Is it ’ s drawing these white outlines to show us areas of high Contrast And any place where it gets sort of noisy Kind of like right in here we can tell that we have slightly lower contrast If we go over and we look at that ad, we can See that yeah we definitely have some issues here So up at the top, where it says developer.

Friendly, it seems like it: ’ s, doing ok.. We can toggle this mask on and off. So when We hide it. We can see that when we get to the body text inside of this ad, it actually Is even more translucent than the header and when we get down to the bottom and it Mixes with that background, it ’ s, really really tough to see. So this is an area where we know we might Have to go back to the designer and say “ Hey, I can show you this and I can definitively Prove that there is a contrast issue here, and this is a place where we need to maybe Tune it up Either give the text a backing, so it pops A little more or figure out if we can use a different background image, something that Doesn, ’ t interfere with the text as much ” So yeah using these tools and using a guide.

Like OATMEAL, you can, through you, can analyze the contrast for your site or application. Maybe look for problem areas tune. It up make sure users have a better experience That about covers it for today. So if you Have any questions for me, as always, you can leave them down below in the comments Or hit me up on a social network of your choosing, As always. Thank you so much for reading. And I ’ ll see you next time.

If you want to learn more about color contrast, We ’ ve got some additional articles. You can check out in our playlist Again thanks for reading and I ’ ll see You next time,


 

Categories
Online Marketing

Design Trends (for UX/UI Designers)

My name’s Brittany bowring, and this is digital design trends for 2019. How was that was a pretty good reporter, not bad. I’m going to take you through what I’ve found in all of my research. I was you know just up all night long. You know just studying, reading everything so that you don’t have to isn’t that great. I talked also to all of our head designers here at AJ and smart got their opinions and what they think is going to be important, basically in the coming year, so jumping into 2019.

After reading this article well you’ll have all the information you need right right. So, let’s just get started. Basically I’m going to take you through I’ve got all these tabs open of the things that I found that I think are really important and of course it’s not just this one person who I’ll show you, as mentioned the trend. It’s probably come from various different points, but I’ll show you kind of what I think are the the big ones that just kind of kept popping up so the first one that is also, I think for me most interesting, is the minimalism trend.

So this kind of actually crosses into a lot of different categories, but the basic idea actually I’ll, show you here on my page. I have this kind of vlog, it’s just all about minimalism in design, and they talk about minimalism actually is which I think is important to define when you’re actually telling someone it’s the trend, so the Webster dictionary defines it as a styler technique. That is characterized by extreme sparseness or simplicity, so I think this is really interesting because a lot of times I mean in the past years, what has been like the most common kind of issue in product design or something that we’ve been trying to solve is engagement.

We want to engage people, we want them to spend a long time on our apps. We want them to. You, know their screen time to them to increase and now really making a pretty conscious shift into basically the opposite, so people are talking a lot about. You know making sure that you’re not actually engaging the user when you don’t need to be. You know making sure that when you’re asking them for things or when they’re moving through your product, you’re, not just like throwing unnecessary notifications at them or pop-ups, and all these kind of annoying things, people are even more like anxious and busy and overwhelmed as it is In this modern world, so I think it’s important that we as product designers and in this industry are just kind of being mindful of that.

So another thing from this anethe messier he talks about like time-saving design features like people are really really busy. So you want to actually make sure that the time that they spend using your product or your service is for good reason or you know, you’re actually providing value for them. So you know talking about designing with common use and user navigation patterns context. Specific features.

That’s interesting gentle nudges. He calls them, which I think is kind of interesting. I hate that he says the word pop-up, though, because I think the world would be a better place with less pop-ups, but it’s kind of interesting. You know he’s just sort of talking about how we need to kind of keep the user in mind a little bit more going forward, and what are the common issues that they’re facing in their lives, which are very often like anxiety and overwhelmed? He also down here talked about like getting rid of common annoyances.

This is an interesting article. He talks yeah, I mean people are using an average of 30 apps per month and about 10 a day, which is a lot actually interesting that he talks about 2019 could be the beginning of the end of passwords. So actually, just using like verification codes and not having to think of all these passwords constantly, it’s going to be kind of helpful, so talking about here, page load times, storage, space transitioning from one device to another.

That’s interesting, making sure that you know you’re. It’s a cohesive experience for the user, so I think that I mean I did talk about minimalism before, which was which I kind of got out of that I got out of that sock there, but the point that I think is really important is that you know We I mean apples talking a lot about it. I think Google, as well just about actually like reducing screen time, I’m getting pop-up messages on my phone.

All the time telling me how much screen time, whether it was more or less than more or less than last week, and I think that is important to be conscious of moving forward into into 2019. So first one minimalism, the second one is the Internet of Things. So more specifically in that realm is voice. I mean, I know that. That’s also like a common thing that everybody’s talking about, but you know, there’s a huge rise in smart home devices like things like nest, things like Google assistant, obviously like Siri as well.

This photo is just I can’t look at this photo without thinking that it’s like just a little bit, there’s just something weird about it. I don’t know it’s not a good photo. Let’s just say that so this person cata Cadabra studios – I would I would have put another photo in there. If I were you but super interesting, I mean by 2030, 30 percent of searches will be done without a keyboard or screen. I think that’s something really to be conscious of so how can your product or service actually interact with these voice assistants, and how can you make that a streamlined process and actually delight your user with that? It’s going to be really really interesting, yeah so pop about this time when ecommerce here yeah so combining voice technology and preset commands, so customer sim can simply ask for what they want and get it.

I mean a good great example of this is how Google assistant has actually integrated with uber. Basically, what they’re doing is you can actually say to your Google assistant order me an uber to go to work and Google assistant knows where you work. They know where you live, and they can just order it instantly without you having to put in all that extra information. It’s a really good example of integrated voice interfaces, so that is definitely going to be a big one.

The third one, which is cool for me because I work a lot in this sort of category – is the third kind of trend that a lot of people are talking about. Is content focused experiences, so this is coming from like a prediction. Upcoming UX trends from Academy X, I yeah it’s super interesting they’re, talking about how you need to make sure that the content that you’re actually showing the user and the way that you’re guiding them through it is like a delightful experience and isn’t you know you’re not Giving them too much you’re, not confusing them you’re, not overwhelming them, so it’s like 2019.

One of the biggest trends would be the ability to tell compelling stories around a digital experience. I think that’s really really important to think about they’re talking about like live article and article ads, so that’s more like the marketing around your product, but also super important to keep in mind, I mean we talked about it all the time how UX design and product Designers should know more about the business more about the marketing of their products.

It’s really important to keep that in mind when you’re building them yeah. I think that, in summary, for the content focused experience is the idea is just that. It’s important that people have a nice Pleasant time, interacting with your product or your service. So in you know, it means that, like words, actually matter a lot, the content, whether it’s article or animation or just text, it’s important that you think a lot about that and that shouldn’t be a second step.

It shouldn’t be, you know, even the content writer, the copywriter should actually be involved in sort of more in the development phase. So I think that’s really interesting. Moving forward into 2019. The next one is talking about it’s down here. This one was also from a NASA Nasir and he’s talking about making personalized experiences for the user and how you know, making them a little bit more more streamlined.

So you know whether it’s in the form of emails based on knowledge of previous website interactions or text messages. You know it’s important that your UX is actually personalized to the user. It’s going to be pretty big in 2019. He’s talking here about chat BOTS. I find that interesting because I kind of think chat. Bots are on the outs, but that’s just me personally. So don’t you know, don’t don’t look too much into that, but I think the voice is on this way in and I think chat.

Bots are kind of a thing of the past. I know myself. I hate I just hate, interacting with a chat bot. I really find it super impersonal, which is interesting because Facebook, of course they’re popping up all the time. Do you want to see like if I’m running ads or something on Facebook? It’s always like your I’d performed like this. Do you want to see more information, and I guess it’s interesting that they can? You know quickly do that in the form of a conversation.

It does create a little bit of this personalized feeling, but I think that, just in general, we can use a lot more of that – let’s see here, just yeah paying. Okay, this is cool so based on trends see today. This means paying attention to things like transparency and security. Now we live in Germany, which, like security data protection, is really really big, but I think it’s really cool that it like this is going to kind of transcend into the rest of the world.

I mean it makes sense right like like with what’s going on politically right now, people are really into transparency, they’re really into you, know, honesty and they don’t want their data used. For you know weird creepy secret stuff, so I think it’s important to think about that. You know think about the political space what’s happening and then like actually seeing how that translates or figuring out how that translates into product design, and you know the things that you’re building yeah, so that’s kind of a really cool one.

I think that’s that’s quite interesting to think about. He also goes into talking about in more detail about that. So definitely will have all the links for these articles down below. So you can read them all yourself in depth. If you so choose now, the next one that is kind of interesting is just more of a like. An industry focused trend, and we’ve talked a little bit about this in the past articles and like two articles ago, I think we talked about this John did just about how the way that we define UX as an industry and the way that the actual positions are Called and what your actual job title and role will be, is going to change a lot.

So what’s interesting right now, it’s not really an article, actually it’s more of a report, but it’s a state of the UX and 2019. I think it looks really nice. I really like the way it looks so we’ve seen quite a lot this year at your curating and sharing 2239 links with these are the amount of people. I guess who have read them. 260,000 designers they’ve isolated these trends. Basically, coming from that, so that’s kind of interesting.

This is a really cool one. I would I would suggest reading it, but one thing that I thought was really cool. Was this like everyone is a lead, so you’re all excited I’m in design levo and then you look around you’re like oh everybody is a design lead right now, which is you know a little sad but interesting to know in the year. You know coming up, so this, I think, is like pretty much sums it up quite well, this this little animation here, like you’re two months into your career and you’re, a lead designer right or senior UX, and that’s actually kind of interesting, because John, our CEO straight Out of university was the like senior UX designer at like a really big German company, and I think it’s kind of funny it’s very telling for where the industry was at back then.

So we are seeing a bit of a shift. But what’s interesting is based on based on like a scan at the market. There’s like everybody’s looking for senior UX designers. It seems like that is sort of the base level for what you need on a product team, and I think that that is going to maybe shift a little bit. You know going forward because we’ve got a lot of entry-level UX designers coming in and they won’t have the knowledge or experience to be seniors.

So I think that’s really something kind of interesting, so they kind of sum up. Doesn’t you start looking at seniority through new lenses, so be proud of your lead title? You know that’s cool, but if you consider seniority from the perspective how much impact you’re able to make, then you have a better sense of where you are along in your career. Trajectory that’s really interesting. So then they kind of go on to talk about actually strategy and making sure that you can be bigger part of the business other than just you know.

Creating you know the visual design or the even they. You know the experience design. So that’s kind of a cool article that I would definitely recommend reading it’s really insightful cool. Let’s move on to ba ba ba ba ba the last thing. Actually that was like five trends that we just talked about the last thing, which I think is kind of interesting and we were having some pretty heated debates here at AJ and smart about this is a flat design versus material design.

So there are some designers who are predicting that material design is going to kind of take over flat design. I would be really curious to know what you guys think about that. It’s yeah, it’s basically kind of a debate right now in our office, so yeah I’d like to know what you guys think and then we can kind of tell you what we think. Oh I’ll show you mine. If you show me yours, was that too much.

Maybe it was too much sometimes. I am too much okay, good, so yeah I’ll put this link down here as well, so you can kind of actually learn what the difference is between the two things yeah. Maybe we can just go through really quickly flat design, so yeah entirely opposite of side design, absence of details so flat design, absence of eight details, simplified and faint colors, so think of super simple streamlined material design.

So this is so they call it like semi flat. That’s funny or flat design. 2.0. It’s a little bit more paper. Ask yes, you can see here. So it’s like things, look like almost like a piece of paper, but still in a flat way, so it doesn’t have that real look either and people are thinking that that’s actually going to be taking over a little bit more than flat design coming in 2019. So we’ll see we’ll see, you’ll be interesting good, and the last thing that I want to talk about before I let you guys go is one of our design leads here.

At AJ and smart Tim Hoffer wrote an article in 2009 19, what in 2016 that, I think is just super relevant. He just was talking about like design trend reports and how it’s kind of useless and read a bunch of reports and look into these kinds of things, because you can never really tell like he says here determining the trends of next year is like reading a reading. Tea leaves it’s pretending to speculate about what might matter soon, but it’s always based on what the authors already know about them now, which I think is just very insightful.

Thank you Tim. It’s very true. I mean there could be a new technology that just jumps up in the next few months and that will just change everything so we’ll see. But I think that that is really yeah just kind of interesting to remember. Like I’ve just told you a bunch of things that I found across the internet, it might mean nothing, it might mean something, but I like to be informed, so I think it’s important.

You know to just be informed about these things, so that was my first ever trend report coming from AJ and smart Brittney reporting from aging and smart on the trends for 2019. If you like, this kind of article, definitely give it a like, if you would like to subscribe, that would be even better. I have to say no, not even better. It would be just as good, so thanks so much for listening. I hope that you enjoy this.

I hope you learned something I’d love to know what you think is trending what you think in 2019 is going to be really cool, and it’s going to you know, take the design world by storm so pop those down in the comments, and we can have to Start a little discussion, yeah thanks, so much for listening have a great day bye guys. My name is Brittany. Bering, and this is my digital trends report. You know my name.

This is Brittany, bowring reporting. I think I actually at one point in my life as a child did want to be a reporter. This is Brittany bowring, and this is the design report.