More Contrast, Please
So you have decided to go with a dark theme for your website. Great choice! I love dark themes too! My journey with computers began with monochrome CRT monitors, where white text was displayed on dark background. I am still very fond of that colour scheme. Done well, dark themes can be elegant and easy on the eyes. But there is a common pitfall that I see all too often in modern web design – the overuse of low-contrast colour schemes. This is something worth keeping in mind while crafting a new theme.
Take a look at this example where the text colour
is #777777 and the background is #222222:
The five boxing wizards jump quickly.
I am hoping that most people would agree that the colour contrast
above is too low. I certainly find it uncomfortable to read.
However, the situation becomes a bit less clear with the following
example, where the text colour is set to #A9A9B3 and the background
is #2A2A2D:
The five boxing wizards jump quickly.
The above example is, in fact, based on a real website I came across today. Now this is definitely better than the first example and I am sure some people would find this perfectly acceptable. However, I still find this uncomfortable to read. In fact, I have realised that as I get older, I need a higher contrast ratio to make the text more comfortable to read.
I would suggest that any colour choices for foreground text and background page colours should, at the very least, meet the Web Content Accessibility Guidelines (WCAG) Level AAA recommendations. This means the contrast ratio for normal-sized text against the background should be at least 7:1. There are also the slightly weaker Level AA guidelines, which require that normal-sized text have a contrast ratio of at least 4.5:1. That said, I personally recommend aiming for a 7:1 contrast ratio regardless.
The first example above has a contrast ratio of just 3.6:1, meaning it fails to meet both the Level AA and Level AAA requirements. The second example, on the other hand, has a contrast ratio of 6.1:1. While it satisfies the Level AA requirements, it still falls short of meeting the Level AAA standards.
To calculate the contrast ratio according to the WCAG contrast formula, use one of these tools:
If we improve the contrast for the second example above, we would
need to choose a brighter shade for the text, such as
#B7B7BE. On the dark background #2A2A2D,
this results in a contrast ratio of 7.2:1. Here is how it looks:
The five boxing wizards jump quickly.
I definitely find this much easier to read. If you are developing a dark colour theme for your web page or software, I request you to run your colours through a contrast calculator tool and ensure the contrast ratio is greater than 7:1. Anything less, and the theme might become uncomfortable for people like me. Small adjustments like this can significantly improve readability and comfort for your readers.