Day 18 – Using a color contrast tool

For this one I wanted to actually demonstrate a low contrast issue on a real site.

I used aXe Chrome extension which is a great evaluation tool by Deque Systems. I didn’t mention it in my Accessibility Testing Tools post since I wrote it a while back before I got used to it, but I definitely  recommend it! Also worth noting that there’s a also an aXe Firefox extension.

I tested the Tel Aviv University homepage. I’m attaching the screenshot which shows the site and the part of the aXe report about the contrast. I’ve also marked the elements for emphasis. In that example, the dates and times on the site’s news feed have about 2.05:1 color contrast ratio. According to WCAG2.0 success criterion 1.4.3 the ratio of text that size should be at least 4.5:1 for level level AA conformance.

Screenshot with aXe report showing the low contrast elements
Tel Aviv University English Homepage

I just want to add that I would normally consider aXe as general accessibility evaluation tool and not just a color contrast tool. I’ve shown its report here since I like that it is based on the CSS definitions of the site.