Test Your Site’s Accessibility Color Rating With Hex Naw

Looking for a way to improve your accessibility rating? There’s a lot you can do and the topic of accessibility runs deep.

But one of the simplest things you can do is alter your site’s color selection. You want a color scheme that matches and blends nicely with a strong contrast for users with color blindness or vision impairment.

Hex Naw is a free accessibility tool that’ll help you plan this out. It works right in your browser and lets you compare any two colors to see how they stack up against each other in accessibility tests.

hex naw color tool

In fact, the tool actually lets you add up to 12 colors all in the same test. This way you can gauge the effectiveness of your entire layout by comparing all your colors together.

Note that some colors may work better on their own, or work better together. That’s to be expected.

Which is why Hex Naw actually compares all these colors individually so you can gauge the rating for yourself. Granted this means if you’re testing 6+ colors then you’re gonna have a lot of combinations to sift through.

But it’s a small price to pay for ensuring your site is fully accessible to all users.

With each color pair, you’ll get a contrast ratio and a rating for the small text and large text against the background color. The app uses 4 ratings:

  • AAA – fully compliant.
  • AA – mostly compliant but still great.
  • A – decent but could be improved.
  • Naw – not a great combo.

The “naw” is basically a failing grade against the WCAG guidelines for contrast. If any of your colors get that rating you’ll definitely want to rethink them!

hexnaw sample tool

Overall this app is pretty cool and super easy to use. I really like how you can quickly compare multiple colors against each other since it’s not something you’ll find in other contrast ratio apps.

But check it out for yourself and see what you think. If you wanna make some basic accessibility improvements to your site then this tool is worth bookmarking.

Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail