GitHub’s dark mode is too dark
By: Karen Ying
Tags: UX, Design, Accessibility, UI, Dark Mode

This past week, GitHub released a long-awaited feature — dark mode. Like many devs around the world, I was hype. In 2020, a dark mode toggle for anything remotely related to tech seems like a requirement.

So I flipped the switch. My immediate reaction was that it seemed a bit off. But I wanted to give it a chance and credited that feeling towards just not being used to the theme yet.

Flash forward a couple of days, I found myself switching to light mode for code review specifically. I didn’t feel confident code reviewing in dark mode. I was scared I would miss something. It was after a couple of instances of this did I realize, GitHub dark mode is too dark. And here’s why.

The proof is in the palette (pudding).

Accessibility and Contrast Ratio

You can read more about contrast ratio here but this is what you need to know:

The contrast ratio between two colors mathematically calculates how different our eyes perceive them to be

It ranges between 1 (two of the same colors) to 21 (black and white)

(two of the same colors) to (black and white) The smaller the text is, the larger the contrast ratio between the text color and the background color needs to be

The Web Content Accessibility Guidelines (WCAG) defines a level AA contrast ratio as above 4.5 and level AAA as above 7 for small text

contrast ratio as above and level as above for small text AAA is considered the gold standard level for web accessibility

Other Dark Mode Site Palettes

I grabbed the dark mode colors of a couple of popular sites/apps. Every palette image shows the background color, primary text color, secondary text color from left to right. I put the contrast ratios of the primary and secondary colors with the background color on top of the respective color.

Spotify:

Facebook:

YouTube:

All of these satisfy the AAA standard of a contrast ratio of at least 7 👍🏼

And then we have GitHub’s new look…

GitHub:

Not only do the colors look noticeably darker than their counterparts in other apps, the secondary text color fails AAA standards! It’s important for the secondary text color to have high contrast because of how small the font is. I knew my eyes didn’t deceive me.

While contrast ratios aren’t everything, they are a simple way to quantify the difference between two colors. In this case, it’s clear that GitHub’s dark mode colors are darker. This can make it harder to read text.

Code Review Palette

Finally, my main gripe with GitHub dark mode is that the red/green for code diffs looks super off to me.

On the right is the light mode colors and the left is the new shades. I overlaid the respective background colors on top:

I did calculate the contrast ratios of both palettes and they were pretty similar (close to 1 lol). However, for some reason the lighter one is easier for me to parse at a cursory glance. Maybe I’m not used to it yet, but I really dislike how dark the new diff colors are. For something as important as code review, I’m using GitHub light mode.

I also investigated VSCode’s Git integration diff colors (which I enjoy!):

IMO these shades work well even on a darker background and don’t hinder code review.