Use (experimental) CSS Overview in Chrome to get an overview of CSS used on a site

Style console.log messages with CSS

Use Logpoints to log messages without cluttering up your code with console.log() statments

Run a Lighthouse audit in Chrome Devtools

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

Use Chrome DevTools console utilities to make debugging easier

Force a DOM element state in Chrome DevTools

Copy a network request as fetch or cURL with Chrome DevTools

Chrome DevTools tips & tricks

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](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast7) and [AAA](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast7) contrast ratio score.

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.

Course

Chrome DevTools tips & tricks

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

Share this video with your friends