Readability of Type in Colour

 

This page is related to my text colour readability page, where by the use of sliders you can see the effect of coloured letters over different coloured backgrounds.

The text colour readability page page uses a formula to determine readability that is based upon the W3C Web Accessibility Guidelines on colour visibility, that are half-alright so far as they go, but which ignore, among other things, the effect of type size.

On this page I discuss some type size issues and give the working formula that I am using on the text colour readability page to adjust the W3C guidelines to make them a bit more realistic.

Look at the following two screen snapshots from the text colour readability page. In the first the text is in Verdana 10-point, and in the second Verdana 30pt.

I guess you will agree with me that the text at 10pt is quite poor on readability, the text at 30pt much less so.

The W3C guidelines make no allowance for this difference, their formula gives a brightness difference in these samples of 107 in both cases. Clearly that’s no good; it works for 10pt (a score less than 125 on the W3C formula and 110 on mine indicating poor readability) but needs modifying for the larger size. My text colour readability page does modify for text size, according to the working hypothesis given below, though I’m very aware that there could be shortcomings in my method (albeit an improvement on the W3C original), not least because . . .

Different fonts at the same point size, look like different sizes.

The next time someone says to you with assured authority that ‘For readability fonts should be a minimum of x-point’ you can show them this page, while at the same time moving your boot in ever closer proximity to their backside. If you wouldn’t mind. Thank you so much.

But this gives us a problem, when working out a formula for colour-combination readability, because if we adjust the formula for type size, this will be the technical type size rather than perceived type size, and the readability will be effected by the perception rather than the technical, won’t it? Will it? I’m not sure. Further research needed, but in the meantime, the point size is all we have, and having that is better than not having it, so here’s my working hypothesis:

I’ve found that a reasonable readability analysis can be achieved by adjusting the ‘x-range’ (the range outside of which a brightness difference should indicate that text is readable – see my brightness difference page) by 2.5% for each point size where text is brighter than background, and 1% for each point size where the text is darker than the background.

Using 10pt text as a starting point, and saying that the range for brightness difference (text brightness minus background brightness) should be outside of 110 to -140 at this point size, the formula for determining the range for each point size from 4pt up is, for each end of the range:

new_range_limit=parseInt((font_adjust_stp*(Math.pow(1-(font_adjust_pc/100),new_Font_Size-4)))+0.5);

where:
font_adjust_stp = key_range_bound*Math.pow(1+(font_adjust_pc/100),6)
Math.pow = raised to the power of, in Javascript notation
6 = the difference between our reference point-size, 10pt, and the minimum point size, 4pt.
-4 = because we're starting from 4pt size
font-adjust_pc = 2.5, or 1, ie the percentage the value is to be adjusted by
new_Font_Size = the font size we’re adjusting to
key_range_bound = 110, or -140, ie the bound of the range at 10pt

This calculation, while it looks a bit complex, is essentially that used for working out compound interest over a time period. The principle is much the same.

You can see what the x-range bounds come out to for a given point size by adjusting the font size slider on my text colour readability page.

And that seems to work quite well. It’s but a working hypothesis, and could possibly be improved. Please let me know if you think it can, and if you cannot then please remember to revisit this site. Thank you.

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.

In adjusting for type size, I’ve talked about ‘brightness difference’ but not about ‘colour difference’ (see the text colour readability page for a reminder of what this means). This is because I don’t set much store by colour difference, and the reason for this is elaborated on discussion on colour difference page.