hue what!

Text Readability in Colour
To calculate programmatically whether text of a given colour will be readable over a background of another colour. Set a background and a text colour using the sliders, you can make the hue brighter or darker using the brightness sliders ↑↓. See below for how brightness values are calculated.
Background colour Foreground colour
↑↓ 255 255 255  
  255 255 255 ↑↓ pt
Web Hex: background   foreground
font in the box: give it time for the webfonts to load . . .
Background Colour Readability Brightness
Foreground Colour Readability Brightness
Colour Readability Difference
readability level
Readability Difference with fontsize adjustment
Readability of text requires less difference in brightness, the larger the type size, see Readability of Type in Colour – Effect of Font Size. Stroke weight of the text has bearing on this too, but that is much more difficult to work out programmatically.
Page uses cookies to remember settings from one session to the next unless disallowed. Allow cookies?
Calculation Formula
brightness weighting:
inverse gamma
flat (none)
gamma (like PS)
Explanation of the Formula Options
There are many different ways of calculating the brightness of a colour, by multiplying the red, green and blue colour values by different fractions.
The KEY to this – the only approach that works consistently across the full range of colour brightness levels – is not the fractions you use, but whether you adjust for the phenomenon of brighter colours being more easily distinguishable for a given value difference, than darker colours. In other words, whether you apply a brightness weighting. (For brightness weighting in graphic form, see Colour Brightness Experiment.)
Inverse gammaThis applies a brightness weighting according to the following formula, where ic = the calculated brightness value, the function returns a percentage that is then multiplied by 255:
var c = ic/255.0;
if ( c <= 0.04045 ){
return c/12.92;
} else {
return Math.pow(((c+0.055)/(1.055)),2.4);
FlatApplies no brightness weighting.
The formula for calculating brightness value can be one of various options, which each make some difference to the brightness level of a colour:
gamma (like PS)Approximates to the greyscale calculation formula used by Photoshop. red_value × 0.2235, green_value × 0.7154, blue_value × 0.0611, each in turn passed through the inverse gamma formula as shown above, then the result vi passed through a gamma formula as follows, which returns a percentage that is then multiplied by 255:
return vi<=0.0031308 ? vi * 12.92 : 1.055*Math.pow(vi,1.0/2.4)-0.055;
See Formulas for Calculating Colour Brightness.
CIE XYZred_value × 0.299 + green_value × 0.587 + blue_value × 0.114
YIQYIQ coefficients also known as Digital CCIR601 and suggested in the Web Accessibility Guidelines from the W3C and challenged by me (see Holes in the W3C Colour Readability Guidelines. ) red_value × 0.2125 + green_value × 0.7154 + blue_value × 0.0721
Lightness½ × (max(R,G,B) + min(R,G,B)), see Puzzling Greys.
Average(R + G + B) ÷ 3, see Puzzling Greys.

[ send me a message]