A few years ago my dog went blind. It wasn’t an overnight thing, he didn’t lose it overnight. Over the course of a year he developed cataracts in both of his eyes. I tried correcting it with surgery, but some things are out of our control and last year he went completely blind. To make the situation worse, my dog’s name is Seymour. As in See-More.

I never worried about Seymour though. He’s a resilient fella, and I knew even down to four senses he could still find ways to start trouble. Prior to going blind his favorite activity was staring out the window of my apartment in Harlem for hours. He would watch people walk other dogs with envy and spot rats snacking on errant slices of pizza blocks away. Without his sight his hobby transformed. On my return to Texas, Seymour went from watching over Fredrick Douglas Avenue to sniffing every square inch of my house. His obsessiveness never stopped, it just shifted to another sense.

Watching my dog make this transformation got me wondering about what I would do if I lost my sight. I already have terrible eyesight. Without contacts or glasses, I’m pretty much useless. My entire professional life relies on my ability to use the internet. If I couldn’t see anymore, my career would probably be over.

Knowing what goes into accessibility in software development only worsens my anxiety. In my career, I’ve only had a handful of clients who’ve prioritized accessibility. Even in those rare cases, they treat accessibility features as an afterthought. It's unfortunate, but regrettably, understandable. Building an accessible site takes a lot of work, and that work isn't free. When it’s time to divvy up the budget, accessibility often isn't high on the list of priorities.

In my opinion, this is the antithesis of what the internet actually stands for. Being online should mean that everyone has the same access to information. Sadly, this often isn't true for our vision-impaired brothers and sisters. It would be bad enough if the problem of inaccessibility ended there. 

Spoilers: they don't.

No matter who you are, or how you interact with the internet, you could probably benefit from a higher degree of accessibility. But, as many designers and developers know from experience, accessibility is quite often a very iterative process. In many cases, site or software accessibility  issues only become apparent in hindsight. 

This is essentially what happened here at Mighty & True. We created a new brand guide with new colors, fonts and everything else a brand might need. However, it was only after redesigning and rebuilding the entire site that we realized that those new brand colors didn’t align with accessibility standards—necessitating another overhaul. The re-rebuild actually for the best though. Not only did we end up with a far more functional and visually pleasing site, it's also accessible. That's good for site visitors, the Google site ranking robots and, more selfishly, us.

This experience inspired us to create a tool to help others avoid (sometimes costly) accessibility missteps. We’ve begun work on a Chrome extension that encourages designers and developers to think about how the color of a page affects accessibility for the visually impaired. 

The current iteration of the extension lets the user click on a line of text and a corresponding background color. It then generates the color values of both in order to tell the user whether the selected colors provide enough contrast to meet accessibility standards. 

This tool may not be groundbreaking, but we didn’t build this extension to outperform "more robust" tools. We built it to add our voice to the conversation, and hopefully, provide one more light to lead the way to a better internet.

Plus, this is just the beginning. If there’s a feature you would like to see added to our tool, please let us know by submitting a feature request here. Or, If you'd like to see how we can help in make your website or application more accessible, please let us know.

About the tech

This started as a simple color tester. You could input two hex values and the script would respond with the contrast value. That value is tested for accessibility and the color pair would pass or fail. With this piece of code in hand we huddled with the design team to determine the best application for the tool we built. This is where we landed on the idea of a Chrome extension.

In order to get the color value of text, we could rely on CSS, but for the background there were a few challenges. If text has an image background, it’s hard to pinpoint which pixel we should compare against and even if we knew it’s tough getting the hex value from an image. Instead of programmatically getting the value, we decided to leave it to the user to select the right pixel. In order to do this we wanted to provide an eye dropper tool to select the color. This meant we had to flatten the view into an image for the eye dropper to work correctly. When using the tool, the extension takes a screenshot when the scrolling stops. We use this screen shot to select the color, giving full control to the user.

To use the tool:

• First, go to the web page that you want to check for accessibility.
• Then click the extensions icon in google chrome (puzzle piece icon), and select the 'Accessibility Color Contrast Checker'.
• In the app toolbar that pops up, click 'Select' under 'Background', and use the eyedropper tool to click on the background color behind the text that you want to check for contrast.
• Then click 'Select' under 'Text', and click on the text that you want to test for contrast. You should see the preview of your text above your mouse cursor.
• Then review the contrast ratio in the app toolbar to see if you passed. You'll see the AA and AAA scores and more info in the info bubble next to them.
• Keep adjusting your background and font colors until you get a minimum of a passing AA grade.

‍

Get it here in the Chrome Web Store!

Accessibility Color Contrast Checker

For more on how we can make the internet a better place for everyone:

W3C Web Accessibility Initiative (WAI)

Web Accessibility Perspectives - Compilation of 10 Topics/Videos

https://www.youtube.com/watch?v=3f31oufqFSM

SFHTML5

Accessibility Fundamentals with Rob Dodson

https://www.youtube.com/watch?v=z8xUCzToff8