Special statement

This article is a series by Tomek Sułkowski published on Medium. According to the author revealed a total of 24 articles, updated until December 24, the copyright of the original author.

I have sent the translation links of the first two articles to the author himself. Although he does not understand Chinese, he is still very happy. The screenshots are at the end

The translator had already communicated with the author before the translation to get permission to translate the whole series. In order not to disturb your reading, the record of authorization is here

The body of the

In the 24 days leading up to the holiday season, I’ll be publishing a series of short articles on how to make development tools more fun. Yesterday we played with asynchronous Console, and today we’ll look at color pickers:

23. Color pickerintroduce

If you’ve never looked closely at a color picker, it certainly doesn’t look like much: there are only a few colors we can choose from. But on closer inspection, Wow, my friends were amazed at how much useful information the DevTools team had put into this gadget!

24. Only choose the color you’re using

Below is a section of the color picker, including a palette that you can customize. You can:

  • Switch to one that has a tonal changeMaterialThe palette
  • Custom, you can add and remove colors
  • From CSS Variables, select a color that exists in the style sheet you are currently using for your page.
  • Or all you have on the pageCSSThe color used in

25. Choose your colors visually

When you open a text palette selector (the color CSS property is not background-color) you will see the “Contrast Ratio” section. It shows the contrast between the text and the background color it thinks the text should have. If the value is high, your text will be more visible relative to the background, and if the value is close to 1, the color of the text will be almost indistinguishable from the background.

  • The word “🚫” next to the number means no good.

  • An “✅” means that the color complies with the AA declaration of Web Content Accessibility Guidelines (WCAG) 2.0, which means a contrast ratio of at least 3

  • You can also have “✅ ✅”, which means satisfying the AAA statement.

Read more about the colors in accessibility rules by clicking on the symbol.

If you want to continue exploring the contrast section, you will see additional information and can select a different color as the background color for contrast, and of course the Color Spectrum section will now display a contrast boundary: If your background color is darker than this line, compatible with AA, if the background color is brighter than this line, you need to select a color below this line.

That’s all for today’s sharing

Routine: If you learn something new from this

→ Follow me on Twitter: Tomek Sułkowski

Other series

Other articles in this series will be translated soon, with links posted here.

  • Day 1: ‘$’ in the Console
  • Tips you might not know about Chrome debugging tools Day 2: Copying & Saving
  • Chrome debugging tools you didn’t know about
  • The Chrome debugging tool has a few tricks you don’t know about.
  • Day 5: Console log, puzzling case
  • You don’t know the Command menu for Chrome
  • 7. Fun tips you didn’t know about the Chrome Debugging Tool Consle
  • Chrome’s Color picker is a Color picker that you don’t know about.
  • Day 9: Time console
  • Custom Formatters are custom formatters for Chrome.
  • Today: Style Editors continued
  • Tips you don’t know about the Chrome Debug Tool Day 12: Ninja Log Print! (the ninja logs)
  • Chrome debugging Tool tips you didn’t know about
  • Chrome Debugging Tool tips you didn’t know About day 14: Other shortcuts
  • Chrome debugger tips you didn’t know about
  • Tips you don’t know about Chrome debugging Tools 16: Breakpoints
  • Day 17: Farewell to Console
  • What you Didn’t know about Chrome Debug Tools
  • Chrome debug tool tips you don’t know
  • Tips you didn’t know about Chrome debugging tools Day 20: The dark arts of Workspace
  • Tips you Don’t Know about Chrome Debugging Tools Day 21: Snippets
  • Chrome Debugging Tool tips you didn’t know
  • Chrome debug Tool tips you don’t know
  • Day 24: The last day, New Year’s Day, is awesome

Write in the last

If you are sure of my translation, you can also pay attention to my wave oh ~ incidentally my open source project, for a wave of star→ see here, beautiful blog system

About this translation, the author’s reply