This course has been updated! We now recommend you take the Website Accessibility, v2 course.
Transcript from the "Exercise 6: Solution" Lesson
[00:00:00]
>> Jon Kuperman: Some people were reporting that the site was down, the color picker, that's like a real bummer. Some people put in some nice other links in there, but [LAUGH] Drew says, we took down both sites. I think that might be accurate. But anyway, so we can kind of work through some of it together.
[00:00:17] And then I just kind of wanted to get people a feel for checking out some color schemes and things like that. So if I, let's see, think I had to close this. If I open my file backup, and go to Colors, cool. So you could do a couple of things, like I might go and take, just to start off with that nav bar, or whatever, and go find the hex codes that are being used.
[00:00:44] Let's see if I can do anything with this, nobody use the site. Look at that, they're get parameters, I can work with that.
>> Speaker 2: Cheater.
>> Jon Kuperman: Yeah, okay, cool, let's see if that loads.
>> Speaker 2: [LAUGH]
>> Jon Kuperman: Come on, okay, cool. So yeah, I can see on these, so basically, according to this analysis, small non-bold text, it fails white on that blue.
[00:01:15] So if we were looking at my site here, this contrast is not enough, even in it's hovered state of white on blue, considering the size that it's at. So it is okay for larger text like 1.5, or I'm sorry, here it is, so 18 point or greater it's fine, and bold it looks to be fine.
[00:01:34] But then small non-bold text, it does fail. And I think these are really interesting, because sometimes you look at some that are a little bit more contrived, like if I go to my colors example. Those are hard for visual, for non-color impaired users, but some of them look really good.
[00:01:52] I mean this blue and white is one of the most popular bootstrap themes, so its a little bit of a bummer to find that its not accessible. That people might have a hard time differentiating the colors. But again, these tools are really cool, and can help with stuff like that.
[00:02:07] And then, so kind of without further ado then, let's see, we've got more of our checklist items. Yeah, this is big. So color is not used as the sole method of conveying content or distinguishing visual elements. A couple of big takeaways here, one thing might be, it's not good enough to change the label text from black to red maybe, or something like that.
[00:02:31] If it's invalid, you would need just some other clue, like an X or a underline or some way of indicating some action on the user's behalf, if the user can't differentiate between colors. And then the same with color can't be the only thing that distinguishes links. So this gets back into design, where by default links are underlined and paragraph text is not.
[00:02:55] A lot of designers are like, I don't want it. I don't want that underline there just make them blue, or something like that. But again, you're running into this issue, if they're the same color depth, then someone that is color blind won't be able to necessarily distinguish what's a link and what's not.
[00:03:10] So you can make them bold. You can make them, I don't know, slightly bigger, slightly smaller. You can go with the underline, make your own underline. You could even do things that are very, very safe, like completely different shades, like a really lighter color. But you can't just have the actual color being the only distinguishing thing to be compliant.
[00:03:28] And it's just something to be aware of.