• Skip to primary navigation
  • Skip to main content
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Subscribe
WittySparks / Technology / Software / Do you consider Accessibility Color and Contrast?
Accessibility Color Contrast Tools and Testing

Do you consider Accessibility Color and Contrast?

Software March 22, 2015 by Sravan Kumar Kandagatla

Color plays a key role when it comes to Accessibility. Though your site has good content, if it is not accessible or readable to the users who are colorblind, what is the use of such a site? That means you are actually ignoring 4.5% to 8% of the population.

4.5% to 8% is a huge user base; for example, consider Britain, where there are approximately 2.7 million color blind people and males. So think how many people live in this world with color (color) blindness (color vision deficiency, or CVD).

If you are not making your App accessible friendly by using proper colors and contrast, that means you are actually not considering or giving importance to the millions of people who are colorblind.

Most of the designer’s job is to consider appropriate colors by keeping proper accessibility in mind. And this doesn’t mean that you should use color alone to convey a different kind of information.

I came across a couple of interesting tools or sites that help you pick the right color codes by considering WCAG accessibility guidelines. The following tools even perform Color contrast testing and help you make your site or app more accessible.

  1. Colorable is a color contrast tester, which tests the combination of foreground and background color contrast for better readability. Just input the color you have decided to use in your App; this tool helps you choose the right contrast values for every possible combination and even provides you pass/fail scores for the colors you choose.
  2. Colors is another color palette tool, which helps you for preparing/skinning your prototypes. This tool provides a set of skin classes that can be used while prototyping in the browser. Also, you could check around 90+ examples of A11Y compliant color combos.
  3. Color Contrast Checker is a tool that helps you to check the contrast ratio.
  4. Colour Contrast Check is another tool to test color contrast, which allows one to choose foreground and background color based on which it provides whether the colors are WCAG 2 AA Compliant (18pt+), WCAG 2 AAA Compliant (18pt+), or not.
  5. IDI Web Accessibility Checker: This tool checks the HTML page to test the accessibility standards to ensure everyone accesses the content.

To understand and to know the importance of color in accessibility, refer to the following Colour Accessibility pocket guide by By Geri Coady, which helps you to create accessible, friendly designs that are accessible to people with color blindness.

I hope this helps designers and developers understand the importance of Color & Contrast in Accessibility. Why not share your opinion about the same?

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • 7 Crucial Features and Facts about CMMS Software That Makes It or Breaks It
  • How to Retrieve Deleted Files & Text Messages from Android Device
  • Learn How to Create Free Online Logos in Minutes
Launch Offer
Rocket.net - Managed WordPress hosting
Rocket.net - Managed WordPress hosting
$1 for first month, $25/month

A highly secured WordPress hosting platform powered by Cloudflare enterprises with customized services for agencies, eCommerce, and small businesses.

  • PageSpeed Guarantee
  • Ultra Secure Platform
  • FREE Migrations
  • Automatic Updates
Try for $1.00 Our Review
We earn a commission if you make a purchase, at no additional cost to you.

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Semrush - SEO and Marketing Tools
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Semrush - SEO and Marketing Tools
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « Get the Ultimate March Madness Setup
Next Post: Apps to help track your wallet and other essentials »
Profile picture for Sravan Kumar Kandagatla

About Sravan Kumar Kandagatla

Founder of WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure