Conveniently generate colorblind-friendly images with automatic alt-text in Slack!

1. A Slack Workspace
2. An Azure Computer Vision Instance
3. Python 3

1. Create a Slack app with the following scopes. Basically, you're letting the app have the ability to read/write files, read channels and reactions, and send messages as the app.

   • Bot Token Scopes: files:write, files:write:user, channels:history, chat:write, chat:write.public, im:history, im:read, mpim:history, and mpim:read, and reactions:read

   • User Token Scopes: links:write, files:read, files:write, im:history, im:read

2. Create an Azure Computer Vision instance. You can use the free tier!

3. To download all the Python library dependencies, use pip install -r requirements.txt in your terminal.

4. In a .env file, set up your environment variables-- you'll be using your Slack OAuth tokens and Azure key here.

   SLACK_BOT_TOKEN=xoxb-token-#
   SLACK_APP_TOKEN=xapp-token-#
   SLACK_USER_TOKEN=xoxp-token-#
   SLACK_SIGNING_SECRET=string-here
   
   AZURE_ACCOUNT_REGION=string-here
   AZURE_ACCOUNT_KEY=string-here
   

5. Install the Slack app to your workspace.

6. Run app.py and navigate to the App Home to try it out!

Color blindness affects 1 in 12 men (8%), and that's just one gender! In humans, some form of visual impairment is pretty common and affects millions of people present-day. But people use red-green and blue-yellow visuals all the time... in charts, heatmaps, market data, and images.

It's highly likely you're going to have teammates, customers, or community members with some form of visual impairment. How do we improve visual communication and make things more accessible?

NOTE: To see all showcase images in full resolution with lossless quality, here's the slidedeck link! Please use this link if you see blurry image quality on Devpost images.

Easy Image View is a free, opensource Slack app that creates colorblind-friendly images with auto-generated alt-text... all within seconds! Make communication inclusive and accessibility convenient.

With HSV Hue Shift Color Correction, we can make images red- green- blue- color deficiency friendly for those with Deuteranopia, Protanopia, and Tritanopia (the most common forms of color blindness). For those with screen readers, the Slack app utilizes Azure AI Computer Vision to automatically caption images with alt text. There's even settings in the App Home so that you can customize the app to your vision!

I'm not color blind myself, but I've had teammates with some form of visual impairment. For user-centered design, I did research into the community's pain points by reading their subreddit r/ColorBlind. From here, I learned that though some devices have colorblind modes, several users don't know about it since it's well-hidden, and others even choose not to use them because of issues like weird, off-putting recoloring and bugs (eg: Netflix appearing black) or shared PCs.

This made me think that a Slack app could be an effective solution to quickly generate colorblind-friendly images with alt text. Slack is used by teams and communities all over the world for all types of purposes... with lots of visual communication in workspaces, this seemed like the perfect opportunity to create an app that makes accessibility convenient! With the opensource Colorblind library for Python, I scripted a Slack app that uses HSV Hue Shift Color Correction and Computer Vision to (1) recolor (2) resize and (3) caption images.

• Language: Python
• Slack App Development: Bolt Py API and Events Subscription
• Computer Vision: Azure AI Computer Vision and OpenCV
• Opensource Library: Colorblind Py

To learn more, you can find the commented code in the GitHub repo!

I used the Bolt Py for Slack app development for the first time, so I'm really happy with my creation! For challenges, sometimes I was confused how to get everything to work together (eg: when to use the Slack Web API versus Bolt Py and how Event Subscriptions tie in).

Luckily, there was a lot of documentation and examples in the Github repo for me to refer to. Occasionally I would run into bugs and have no idea how to fix them by myself as a solo developer. I'd like to give special thanks to the people in the Slackathon workspace support channel who served as a second pair of eyes! (Get it, second pair of eyes? Haha.)

I'm happy that I think I created something with real-world value and use-case! I'm also proud that I picked up so many new skills for this project and quashed so many bugs. I didn't have any experience with Slack Bolt Py and had never used Azure for anything before.

I'm also quite pleased with myself with the project scoping because I was able to make something polished in a short time... with more features that could easily be added on. For example, the original app idea was only for color correction, but I was able to add alt text and resizing options so that the app would be more accessible for more types of users.

For next steps, Easy Image View could be further improved by using OCR computer vision to read text on images and add that to the alt text. For the scope of this hackathon project, computer vision is only used for image analysis for captions, yet OCR could make the app more effective for those with screen readers and also help those who struggle to read certain fonts if they have dyslexia.

Questions? You can contact me at @Ocarune.