How-To: WebAIM Color contrast checker

Check color contrast before you publish.

By:

Amy Whitesall

The WebAIM color contrast checker includes an eyedropper tool that lets you sample colors from a graphic or image before you upload it to the web. Use it to make your graphics accessible before you finalize and share them.

Color contrast ratio comes from comparing the relative luminence of the foreground and background colors. The checker will produce a numerical ratio, and that ratio needs to be 4.5:1 or higher to meet accessibility standards for most text.

Large text – 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger – and graphical components that people interact with on a web page (like buttons or form borders) need to have a contrast ratio of at least 3:1.

Transcript

Just going to do a quick demo of the WebAIM  color contrast checker to sample the color  contrast from a graphic. So I have up here just a png image. It’s not embedded yet in a website. And I’m going to check this section  here to make sure this background  and this foreground have a contrast ratio  of at least four and a half to one. Yeah, four point five to one, which  is what WCAG double-A requires.  

So uh foreground color is white. I just happen  to know that so I’m just going to key it in.

And as soon as you click off of that it gives you white. The background color I’m going to sample,  so I’m going to click in the color  block, select the eyedropper, and  grab the lightest spot next to that.

Now  it won’t actually register the color until I close that picker. As you can see it is just a shade light. Four point four seven to one is not quite enough contrast but you can use the slider to give you an idea of how much darker that image needs to be. The answer is not very much because I just barely budged it and then it moved up [to an appropriate contrast] so this needs to be darkened a little bit and then its contrast will be a-okay.

Related Topics

||||
|||