Accessibility Color Wheel A Smart Tool for Web Developers

Share and Enjoy !


Are you a website developer or front end designer(COLOR)? Many a time you face problem with the right 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  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 colo 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

wheel color

Your Ad Here

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

photo color

Step-3: Select the one you want to choose for your Foreground. The color’s HTMl 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:

photo color

Here It is saying correct combination. How do you know this is correct?
simply by seeing right green mark.

Negative case:

photo color

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??

Share and Enjoy !

See also  The Best Cheap Phones (Update 2021)

Leave a Reply

Your email address will not be published. Required fields are marked *