Maximizing readability in dashboards
9 Feb
Although dashboards typically don’t contain a whole lot of text, the text they do have is very important and it must be readable. Some examples of text on a dashboard include:
- titles of charts and sections
- tab names
- choices in drop-down menus, check boxes, and radio buttons
- labels on buttons
- chart titles, values, axes, and legends
- tables
- instructional text
It’s important to carefully craft all these bits of text to convey only the information necessary to make the dashboard easy to understand and navigate. It is equally important to make this text easy to read. You want your users to spend more time understanding the text than trying to read it. There are many factors that affect readability, but I’ll highlight three of the most important ones below.
Maximize the contrast between text and background colors
One of the most important determining factors of readable text is how much contrast there is between text and background color. Often, you can instinctively tell when there is enough contrast, but you also have to keep in mind that not everyone sees color the same way you do. In some cases, color-blindness might be a factor, in other cases older eyes or other vision impairments may make it harder to distinguish one color from another. Many people require a higher level of contrast than you might be used to and you have to take this into consideration.
There is a formula you can use to calculate the contrast between any two colors (google “luminance contrast“), but it’s pretty complicated, so I created a tool that will do the calculation for you. Just select your background color and your text color and the tool will provide one of the following values:
- Not enough contrast – There is not enough contrast for the text to be readable.
- Low contrast – There is some some contrast, but not enough for regular-sized text to be readable.
- Good contrast – There is enough contrast for the text to be readable by most people.
- High contrast – There is enough contrast for the text to be readable by people who require higher contrast.
As a rule of thumb, I recommend aiming for “high contrast” to cover the biggest population of your users.
Avoid bright, highly saturated colors and busy backgrounds
Although there may be enough contrast between black text and a lime green background, that doesn’t mean this is a good design decision. Bright, highly saturated colors are more stressful on the eyes and demand too much attention because the eye is immediately drawn to them. Busy backgrounds have a similar effect. Your eyes insist on processing the background rather than focusing on what is really important (the text). Compare these three examples:

All three examples use black text and have enough contrast, but example 3 is clearly the easiest to read because the eye focuses on the text rather than the background.
If you find that you must use bright colors or a busy background in your design (maybe you have a style guide to follow), then you can apply a simple trick to reduce eye strain: add a light or dark layer on top of the bright color so that the bright color only appears as a border.

In Xcelsius, you can do this by utilizing a combination of Background components. Typically, Background 1 is intended to be used as a border and Background 2 is intended to be used for text. Some themes have more backgrounds to choose from, but you should always use Background 2 as the background for text.

Choose a font that is easy to read on the screen
Font choice is another important factor for a dashboard. You should avoid highly decorative fonts, such as ones mimicking handwriting, because these are much harder to read. In general, you can think of fonts as falling into 2 groups: serif and sans-serif.
Serif means the letters have little “feet” added to the tops and bottoms. An example is Times New Roman. Sans-serif, on the other hand, removes the “feet” so that the letters have more precise endings. An example of this is Tahoma. If you compare the T’s in Times New Roman and Tahoma, you will see the main difference between serif and sans-serif fonts.
The rule of thumb here is that sans-serif fonts are easier to read in small sizes on the screen than serif fonts. So, if your text needs to be really small (such as chart data values), sans-serif is a better choice.
Of course, you should also make sure the text is big enough to read. It’s tempting sometimes to make text as small as possible to fit into some pre-defined space, but you should always avoid this temptation. Rather than making the text small, you should reconsider your design so that it allows for bigger text. Even if it’s technically possible to read that text in 8pt size, it creates unnecessary strain for the eyes to process it. Ideal sizes for reading are between 10 and 12pts, but headings and titles can be larger.
Keeping in mind these three factors will help to greatly improve the readability of your dashboards. It will reduce eye strain and help your users focus on the important part – understanding the information being presented. It will also have the nice side-effect of making your dashboard just plain look better.









This is great information – thank you – particularly for the nice addition of the colour contrast checker.
Perhaps it’s also worth mentioning the use capital letter for emphasis – ie, don’t. I see this cropping up a bit again lately.
People – they are *not* easier to read, they are *not* easier to scan and they are *not* more authoratitive. They are, in fact, a form of camouflage.