Equation editor: designing for accessibility

I was asked to redesign an equation editor for use in software for students in grades 3-12. The tool is used on a variety of devices, tablet size and up, so button size was my first consideration.

Students often have smaller fingers, but can lack dexterity. I wanted this equation editor, which is used for math problems, to support student success (because taking an end of year test is hard enough) so I designed the buttons to be just over 50 x 50px.

The editor needed to be accessible to students with visual impairments so I designed the button labels to comply with WCAG AAA standards using a color contrast checker. I also made sure there was plenty of contrast between colors for all users, including the most common types of color blindness: protanopia and deuteranopia.

Example of how the equation editor would appear for users with protanopia

I also evaluated web fonts that contain math symbols so we’d be able to rely on the web font for most button labels, and create individual font icons to handle the remaining button labels. I picked TeX Gyre Termes because it’s readable and offers many of the math symbols that were required.