Test for Insufficient Color Contrast Accessibility Issues

Just about every tool in our accessibility auditing toolkit can help us identify any issues with sufficient color contrast ratio on a web page. The react-axe library and axe browser extension both report findings on all elements with insufficient contrast ratios. The tota11y browser extension will annotate any elements with their contrast ratios and color those that are insufficient in red.

Additionally, we need to use our experience tools to see what some of our users out there may we seeing. We need to test with high contrast browser extensions as well as the display settings in Windows and Mac. If our users with visual impairments are using these tools we need to see what our application looks like using them because we may find that under a certain mode some things may suddenly be harder to read or virtually invisible.

Resources

• https://www.scottohara.me/blog/2019/02/12/high-contrast-aria-and-images.html