DevTools tips — day 8: Color picker
part of the “Advent calendar for front-end developers” series
Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve played with async console, today it’s time to take look at the Color picker:
23. Color picker — introduction
If you haven’t looked closely into the color picker it may not seem so special: just some colors to choose from. On closer inspection, it’s amazing how many useful informations has DevTools team put into this small widget.
24. Choose only the colors you’re already using
The bottom part of the color picker includes color palette, which you can customize. You can:
- switch to a Material colors palette, with shades variations
- a custom one, with possibility to add and remove colors
- a colors picked up from the CSS Variables that exist in the stylesheet your page is using
- or all colors that you use in the page’s stylesheet
25. Pick your colors accessibly
When open a color picker for the text (the color css property but e.g. not the background-color one) you will see the “Contrast ratio” section. It displays the contrast ratio between the text and what it believes the text’s background color is. If this number is high, your texts are properly visible against the background, it the number is close to 1, the text color is almost indistinguishable from the background.
- The “🚫” sign next to the number means it’s bad
- the single “✅” mark means the color conforms to the AA recommendation of the Web Content Accessibility Guidelines (WCAG) 2.0, which means the contrast is at least
3, - you can also have a double “✅✅” mark, which means that the stricter AAA recommendation (the ratio of
4.5) is fulfilled too.
You can read more about the accessibility rules regarding colors by clicking that mark.
If you expand the Contract ratio section, you will see additional information and a possibility to choose a different color as background color to compare against, also the color spectrum section will now display a contrast boundary: if your background is dark than colors above this line are AA-compliant, if the background is light, you should choose ones from below that line.
As usual, if you’ve learned something new, please:
→ clap 👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:
Also, the 9th day is already published, read it here:
