Hey everybody, what's up?
It's Rob Dodson, welcome back to the A11ycasts show.
Today we're going to be talking about color contrast.
So, in a nutshell, contrast is really the difference between two colors.
You know, if you imagine a color wheel, and you have two colors that are far apart on
the color wheel, or polar opposites on the color wheel, those colors are going to have
a lot of contrast because they're 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 Louise 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 more of a manual spot check using 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, Ill 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 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 still 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, tis D here it's acutally sort of three
colors.
So we've got a couple grey and then the solid white, and that's what forms the body
of that character.
When it's asking us the 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 areas 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 watching and I'll see you next time.
If you want to learn more about color contrast, we've got some additional videos you can
check out in our playlist.
Again, thanks for watching and I'll see you next time.
For more infomation >> Work Less Achieve More (using the 80/20 rule 'Pareto Principle') - Time Management Self Help - Duration: 3:22. 
For more infomation >> A FERRAMENTA DO GOGLE PARA FILTRAR PESQUISAS ♦ Miguelito - Duration: 1:39. 
Không có nhận xét nào:
Đăng nhận xét