Readability of Type in Colour – Effect of Font Size

This page has now been moved to Experiments with Colour and Brightnesses.

Black on white is readable, white on white definitely isn’t. Shades in-between will depend, you may not want the text to shout at you, you may want it to be just readable, as in for example a watermark.

And the larger the text is, the more readable it is likely to be, compared with text of the same colour that is of a smaller size.

Happy Candy

Happy Candy

The bigger the type, the easier it will be to read it when there’s not much contrast between the text and background colours.

Obvious that, isn’t it? Doesn’t take much imagination to work that out – unless you design guidelines for readability of text in colour, since the people who draw up such guidelines don’t seem to have noticed this. 

Remember that different fonts at a given point size do not LOOK all the same size:

Hypothesis for type size adjustments:

You get a brightness difference by subtracting the brightness value of the background from the brightness value of the text, ie TextBrightness - BackgroundBrightness = BrightnessDifference

If the background is brighter then the text, for example black text on white, then the brightness difference will, of course, be a negative number.

I start with the general rule of thumb that at 10pt text, there will be very adequate readability outside of the brightness difference range of -80 to 80. This is using the exponential formula described in Readable Text in Colour, rather then the W3C recommendation which as I explain on these pages is worse than unreliable. (I ignore what the W3C guidelines call ‘colour difference’ as that is a complete red, green or blue herring, as explained on my W3C Colour Difference Guidelines page). 

I’ve found that by adjusting the brightness difference range (ie the -80 to 80) for changes in type size, I can get a reasonable readability analysis that takes into account the fact that bigger text is generally easier to resolve.

As a general rule, I decrease the brightness difference criteria by 2.5% for each additional point size. For example, if the bounds of 10pt text are -80 to 80, the bounds of 11pt text will be -78 to 78, that is a decrease of 2.5%. My formula for calculating this gives a zero result for text of 4pt size or less, as that is unlikely to be readable on the screen whatever the brightness levels.

Bigger font size is not a readability panacea

I must stress, here, that making type sizes bigger doesn’t automatically mean that text is easier to read. We are talking about breakpoints for colour readability on this page, not about readability measurements of text in two sizes, where in both sizes the text is fundamentally readable. There is more on this topic on my Discussion on Type Sizes page.