Oh no!

Quickly identify contrast ratio issues on a web page.

I usually use a different tool for contrast ratio control, but today I found a nice Chrome panel that quickly reveals contrast ratio problems (along with other stuff) on your webpage.

How to open the CSS Overview Panel like a ninja!

  1. Launch your page in the Chrome Browser.

  2. Open Chrome DevTools:
    Ctrl + Shift + J on Windows and Linux
    Cmd + Option + J on Mac

  3. Access the CSS Overview panel via the run command:
    Ctrl + Shift + P on Windows and Linux
    Cmd + Shift + P on Mac\

    Type 'CSS' and select Show CSS Overview in the list then hit enter.

  4. Click the Capture overview button in the panel.

Now, you can navigate to the Colors section to see if you have any color-contrast issues.

Ultimately, click on the text block to instantly highlight the problematic element on your page!

And Voilà!

Thanks for reading this

If you want to discuss this article, feel free to reach out to me (the link opens a new tab). I'd be happy to hear from you.

🤘