Accessibility Color Wheel A Smart Tool for Web Developers

0
46
Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

color

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

Don't miss out!
Subscribe To Newsletter

Receive top technical news, lesson ideas, travel tips and more!

Invalid email address
Give it a try. You can unsubscribe at any time.

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here