Mastery Connect’s new & accessible Mastery Level color palette

Cason
Instructure
Instructure
1
526

Mastery.png

Within Mastery Connect and at Instructure, we're passionate about creating accessible products for all users. This aligns with the growing legal landscape, as accessibility compliance is becoming increasingly required by the US Department of Justice and Department of Education, as well as legislation and legal frameworks around the world. As such, we want to make sure Mastery Connect is accessible to all educators and learners by default.

Our color palette is foundational to the experience every educator and learner has with Mastery Connect, and color plays a significant role in user experience, especially for people with visual impairments. This is why it is so important to ensure these colors are accessible from the start, and why it is critical our Product, Design, and Engineering teams are always looking to continuously improve our accessibility.

If you have accessed your Mastery Connect account since last week, you likely noticed a change in our default color palette. While this change has significant visual impact, we believe it will ultimately improve Mastery Connect by making it more accessible for all users.

When Mastery Connect educators and learners think about assessment and standards-based learning on our platform, they often think about the color palette represented on the Mastery Tracker and reports. Red, yellow, green, and sometimes, blue signify mastery levels and growth opportunities.

These colors help students clearly see and understand their performance and set targets. For teachers, they provide immediate insight to adjust teaching practices, and for administrators, they offer high-level information to identify areas for more targeted support.

After reviewing our historical color palette with an eye on unrelenting accessibility, we determined that the yellow color we used to represent "Near Mastery" did not meet our current high standards for accessible design due to challenges related to color contrast, and made it more likely for us to create experiences that simply do not meet our accessibility standards.

A visual representation of the original color palette, with an indicator that the yellow failed contrast standards.A visual representation of the original color palette, with an indicator that the yellow failed contrast standards.

Our design team took up the challenge to change this, and spent many hours exploring and deliberating the options to achieve our goal of a better color palette for everyone. As the first step towards this, we explored increasing the contrast by adjusting the lightness.

A visual representation of selecting a yellow hue to generate palette options.A visual representation of selecting a yellow hue to generate palette options.

After we did that, we then returned to the color palette as a whole. We wanted to make sure that these colors worked well together as well as independently. Through this process, our designers provided a set of options by adjusting the color of the hue.

The set of color palette options our designers identified.The set of color palette options our designers identified.

While any of these options meet our goals of increased accessibility, we wanted to ensure that our educators’ voices were a part of this decision. We fielded a survey to educators to inform our decision.

Finally, using that data from the educator survey as well as input from our in-house experts in design and assessment, we decided to commit to the change towards option A. This allows us to introduce the new Mastery Connect color palette:

An example image comparing the original color palette to the updated palette.An example image comparing the original color palette to the updated palette.

 

We hope that this change will both help educators and learners today, and ensure that our future improvements are always accessible.

Of course, we are still on this journey. We have many opportunities to make the experience more accessible, and we cannot wait to build it.

1 Comment