Ashlee standing in front of a brick wall looking up to her left and smiling. Her right hand is held up near her right shoulder with the palm facing upwards.

Ashlee M Boyer

You can find me talking about issues surrounding Disability, Accessibility, & Mental Health on Twitter, or you can find me regularly live-knitting or live-coding on Twitch. I'm @AshleeMBoyer on all the platforms I use.

Introducing textua11y: A Color Contrast Tool

Tuesday, May 28, 20191 minute read


Yesterday, I made a post about ideas and going after them. Every idea is a learning experience. There are no dumb ideas.

{% link ashleemboyer/just-make-that-app-59gl %}

Well, writing that post pushed me to elaborate on a super simple color tool I created for a post about generating Gatsby sites from JSON files. This site shows you whether to use black or white text on a colorful background. All of the colors come from the Material Design color palette.

{% link ashleemboyer/build-a-multi-page-gatsby-site-from-json-3kp %}

I'd like to introduce you to textua11y. You can choose a text and background color, then use the Chrome developer tools to hover over the text elements and check your color contrast ratio. There's a lot to work with here.

A demonstration of the app's first version

I have multiple ideas on how to keep going with this, but I also want to hear from you! When you go to the site and click around, what do you feel like is missing? Anything random and cool you'd like to see? I'm excited to keep working on the tool this week.

Current top todos:

  1. "Go back" between steps in the color pickers
  2. Display text with the contrast score
  3. Show the selected color hex values in addition to the names