This course has been updated! We now recommend you take the Website Accessibility, v2 course.

Check out a free preview of the full Website Accessibility course:
The "Color" Lesson is part of the full, Website Accessibility course featured in this preview video. Here's what you'd learn in this lesson:

Using the No Coffee Chrome Extension, Jon demonstrates that there are many accessibility issues for people when reading the web.

Get Unlimited Access Now

Transcript from the "Color" Lesson

>> Jon Kuperman: Color is a tricky one. So getting back to our checklist, one big one is page content can't flash more than three times per second, unless it's a very small area that's flashing. So this is like it can invoke seizures, it can also just be incredibly hard to read for people.

[00:00:16] And so that one is at both at the bottom and the top level. A and triple A. A just allows you, if you have sufficiently small areas, it allows them to be A-compliant. If you wanna be triple A compliant, you can't have anything flash that often. There's this really great Chrome plug-in called NoCoffee.

[00:00:33] I think it's worth spending a minute on. It's this really cool project, where it simulates a lot of different visual conditions. And you can view your website with these visual conditions and get some really good insight into. I think as you get started in accessibility, you're often thinking, or I often was thinking about, okay sites need to work really well for visual and blind users.

[00:00:54] But there's a whole huge spectrum there. And it's really true, because most people don't fall into the blind category. But most people don't fall into that visual category either, right. Most people have some sort of visual impairment. Even if it's really small and you just maybe need glasses, or things are blurry far away.

[00:01:12] All the way to no vision. So this helps you simulate a lot of different things. So we can go ahead and grab this NoCoffee for Chrome. I might already have it installed. No, I don't. Okay, cool.
>> Jon Kuperman: Download interrupted. Give me my thing.
>> Jon Kuperman: Okay, cool. So this allows you to go to a site, we can go to our site here.

[00:01:41] And you click on this NoCoffee logo, and you can see a lot of different things. So you can fully customize it, which is great. You can also simulate some of my blocked visual fields, so people that have a blocked, let me see here.
>> Jon Kuperman: What's going on?
>> Jon Kuperman: I wonder, I think it might be just that it's over file protocol that it's not working.

[00:02:06] Let me try a different website.
>> Jon Kuperman: There we go, yeah. I think it's Chrome extensions can't hit over file. Okay, so you can go to my Twitter site or whatever and you can see. So we can start with Normal and then we can go onto things like a blocked central visual field, so people just kinda have problems focusing on the thing right in the middle.

[00:02:30] And you can go all the way to, yeah different peripheral ones where it's kinda hard to see things on the outside focusing in. Then you can do a whole lot of different things with color stuff too, so you can see all these different color deficiencies. Some affect certain sites and some don't.

[00:02:46] Somewhere pretty minimum. Anyway so you can do a lot of really cool stuff on here. This isn't necessarily me, I'm not saying hey you should go through each one of these things or whatever, but I think it really can help with that empathy level of understanding what different users have.

[00:03:06] It goes a little slow when you add a bunch of them. But understanding how different users might see your site, and just the things that you can do to be, okay don't put pertinent data on the very far outskirts, or make sure that your text is big enough and well-spaced enough that people can get those visual indicators.

[00:03:23] And it kind of goes back to what I was talking about before, where it's like people I've talked to a lot of low-vision users that they don't want a plain, no style accessible version of a website. They just want a little bit of consideration. And another really interesting anecdote from a user who's got low vision, she has to zoom in very far to see sites and it's just something to kinda consider.

[00:03:47] So she was on Khan Academy doing a lot of their lessons, like learning JavaScript, something like that. And she's on an area where you write in the code editor. And she's writing in the code editor and nothing is happening, it's not passing her to the next level and she's trying to figure out what's going on.

[00:04:02] Eventually she zooms out and she sees that on the far right of the screen is where it tells you if you have compilation errors. So she zoomed in on the far left so she can see it and any warnings that are on the site. Again it's not a silver bullet solution in the sense of, you don't have to keep everything stacked on top of each other, but just stuff to be considerate of.

[00:04:22] That if you offer something like a zoom in function maybe, you should put it more of a straight aligned up and down visual site from there on. So I just think those are interesting. I love the NoCoffee simulator, I think it's really great. And I use it a lot for just getting a better idea of how sites look.