Leveling Up Your WCAG Skills With Kontrast Chrome Extension

By:

In November, 2018 we examined how you can move toward better web accessibility by focusing on improved color contrast. If you’re starting to get into a groove on those tasks, you probably realize the back-and-forth grind for checking colors can become a bit of a drag.

Fortunately, there’s a Chrome extension designed for frontend developers that is so straightforward, anyone can use it. Since it’s baked right into the browser, you can conduct all your color contrast tasks right on the webpage you’re reviewing! It comes in both free and fee-based versions but really, at $4.99, the paid version is a steal.

Kontrast from getkontrast.now.sh allows you to quickly check and adjust contrast in real-time in your browser to meet Web Content Accessibility Guidelines (WCAG) 2.1 requirements.

Once installed, you can activate via the extension icon anytime you’re ready to check element contrast:

An options panel will slide up from the bottom of your browser window. On the first use, be sure to check the extension settings:

  1. Select the settings icon
  2. Here are options I typically use but some frequently modified versions will include deactivating the “Ignore:hvoer style” when checking links or any other element with hover actions.

Now you’re ready to begin testing contrast.

  1. Select the “Inspect” button.
  2. Hover over any page element, you’ll notice available sections will have a red border and semi-transparent overlay color. Select the one you want to test and the results will appear immediately in the Kontrast panel below.
  3. In this example, the body text font color passed through the strictest WCAG setting.

If you have an element that fails, no worries. This is where Kontrast adds some serious value to the process in that it can automatically provide a recommended option that most closely matches the original color but passes contrast standard.

  1. Let’s select the Twitter share button.
  2. It turns out the white font color over the default Twitter blue fails (#BooTwitter).
  3. Since white can’t get any whiter, let’s see about adjusting the background color. Select the “Auto” icon on the “background” side of the panel results.
  4. A popup will appear where you can opt to have Kontrast select a color that meets AA or AAA WCAG standards.
  5. In this example, I selected “AAA” and according to Kontrast, the background color will need to change from #00ABF0 to #005F86

Rinse and repeat across as many elements on as many pages as you like.

You can do quite a bit more with Kontrast, and I encourage you to do exactly that, but this will get you up and running on the fundamental tasks related to checking color contrast.

Resources

About Drew McManus

In addition to my consulting business, I'm also the Principal of Venture Industries Online but don’t let that title fool you into thinking I'm just a tech geek. I bring 20+ years of global broad-based arts consulting experience to the table to help clients break the cycle of choosing one-size-fits-none solutions and instead, deliver options allowing them to get ahead of the tech curve instead of trying to catch up by going slower.

With the vision of legacy support strategy and the delights of creative insights, my mission is to deliver a sophisticated next generation technology designed especially for the field of performing arts. The first step in that journey began in 2010 when The Venture Platform was released, a purpose-designed managed website development solution designed especially for arts organizations and artists.

For fun, I write a daily blog about the orchestra business, provide a platform for arts insiders to speak their mind, lead a team of intrepid arts pros to hack the arts, lead an arts business incubator, and love a good coffee drink.

Leave a Comment

Send this to a friend