Presenting Code Samples With A Dark Theme...Please Do Not

NFor all of you who code using apps like Visual Studio or VS Code, please don’t present code in a meeting or conference session using a dark theme! I know I am going to get a lot of push back from this statement but let me explain why (please keep reading).

Living with Colorblindness

I really don’t want to publicize this to the world, but I am color blind. Yes, I do see colors, but I see them differently than most of you. On top of that, I have the worst kind which is any color that includes red or green, I don’t see correctly. I first found out that something was wrong when I was in elementary school. Our teacher, Mr. Winslow was showing the class a colored map. Later, I took my book up to him to ask a question about the map. He pointed to what I was trying to find on the map, but I could not see the difference between two areas of the map that only differed by a shade of the same color.

Later, in middle school, our science teacher was taking about color blindness and showed a graphic like the one shown here.

Presenting Code Samples with a Dark Theme 

Do you see a number or letter in this graphic? All I see are a bunch of random colored dots. Sadly, the teacher decided to make fun of me and the other class mates joined in. Since then I have rarely told anyone that I am color blind. Later, when I turned 19, I joined the United States Navy. I wanted to be a photographer but couldn’t. Then I wanted to be an electrician but couldn’t. Then I said I wanted to serve on a submarine, but I couldn’t do that either since I was color blind. This is when I discovered that, to me, being color blind is a handicap and I had to find ways around it. When I was doing research for this article I found out that in the United States, being color blind is a legal handicap.

Like any handicap I found ways around it. I am now an award-winning photographer and work for many well know rock bands. Even being aware of this, I still can’t match clothes and that’s why I dress plainly or need to ask someone, like my daughter or a clerk in a clothing store for help.

The World Stats

Ok, enough about me. Color blindness effects mostly men and the percent of people that are color blind can differ depending what country you live in. According to the studies I found, up to 10% of a population can be color blind. I then decided to do a Twitter poll to see how many developers are like me.

Presenting Code Samples with a Dark Theme 

As you can see, the results are that developers are almost two times more likely to be color blind. So how does this effect technology? It does a lot from making it hard to use apps like Google maps when looking at traffic speed to the new dark theme in programs like Visual Studio. If you love your dark themed apps, I don’t want you to stop using it, I want you to think of this when presenting your code in company meetings or conferences. I can sit next to a developer that uses a dark them on his screen and I can barely make out the code at all. Yes, it’s that bad for me.

It’s All About Contrast

The reason that reading dark themes is hard is it’s all about the contrast. Dark text on a white background pops out and can be easily seen by anyone, even when some of the text is colored as shown here.

Presenting Code Samples with a Dark Theme 

This example is using the default theme in Visual Studio along with the default font size. The same screen in a dark theme looks like this.

Presenting Code Samples with a Dark Theme 

The text above is very hard to read since the text does not “pop” and the dark around the colored text makes it very difficult or impossible to read. For me, the white text is even harder to read. It would be easier if the font size was a lot larger, but most presenters never change their font size when presenting. I always keep my font size at a minimum of 14 points, not the default of 10 in Visual Studio.

If you haven’t seen me speak live, I do use a dark theme for my PowerPoint slides that complements my “Rock Your Code” brand. But I do use a large font size when showing code.

Presenting Code Samples with a Dark Theme 

As you can see, the text and code in this slide is easy to read, even from far away using a dark background. This slide text is 32 points and the code is 20 points.

Application Development

For a very long time, I have been urging companies I work for to think about their color-blind users when choosing colors and icons. I’m not aware that any of them did this. I don’t think they realize that this could affect thousands to millions of users… I don’t consider that a small group.

Microsoft does have some suggestions on how to make apps easier to use for all people with accessibility issues in this post Accessibility Best Practices. If you work on the user experience part of apps, I recommend reading this post along with others, before the app is released!

I asked a friend of mine, Mark Miller, who I have known for a long time and has spoken at my user group many times about this subject, he stated “Positive polarity (black text on white background) is better than negative polarity, essentially proven with evidence presented in my Science of Great UI course(sgui.com)”.

Summary

If presenting code, please use the default theme, like the one in Visual Studio and increase your font size to a minimum of 14, ideally 16 points. That way I don’t have to leave or start checking my cellphone once you get to presenting code.

I hope you will make a comment below.