Gradescope’s Accessible New Look
We are excited to reveal Gradescope’s new color scheme! It is a bit greener than before, and interface elements are darker in general. Over the years, we have noticed that the old Gradescope teal was too light and often made reading instructions or finding actions difficult. We have also been rewriting our older pages and felt it was a good time to reexamine our color scheme. Specifically, we chose to fully redesign the color palette, rather than giving people an additional setting they would have to find and choose to turn on. We believe that software should be accessible by default, and a new color palette is one of many improvements that we are working on.
What is color contrast?
Color contrast is used to describe how perceivable two colors are from one another. Color combinations with high contrast appear vibrant, while low contrast combinations are less distinguishable. The World Wide Web Consortium, or W3C, is an organization that has laid out recommendations for what color combinations have high contrast. The Web Content Accessibility Guidelines (WCAG) take into account various forms of visual impairments that people can have. By designing and developing with these guidelines, Gradescope users with these visual impairments will have an easier time using the site.
Why were the old colors not accessible?
The WCAG provides an equation to help classify color combinations. Given two colors, it calculates a value between 1 and 21 — with 21 being the highest contrast level. For example, two white shades score really low while a white shade and a black shade score really high. The guidelines also specify that the minimum contrast level for paragraph text needs to have a score of at least 4.5 or higher. Gradescope’s old colors scored well below the recommended contrast level and thus weren’t accessible. The new colors now meet or exceed these contrast recommendations.
Why did the button style change?
The buttons in the action bar changed for a couple reasons. During user testing, we would often observe instructors and TAs unable to easily find a particular action in the action bar. The low contrast made various actions in the action bar difficult to read, and thus the actions didn’t stand out very much. While we wanted to improve contrast, we also didn’t want to darken the action bar very much because we preferred the vibrant color. Given these constraints, we added background colors to the buttons to provide sufficient contrast between the text color and the button color.
Why is this important?
For Gradescope, it is fundamental that we are able to meet the needs of all students, TAs, instructors, and administrators across a wide variety of environments and situations. Having accessible colors is one part in trying to meet those needs. Over the past few months we’ve been working to make Gradescope more accessible to assistive technology. Students who rely on screen readers or keyboard navigation should have an improved experience. We hope that you find all these changes a step in the right direction toward making Gradescope accessible for all.
As always, if you use Gradescope, send us questions or suggestions to feedback@gradescope.com and let us know what you think!
