Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Web Accessibility Compliance

Well done!

You have completed Web Accessibility Compliance!

Sign up for Treehouse Back to Library

Color Contrast

2:02 with Aisha Blake

Color contrast is very important for people with any number of visual impairment. This not only includes the color of text in relation to the background color beneath it, but can be a factor in differentiating between entire elements on a page.

Color Safe - Accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    We've added a lot to our accessibility arsenal. 0:04
    In addition to the tools available to us through and HTML itself, there are several 0:07
    techniques we can use to make navigating our apps easier on all of our users. 0:12
    This stage we will cover some ways we can improve the UI of our websites 0:18
    with features like high color contrast and larger clickable areas. 0:22
    Color contrast is a huge deal with several types of visual impairment. 0:27
    This not only includes the color of text in relation to the background color 0:32
    beneath it, but can be a factor in differentiating entire elements on a page. 0:37
    But just because we're going for 0:43
    high contrast, it doesn't mean that everything needs to be in black and white. 0:44
    There are so many gorgeous combinations that still comply with WCAG. 0:48
    Especially if you're not fully settled on a color palette, 0:53
    you might want to check out Color Safe. 0:57
    This tool will help you build accessible color palettes, by restricting your 0:59
    choices to only those combinations that will result in high enough contrast. 1:03
    Hitting the GET STARTED button leads us to this color picker, 1:08
    where we can choose any color we want. 1:12
    This will be our background color. 1:14
    Let's say ours is a sort of off white color and 1:19
    we want to use a different color for our headings. 1:21
    Well, we will look at what we already have and remain easy to read. 1:25
    This also allows us to change the font family, size and 1:29
    weight so we can approximate the way the text will look on our page. 1:32
    We also need to determine which level of the WCAG Guidelines we need 1:37
    to be inline with. 1:40
    Once that's done, we just need to submit the form and 1:42
    represent it with all the colors that will satisfy our parameters. 1:45
    There are tons of contrast checkers floating around the web, but 1:50
    it's nice to have your options lead out sometimes. 1:53
    You can safely choose any of the colors shown in this tool and 1:57
    know that the color contrast is good to go. 1:59

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up