Contrast Calculator with YIQ
We have plenty to consider when crafting mobile and web software. Contrast and accessibility are not new design considerations but they are still very important. The WCAG, Apple’s HIG and Googles Material Design guidelines tell us content should be distinguishable and requires us to make it easy for the user to see the content by clearly separating background and foreground. For example the WCAG recommends a 3:1 contrast ratio for non-decorative text for text larger than 18points and 14points when bold.
Let’s have a look at a range of various possible colors. Maybe these are your corporate colours or colours plucked from an image.
Now that we have these potential background colours and their hex values, we need to find out whether the corresponding text should be in white or black, based on which has a higher contrast, therefore affording the best readability. Maybe you have amazing eyeballs that can help you recognise contrast levels. But for people like me without these powers, I created a little tool that calculates the right contrast color using YIQ. This calculation converts the RGB color space (HEX) into YIQ. The result is perfectly readable text on coloured backgrounds.
var r = parseInt(hexcolor.substr(0,2),16);
var g = parseInt(hexcolor.substr(2,2),16);
var b = parseInt(hexcolor.substr(4,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return (yiq >= 128) ? 'black' : 'white';
I have made a little colour grid. When you run the formula against the individual colours, you wil and up with the hue table as shown below:
Getting the right color contrast is important. It is important to select smart defaults by making de contrast between colours as high as possible. This makes it easier to read, increases the accessibility and is just easier on the eyes.
Originally published at dannyruchtie.com.