Choose accessible colors for text using Chrome DevTools Color Picker 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.