Gallery
Instagram
Flickr
Pinterest
DaveCOLLIER
DevelopmentPages
Text Readability in Colour
readability by algorithm
Description
In Text Readability in Colour you can see how readable text in one colour is over a background of a different colour. A small barchart gives a programmatically-calculated guess, which is pretty accurate. Working this out depends on which formula is used for calculating how bright a given colour is, readability is a feature of relative brightness, hue while often referred to as key is only marginally significant for readability, see my page Equivalent Colour Brightnesses. Relative brightness is by far the most important indicator, and size of text makes a difference too. While font size is significant, which font is used seems to be of little relevance, as you can see by selecting from the wide selection of fonts in the Google Webfonts in the dropdown list – you need to give this a little time to load, it will all be correctly filled with patience.
In determining readability, brightness is the most significant factor by far. There are different ways of calculating brightness of a colour, the best options for readability determination are those where gamma is checked. This applies only to the middle block of four options below, gamma has no effect on the rightmost block. Read more on Formulas for Calculating Pixel Brightness.
Foreground colour picker
background: – foreground:
font in the panel:
give it time for the webfonts to load . . .
font size pt
Background colour picker
Background Colour Brightness
Foreground Colour Brightness
Brightness Difference
Readability Difference with fontsize adjustment
Page uses cookies to remember settings from one session to the next unless disallowed. Allow cookies?