Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

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


Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

LEAVE A REPLY

Please enter your comment!
Please enter your name here