Website Accessibility Exercise 6: Colors

[00:00:00]
>> Jon Kuperman: So somebody had pointed out accessibility problems on my site, which is intentional. But I just forgot about it. [LAUGH] But so, the demo site has different color problems. And just kind of generally, between with no coffee, you can kinda start getting what colors kind of tend to blur together on different sites, and which ones seem difficult to use.

[00:00:22] And then there's another tool that's really helpful for this, it's accessible color palette. I'll stick it in the chat in one second. Yeah, I think it's this tool. Yeah, it's really cool as well. So what this tool allows you to do, is you can stick in all of the different hex codes that you use for any website.

[00:00:49] And this stuff is good beyond websites too, if you're doing branding for business cards, or anything like that. So you can stick these in. Like, for example, OOFFOO and FFFFFF, something like that. And then you can choose your conformance level, like we've been talking about. And then you can go ahead and submit, and then it'll give you this really nice layout of these two things.

[00:01:14] And it will give you a bunch of information. So it'll be like, does it fail? And not only does it fail or pass, but at what level? And so what you'll see if you play around with these, is sometimes, and by level I mean font size, is that sometimes the color scheme will be okay as long as you're at 18 point or bigger font.

[00:01:33] Whereas anything smaller than that can kind of blur together. So if we wanna take a quick, another ten minute break. The two challenges, I'll put this link in, but between this and the no coffee, to kinda grab the colors from my site, the site that we're all working on.

[00:01:48] And see if that passes, and if not, maybe what size it would pass at. And then also if you just get a few minutes to look at any of your sites or projects. Just pop the colors in and see if they're compliant or not.