How Accessify Was Built: An Adobe Express Add-On That Ensures Your Content Is Accessible | by Colene Chow | Oct, 2024

Discover the story behind the winner of the Most Creative Adobe Express Add-On category at a recent Major League Hacking hackathon.

Adobe and Major League Hacking (MLH) share a common mission: to empower developers around the world. And so we joined forces with and continue to sponsor this global community for all aspiring developers and code-enthusiasts to help early-career devs learn to build customized digital experiences like Adobe Express add-ons.

In this article, we’re highlighting one of the participating teams, who came up with an add-on called Accessify that ensures accessibility for all users. Not only were they one of the winners at a recent MLH hackathon, they also successfully applied for a grant from the Adobe Fund for Design — which we recently reopened to focus on supporting individuals, entrepreneurs, and small businesses who are pushing the boundaries of building on the Adobe Express platform.

Subhasini Udhyakumar, Misry Dhanani, and Keerthi Veeramachaneni are all juniors at the Georgia Institute of Technology, while Shriya Rasale is a junior at the University of Georgia (UGA). Misry, Keerthi, and Shriya are majoring in Computer Science, while Subhasini is majoring in Computational Media — a unique blend of computer science and visual design. This interdisciplinary background gave the team a distinct advantage in developing their design-focused add-on.

They all had already taken part in a few hackathons before they joined this year’s UGAHacks, an MLH member event that allows participants from across the university and the region to connect, learn, build, and share.

“Hackathons are the perfect environment to channel creativity and focus,” Subhasini pointed out. “They offer an intense and rewarding way to learn new skills, push our boundaries, and collaborate on meaningful projects. It’s a chance to dive deep into a problem and emerge with a tangible solution, often in a field you’ve never explored before. The thrill of starting the weekend with a raw idea and ending with a functioning prototype is unmatched.”

For the team, the hackathon turned into a unique opportunity to collaborate with Adobe and tackle the challenge of building an add-on to extend the functionality of Adobe Express. They entered the Most Creative Adobe Express Add-On category, which pushed the team to think creatively and innovate beyond the usual scope of projects.

Each team member had previous experience designing websites and working with other Adobe tools like Illustrator and Photoshop but wasn’t familiar with Adobe Express yet. They quickly became fans of its user-friendly interface and powerful capabilities.

“Adobe Express stands out as an easy-to-use and versatile platform, which allows even those with minimal design experience to dive right into the creative process,” Misry said.

The team jumped at the chance to develop an add-on for Adobe Express, particularly because it was uncharted territory: After researching the existing add-on market, they noticed a gap in tools that address accessibility. This realization inspired the team to create an add-on that could simplify the process of ensuring content designed with Adobe Express is accessible as well as visually appealing.

Accessify helps creators check whether their content adheres to the Web Content Accessibility Guidelines (WCAG) and suggests new colors that are more accessible. The newest feature is an AI color palette recommender. Users can type color-related adjectives or describe their design’s theme (e.g. “vibrant”, “retro”, or “calm ocean”) and watch the AI suggest the perfect color palette to suit their vision. The goal for Accessify was to eliminate the need for designers to switch between different tools to check accessibility and find appropriate colors, streamlining the design process with Adobe Express.

When designers select the eyedropper tool from the Adobe Express interface to capture the colors within their design, Accessify automatically computes the contrast ratio, assesses WCAG compliance, and offers tailored color recommendations.

The team built Accessify with HTML, CSS, JavaScript, Node.js, and React. They also used rgblind, an open source JavaScript library to simulate color blindness in real time, the WebAIM Contrast Checker API and the Color API to convert from RGB to HSL and to be able to generate recommendations for better colors.

As the experience of building add-ons was new for the team, there was a bit of a learning curve, especially as they navigated through new tools, APIs, and working with the add-on Command Line Interface.

“The biggest hurdle was understanding the intricacies of creating an add-on for Adobe Express,” Keerthi remembered. “However, our prior development experience helped us to adapt quickly, and the Adobe team was incredibly supportive throughout our journey. They provided us with guidance on which APIs and Spectrum Web Components would be most effective in our project, which was instrumental in bringing our vision to life.”

To help developers prototype their add-ons ideas faster, we have just released a code playground within Adobe Express that they can use to seamlessly create, test, and run add-ons directly inside the app.

In the end, the Accessify team found the entire development cycle of building for Adobe Express a very rewarding and valuable learning experience — from start to finish. The process required the team to be more resourceful and independent, and it also offered them the opportunity to contribute to a growing ecosystem and share their add-on with a large audience.

As a result, Accessify won the Most Creative Adobe Express Add-On category at the UGAHacks 9 MLH hackathon.

The team’s number one tip for fellow Adobe Express developers is to thoroughly go through the tutorials before starting development and to explore the supporting documentation. “There’s a wealth of information that can help with the finer details of development,” Shriya said. Another lesson the team learned is how important final testing is before the product goes live, and they recommend taking advantage of using the private distribution link to share your add-on and get feedback before submitting.

We’re excited to see the fall season of the MLH hackathons kick off and can’t wait to see what other teams will build for Adobe Express!

Try out Accessify today to make sure your content is accessible.
Register for an upcoming MLH hackathon and browse our MLH hackathon landing page, which includes ideas for building Adobe Express integrations.
Learn more about the Adobe Fund for Design and how you can apply to get funded.