Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Choose accessible colors for text using Chrome DevTools Color Picker contrast ratio score

    Tomasz ŁakomyTomasz Łakomy
    chrome-devtoolsChrome DevTools

    Choosing right colors for your website is difficult, especially when we want to develop accessible websites. Our goal should be to choose colors that have a high contrast ratio and as such can be easily read by all users, including those with low-vision impairments or color-vision deficiencies.

    In this lesson we're going to learn how to use Chrome DevTools Color Picker to choose colors for text which meet the AA and AAA contrast ratio score.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Choosing colors for a website can be difficult. In this example, we have a website with a greenish kind of background and a gray text, which is honestly difficult to read. We would like ensure that whatever text we're going to put on our page, users can actually read that, even if they suffer from eyesight problems.

    00:16 Luckily, Chrome dev tools are there to help us. If we click on the color, you open up a color picker. You can use it to easily choose a different color. How do we know that our color we've chosen has a proper contrast ratio?

    00:30 To find out, open up this dropdown next to the text "contrast ratio," and you will notice that two more lines appeared on the color picker. Essentially, everything that is above the first line has a poor contrast ratio.

    00:42 This text can be difficult to read. Anything that is below the first line has a double A contrast ratio rating, so it's very accessible. Anything that is below both first and the second line has a triple A accessibility rating.

    00:57 This is a color that you can safely use for text with this background in particular, and you will make sure that your text is accessible for all kinds of users.

    Discuss

    Discuss