Header Ads

Accessibility Color Wheel A Smart Tool for Web Developers

Are you a website developer or front end designer?? Many a time you face problem with the right color combination for background and foreground for your website?

Want to see the preview --how it looks before applying to your webpages?

If reply for all the above questions are true, then this post will help you further.




This is a tool, that I created, which helps to choose a color pair, for instance to write a web page. For the sake of accessibility the text and background color of a site should also be easily readable to people who have not a perfect vision.

This tool helps to improve site accessibility by analyzing the contrast of a color pair and showing how color-blind people will see it. It simulates three kinds of vision deficiencies: deuteranopia,protanopia and tritanopia.

If the contrast between the colors is good, a checkmark will appear.

It's also possible to analyze whether the colors are good in case of normal vision and for every single deficiency.---as stated by the developers.

Well, How to use this tool...


Step-1:Go to the Color Wheel






Your Ad Here




Step-2: Select Foreground tab and Select color. The button color will changed to Yellow


Step-3: Select the color you want to choose for your Foreground. The color's HTMl color code will shown in the right side box.
Step-4: Now select Back ground tab in the left panel
Step-5: Select a color from the wheel.
Step-6 Check out the result pane for correct combination.

I tested two cases::
Positive case:
Here It is saying correct color combination. How do you know this is correct?
simply by seeing right green mark.







Negative case:




Here it is saying wrong by giving a X mark.





I found this to be a cool stuff for the web developers. What do you say??
Powered by Blogger.