In a digital age, it can be hard to account for every single user and there is one user type that is consistently forgotten. People with disabilities are often an underrepresented population and, in web content, the guidelines are not always followed, but rather treated as suggestions. While, in recent years, the addition of an accessibility has helped curb most of these issues, it isn’t a fix. With this issue in mind, I decided to set out to make a tool that checks for one specific issue and makes it apparent to the desktop publisher.
Color Theory: Picking the Palette for our tool
Colorblindness affects around 300 million people worldwide and, yet simultaneously, it almost seems like they are the least accounted for. Without high contrast between text colors and the background color, colors can blend and make content illegible or unclear. Luckily, the Web Content Accessibilty Guide established guidelines to circumvent these issues namely for contrast between text and backgrounds. There are two levels to these guidelines: AA and AAA. Under the AA guidelines, which presents the minimum contrast ratio, regular text (Text smaller than 18pt font) needs a ratio of 4.5:1 where as large text (text larger than 18pt font or 14pt and bold) the contrast needs to be 3:1. For AAA guidelines, small text contrast becomes 7:1 and large text is 4.5:1. In most cases, AAA is preferred, but most websites pass AA tests only.
In Photoshop specifically, there is a filter you can apply that allows you to see how the asset will look under different colorblindness types but not where you can improve visibility. Therefore, the desktop publisher may have to guess or even individually go through layers to improve the legibility of text, which takes time and effort they may not have. This is where I started to wonder how this process could be streamlined and made more apparent to the desktop publisher to save both time and energy.
Taking the Red Pill: Programmatically Checking Layers with JavaScript
Photoshop has a feature that allows user to programmatically create, change, and edit documents via three different programming languages: JavaScript, VisualBasic, and AppleScript. JavaScript is the one I was most familiar with, but also had the best legibility and adaptability in my opinion. Using JavaScript, I developed code that would check each layer of the Photoshop project, see if it was a text layer, check its contrast against the background color, and then, if it fail AA or AAA compliance, add a layer to the text to make it easily apparent to the desktop publisher.
Originally, I had wanted to draw a box around the text using Photoshop rectangle tool, but that proved to be difficult with how Photoshop documents what their features are in code. I eventually came up with the program in the gif above. So while this program shows that you can update and check the text, it may not actually be completely beneficial to use in cases where the text has a stroke added already, or if the text is not to be edited in anyway. However, I believe that, at the bare minimum, it would not be difficult to flag the text to the desktop publisher while they work, rather than consistently making them apply a colorblind view filter.
Somewhere over the Rainbow: Process Summary and Reflections
Process Infographic
Accessibility is something that is extremely important both to me and my future career in localization. Localizers can only check so much when they have to account for linguistic, cultural, and functional taboos in documents on top of whether the document meets accessibility guidelines. While Photoshop provides some support, it may be easier to simply click a button and have the issue become apparent at product inception rather than at its final check.
I didn’t complete what I set out to do originally but I do think it was fun and challenging to write a program that works with something as complex as Photoshop. As someone with a colorblind person in my family, I often see graphics, website interfaces, and UI that are illegible or outright inaccessible to the colorblind: having a tool like this would ease access to materials and save time, effort, and money before a problem can even arise. And, at the very least, open the wide world of color to everyone, not just those with perfect color vision.
Try it yourself!
The code I created for this project can be found here.
