The Tale of Two Modes: Dark and Accessibility

Dark mode is a fan favorite for a reason. It's easier on the eyes both physically and aesthetically. When our users began suggesting a dark mode, we knew what we had to do... Design it, duh!

Of course dark mode sounds easy, you just make all the black white and the white black right? Well to make something beautiful, you're going to need quite more effort than just that. Our team at iHeart Media has a rule, no black. It's hard on the eyes and to prevent overuse, let's just not use it at all! Our mix of dark greys blended beautifully as the background of our palette. However when it came to placing the colors on top, that's where the challenge began.

Red was our biggest challenge in this case. This color couldn't be too bright (or it didn't look red), but it also couldn't be too dark (or it would mix into the background). To help with these color challenges I used one of my favorite tools, Adobe Color. Here I was able to check the accessibility of colors on top of others. This incredible tool checks against the Web Content Accessibility Guidelines (WCAG), an international standard. These guidelines cover small text to large text and even icons on three distinct levels: the lowest being A and highest being AAA. Every single color that was used in this dark mode scheme was checked against its own background color to assure that it passes AAA standards.

After going through all of the colors within our design system, the dark mode color palette was finalized. To say that our users were thrilled is an understatement. Dark mode is now being implemented by developers to be released out to our users any moment. I'm still thrilled that we were able to meet a request by our users to make their experiences as delightful as possible.

During the discovery phase of dark mode, I found a style that I absolutely fell in love with... Neon. Ombre. Of course this isn't the most practical route so I created a secret mode that could be expanded on. Let me introduce you to the beginning of what I like to call "Rave Mode". Our users's experiences should be just as delightful as them and let me tell ya, radio hosts are a colorful bunch.

Although dark mode is a great option, whether just for fun or for a user sensitive to bright light, we recognize there are other users that need our help. We were notified of multiple users who have forms of color blindness and were having a hard time seeing our systems. Immediately we hopped into action.

The most difficult part was, how do we see what the user is seeing? Thankfully there's a super neat application called Sim Daltonism, "a window to color blindness". The app opened up a small see through window that could be dragged around my screen that filtered what as underneath. I was able to see just what some of our colorblind users see everyday which showed our obvious issues. I began the task of tweaking colors some of which turned into some pretty interesting combinations. And just as I did above for dark mode, I used Adobe Color to assure that all colors passed the highest level of the WCAG.

We were able to put this new accessible color scheme in front of our color blind users and they adored it. Knowing that I was able to make someone's everyday life easier when some of it can be so hard, I am forever grateful!