How To Identify Adequate Contrast Between Text And Background Colors Of Your Website?

You don’t have super power to know exactly the condition or situation of some of your visitors coming to your website. Out of 1,000 visitors, there’s a good chance , a few of them have visual problems or color deficits, especially these days most people have unhealthy lifestyle.

Actually, anyone may experience difficulty reading your content under less than ideal situations like low quality monitor and light reflections from your windows.

Put yourself in the position of your website visitors, do you love seeing the sample color contrast below?
Sample Color Contrast

Can You Afford To Lost Business?

If you’re totally concern about your customers or visitors, you should consider checking your website if it passed colour contrast testing so that even those people with visual impairments or even viewed on a black and white monitor, it is still pleasant for reading without experiencing eye strain at their end.

Website Colour Contrast Check

You don’t need to hire graphics artist for consultation on this matter. You can do it by yourself by using the free tool we used in our projects.

Using this free color contrast checking tool, you can test your existing website color contrast if it passed the set standards by WCAG (Web Content Accessibility Guidelines) 2.0.

It’s very simple to use. You just provide foreground color and background color in hexadecimal values. And then check the results. The results should be all Yes. If not, you may adjust using the adjusting sliders to get the adequate contrast for your site.

colour contrast check

And to know corresponding hexadecimal values of colors, you may use this online color picker tool.

If you’re not familiar about the colors used in your website, you can use this ColorZilla browser plugin where you just move the color picker to your website and then you know instantly it’s hexadecimal equivalent. You may install the plugin here:ColorZilla Firefox or ColorZilla Chrome

You may check video below to know how to test and adjust website color contrast.