5 accessibility tools to check your design’s contrast ratio

• Accessibility, Tools

4 min. (703 words)

5-accessibility-tools-to-check-your-design’s-contrast-ratio

If you’re working on web design projects, then it follows that web accessibility should be one of your top user experience considerations. Whether it’s finessing on-page readability for users with visual impairment, or ensuring that your web page’s visual cues remain effective on mobile devices, sometimes color alone may be what’s standing between you and a truly accessible and inclusive design.

One of the most important considerations is contrast ratio — or the luminance relationship between light and dark elements (most often text) in your design. Users with certain cognitive disabilities may require lower contrast text, while low vision readers may need high contrast user interface considerations in the visual design they consume.

Likewise, color blindness is also a consideration that needs the attention of any designer implementing a design process which strives towards equitable, accessible design.

The good news is that there are a handful of inexpensive — and even free — tools that can help you become more cognizant of design for all, and how you can help people equitably experience the design you’re creating.

1. Contrast

Contrast
 is a macOS app that offers designers a way, like its namesake, to immediately gauge the contrast ratio of color choices to assure they are in alignment with Web Content Accessibility Guidelines (WCAG). An app that’s built for immediate feedback without being a burden to your design workflow, Contrast also offers a guide
 on their site that acts as a primer on some of the WCAG accessibility standards.

The app acts as a small menu bar which you can integrate into whatever design software you’re using, or move the menu bar around your desktop to use as a floating window anywhere else on your screen.

958823a6d4793b99c8bdcf26f096f458

2. Color Safe

If you’re looking for an in-browser option, Color Safe
 is a web-based tool that allows designers to generate color palettes based on WCAG standards for contrast ratio. Simply select your project’s background color, font family, font size and weight — plus the WCAG standard you’re trying to achieve — and Color Safe will generate palettes whose contrast ratio scores you can compare.

B5b023b6c63dd63a59577a22e3d2ddd8

3. Tanaguru Contrast-Finder

Tanaguru Contrast-Finder
 is an easy-to-use, web-based tool that allows you to simply enter your preferred foreground and background colors (in either RGB or as a hex code) to monitor your design’s contrast ratio. The tool allows you to select your desired minimum contrast ratio scores, while also generating a list of adjacent colors to evaluate.

These provided alternatives also come with in-use samples of different text sizes, weights, and their resultant contrast ratios — giving you a sense for which color and text choices will not only be more accessible, but play nicely together as part of your overall design.

F1d4337c4ee09101061acc2f0231c9b7

4. Stark

With plugins for Adobe XD, Figma, and Sketch, Stark
 is a plugin that features a suite of tools to foster accessible and inclusive design standards — right from within the software designers are already working with. Stark’s contrast checker tool allows designers to double-check that their typography and font size — in conjunction with the design’s background colors or supporting visuals — provides the necessary legibility and sufficient contrast to harmonize with accessibility guidelines.

As a bonus, Stark also assists with additional accessibility issues, including color-blindness. The app allows designers to view their work in color-blindness simulation and make tweaks to their design system.

F4813b3e9edd2f4d3a0fb01d073f4f5c

5. Spectrum

Spectrum
 is also a free tool that can assist you as you design with color-blind users in mind. A free Google Chrome extension developed by Yehor Lvivski, Spectrum also allows designers to directly test their sites across a range of over eight different versions of color vision deficiencies, including an array of red-green and blue-yellow color blindness.

12b02fa67c1da7ec46ab0b496e749c12

With over 200 million people in the world who are visually impaired, web accessibility should be a top consideration in every designer’s process. Now that you’ve got some handy apps in your toolkit, it’s your turn to get out there and make the web a more accessible place for all!

For more color resources, check out a practical UI color application guide, and our favorite color palette picking tools.


Find more Community stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

218 comments

  2. What’s up to all, how is everything, I think every one is getting more from this
    site, and your views are fastidious designed for new people.

  4. Oh my goodness! Amazing article dude! Thank you so much,
    However I am encountering difficulties with your RSS.
    I don?t know the reason why I am unable to join it. Is there anybody else
    getting similar RSS issues? Anyone who knows the solution will you
    kindly respond? Thanx!!

    Also visit my webpage: http://www.diclelife.com/

  9. Hmm it seems like your site ate my first comment (it was super long) so I guess I’ll just sum it up what I
    had written and say, I’m thoroughly enjoying your blog.
    I too am an aspiring blog blogger but I’m still new
    to everything. Do you have any points for first-time blog
    writers? I’d genuinely appreciate it.

    Have a look at my page: wukong333 demo id

  10. Thanks on your marvelous posting! I actually enjoyed reading it,
    you might be a great author. I will make certain to bookmark
    your blog and will eventually come back at some point.
    I want to encourage you to definitely continue your great writing, have a nice afternoon!

    Here is my webpage; 918kiss 2 Slot game

  14. I am really inspired along with your writing talents as neatly as with the format on your weblog.
    Is that this a paid theme or did you modify it yourself?
    Either way keep up the nice quality writing, it
    is rare to peer a great weblog like this one these days.

    Take a look at my web site https://mpc-install.com

  16. I used to be recommended this blog by means of my cousin. I’m now not certain whether or not this
    post is written by way of him as no one else
    recognize such targeted about my trouble. You are wonderful!

    Thanks!

  21. Hiya, I’m really glad I’ve found this info.
    Nowadays bloggers publish only about gossips and web and this is really annoying.

    A good web site with exciting content, that’s what I need.
    Thanks for keeping this website, I’ll be visiting it.
    Do you do newsletters? Cant find it.

    Also visit my webpage http://anapa-alrosa.com.ru

  22. Nice post. I was checking continuously this blog and
    I am impressed! Extremely helpful information specifically the
    remaining phase 🙂 I take care of such info a lot. I was seeking this particular information for a long time.
    Thanks and best of luck.

    My page … mpc-install.com

  23. Aw, this was an incredibly good post. Finding the time and actual effort to produce a great article?
    but what can I say? I put things off a whole lot and never
    manage to get anything done.

    My blog kebe.top

  31. What i don’t realize is actually how you are no longer actually a lot more well-favored than you might be now.
    You are so intelligent. You recognize thus significantly relating to this topic, made
    me in my opinion consider it from a lot of numerous angles.
    Its like men and women aren’t involved until it’s one thing to accomplish with Lady gaga!
    Your own stuffs excellent. At all times handle it up!

    Review my web-site; kebe.top

  33. I’m really inspired along with your writing talents and also with the structure on your blog.
    Is that this a paid subject matter or did you modify it your self?
    Either way stay up the nice high quality writing, it’s rare to look a nice blog
    like this one nowadays..

    my web page – kebe.top

  34. Very nice post. I just stumbled upon your blog and wanted to say
    that I have really enjoyed surfing around your blog posts.
    After all I will be subscribing to your rss feed and I
    hope you write again very soon!

    Feel free to surf to my blog post: https://open-csm.com

  41. Hi, I think your website might be having browser compatibility issues.
    When I look at your website in Ie, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that,
    excellent blog!

    Also visit my blog post: chengdian.cc

  43. Hello I am so thrilled I found your blog, I really found you by accident, while
    I was searching on Bing for something else, Nonetheless I am here now and would
    just like to say thanks a lot for a tremendous post and a all round exciting blog (I also love the theme/design), I don?t have time to
    read it all at the minute but I have saved it
    and also added in your RSS feeds, so when I have time I will be back to read much more, Please do keep
    up the awesome jo.

    Also visit my homepage; http://www.craksracing.com

  45. Hi there, simply turned into alert to your blog through Google,
    and found that it is really informative. I’m going to watch out for brussels.
    I’ll appreciate if you proceed this in future. Numerous other folks
    can be benefited out of your writing. Cheers!

    Look into my webpage; http://chengdian.cc

  53. I think this is among the most important information for me.

    And i am glad reading your article. But should remark
    on few general things, The site style is perfect, the
    articles is really great : D. Good job, cheers

    Here is my web-site mpc-install.com

  54. Hola! I’ve been following your web site for
    a long time now and finally got the bravery to go ahead and give
    you a shout out from Dallas Tx! Just wanted to tell you keep up the
    excellent job!

    my web-site … grautocar.com

  55. Great ? I should certainly pronounce, impressed with your web site.

    I had no trouble navigating through all
    the tabs and related information ended up being truly easy to do to access.

    I recently found what I hoped for before you know it at all.
    Reasonably unusual. Is likely to appreciate it for those
    who add forums or anything, website theme .
    a tones way for your customer to communicate. Excellent task.

    My blog post: https://kebe.top/viewtopic.php?id=1903950

  61. Do you mind if I quote a few of your posts as long as I
    provide credit and sources back to your weblog? My blog
    site is in the very same area of interest as yours and my visitors would really
    benefit from some of the information you present here.
    Please let me know if this alright with you. Thanks!

    Feel free to visit my web blog – http://astravo.net.ru/modules.php?name=Your_Account&op=userinfo&username=NansonLeta

  62. I do trust all the concepts you’ve offered for your post.

    They’re very convincing and can definitely work.
    Nonetheless, the posts are too quick for newbies. May you please extend them a little from next time?
    Thank you for the post.

  63. I like the helpful information you provide in your articles.

    I will bookmark your weblog and take a look at once more here regularly.
    I’m fairly certain I’ll be told many new stuff right here!
    Good luck for the next!

    Feel free to visit my web-site kebe.top

  68. My spouse and i still can’t quite believe that I could possibly
    be one of those studying the important points found on your website.
    My family and I are sincerely thankful for your generosity and for
    offering me the opportunity to pursue this chosen profession path.

    Appreciate your sharing the important information I obtained from your web site.

    Also visit my blog post :: foroagua.com

  76. I love your blog.. very nice colors & theme.
    Did you make this website yourself or did you hire
    someone to do it for you? Plz reply as I’m looking
    to construct my own blog and would like to know
    where u got this from. thank you

    Stop by my site – kebe.top

  79. Hello there, just became alert to your blog through
    Google, and found that it’s really informative. I?m going to watch out for brussels.
    I?ll appreciate if you continue this in future. A lot of people will be benefited
    from your writing. Cheers!

    Visit my website – duna-anapa.net.ru

  82. I’m really inspired with your writing skills as well as with the structure on your blog.
    Is this a paid subject matter or did you customize it yourself?
    Anyway keep up the excellent high quality writing, it is rare to peer
    a great weblog like this one today.

    Here is my homepage: shihan.com.ru

  86. Hey there! This is kind of off topic but I need some help from an established blog.
    Is it difficult to set up your own blog? I’m not very techincal but I
    can figure things out pretty quick. I’m thinking about setting up my own but I’m not sure where to start.
    Do you have any points or suggestions? Thanks

    My web page – Rosita

  89. Thanks for another fantastic article. The place else may
    just anyone get that kind of information in such a perfect means of writing?
    I have a presentation subsequent week, and I
    am on the search for such info.

    My site; Charis

  93. I think everything published made a bunch of sense.

    However, what about this? suppose you added a little content?
    I mean, I don’t wish to tell you how to run your website, but what if you added something that
    grabbed people’s attention? I mean 5 accessibility tools to check your design’s contrast ratio – Pavvy Designs is
    kinda boring. You should glance at Yahoo’s home page and see how they write article titles to get viewers to open the links.
    You might add a video or a related picture or
    two to get people interested about what you’ve got to say.

    In my opinion, it could bring your blog a little
    livelier.

    Here is my webpage; http://myweddinglight.us/index.php?action=profile;u=58310

  94. Good blog you have here.. It’s difficult to find excellent
    writing like yours these days. I seriously appreciate people like you!
    Take care!!

    Here is my blog – kebe.top

  95. I have been browsing online more than 2 hours today, yet I never found any interesting article like yours.
    It is pretty worth enough for me. In my opinion, if all web owners and bloggers
    made good content as you did, the web will be a lot more useful than ever before.

    Here is my webpage; tsw1.home.pl

  96. What i don’t realize is in truth how you are not actually much
    more smartly-preferred than you may be now. You are so intelligent.
    You already know therefore considerably relating
    to this subject, produced me personally believe it from so many various angles.

    Its like women and men aren’t fascinated except it’s
    something to accomplish with Woman gaga! Your personal stuffs nice.
    Always maintain it up!

    My page: bbs.yunweishidai.com

  97. Thanks a lot for sharing this with all people you actually
    understand what you’re speaking approximately!

    Bookmarked. Please additionally visit my website =).
    We will have a hyperlink change arrangement among us!

    Here is my web blog clubriders.men

  99. Fantastic blog you have here but I was curious about if you knew of any community
    forums that cover the same topics discussed here?
    I’d really love to be a part of online community where I can get suggestions from other knowledgeable people that
    share the same interest. If you have any suggestions, please let
    me know. Kudos!

    Also visit my blog post … Esther

  101. I’m really loving the theme/design of your web site.
    Do you ever run into any web browser compatibility problems?
    A number of my blog readers have complained about my website not operating correctly in Explorer but looks great in Chrome.
    Do you have any advice to help fix this problem?

    Also visit my blog post :: http://shihan.com.ru/

  107. This is the perfect web site for anyone who wishes to understand this topic.
    You know a whole lot its almost tough to argue with
    you (not that I really would want to…HaHa). You certainly put a fresh spin on a subject that’s been written about
    for many years. Great stuff, just great!

    Feel free to visit my web-site – mpc-install.com

  109. Excellent post. I was checking continuously this blog
    and I’m inspired! Extremely useful info particularly the closing section :
    ) I deal with such information much. I used to be looking for this
    particular info for a long time. Thanks and best of luck.

    My web site mtasa-forum.com

  113. Do you mind if I quote a few of your posts as long as I provide credit and sources back to your weblog?
    My blog is in the very same area of interest as yours and my
    visitors would definitely benefit from a lot of the
    information you present here. Please let me know if this alright with you.

    Thanks!

    Review my web site; pansionat.com.ru

  114. Do you mind if I quote a few of your articles as long as I provide
    credit and sources back to your weblog? My website is in the exact same niche as yours and my users would really benefit
    from some of the information you provide here.
    Please let me know if this alright with you. Regards!

    Look at my web site; http://www.anapapansion.ru

  116. Hi there, I discovered your website by way of Google at the same time as looking for a comparable subject,
    your web site got here up, it appears to be like great.

    I’ve bookmarked it in my google bookmarks.[X-N-E-W-L-I-N-S-P-I-N-X]Hi
    there, just become alert to your weblog through Google, and found that it is truly informative.
    I’m gonna be careful for brussels. I will be grateful should you continue this in future.
    Numerous folks shall be benefited from your writing. Cheers!

    Here is my web site lovegamematch.com

  125. Do you mind if I quote a few of your articles as long as I provide credit and sources
    back to your website? My website is in the exact same area of interest as yours and my visitors would genuinely benefit from some of the information you provide here.
    Please let me know if this ok with you. Thank you!

    Feel free to visit my site – chengdian.cc

  145. I’m amazed, I must say. Seldom do I encounter a blog that’s both
    equally educative and engaging, and let me tell you, you have hit the nail on the
    head. The issue is something too few folks are speaking intelligently about.
    I am very happy I came across this in my search for something relating to this.

    Feel free to surf to my blog Instant Keto Pills

  151. My husband and i got now more than happy when Peter managed to do his survey from the precious recommendations
    he acquired through your site. It’s not at
    all simplistic to simply continually be offering tactics which often many people may have been selling.
    And we also fully grasp we need the website owner to thank
    for this. The most important explanations you made, the simple blog navigation, the friendships you will
    make it possible to foster – it is all impressive,
    and it’s really letting our son and us consider that the issue is awesome, which is certainly seriously pressing.

    Thanks for the whole lot!

    my page – chengdian.cc

  152. Hi would you mind sharing which blog platform you’re using?
    I’m going to start my own blog in the near future but I’m having a
    tough time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most blogs and I’m looking for something completely unique.
    P.S Apologies for being off-topic but I had to ask!

    My web blog: http://duna-anapa.net.ru

  153. Hiya, I am really glad I have found this information. Nowadays bloggers publish only about gossips
    and net and this is really frustrating. A good blog with exciting content, this is what I need.
    Thank you for keeping this site, I’ll be visiting it.
    Do you do newsletters? Can not find it.

    My webpage Eagle Hemp CBD Gummies

  154. I write a leave a response each time I especially enjoy
    a post on a site or I have something to add to the conversation. It’s caused
    by the passion displayed in the post I looked at. And after
    this post 5 accessibility tools to check your design’s contrast ratio – Pavvy Designs.
    I was excited enough to write a thought
    😉 I do have some questions for you if it’s okay.
    Could it be only me or do a few of the comments appear as if they are left by brain dead
    individuals? 😛 And, if you are writing
    at additional online social sites, I’d like to keep up with anything fresh you have
    to post. Could you list every one of your shared sites like your linkedin profile,
    Facebook page or twitter feed?

    Look into my website – Skyline Drone X Review

  156. Unquestionably believe that which you said. Your favorite justification seemed to be on the web the easiest thing to be aware of.
    I say to you, I certainly get irked while people consider worries that they plainly do not know about.
    You managed to hit the nail upon the top and also defined out the whole
    thing without having side-effects , people can take a signal.
    Will probably be back to get more. Thanks

    my page; Tri-Bol

  157. Hmm it seems like your blog ate my first comment
    (it was super long) so I guess I’ll just sum it up what
    I submitted and say, I’m thoroughly enjoying your blog.
    I as well am an aspiring blog writer but I’m still new to
    the whole thing. Do you have any points for beginner blog writers?
    I’d genuinely appreciate it.

    Also visit my webpage – VitaSilkLux

  160. I and also my pals were actually following the great tips
    located on your web site and then the sudden developed a terrible suspicion I never thanked you
    for those tips. All of the young boys ended up glad to learn all of
    them and now have extremely been having fun with those things.
    Thanks for genuinely well helpful and then for obtaining
    these kinds of fantastic areas millions of individuals are really needing to discover.
    My very own sincere apologies for not expressing
    gratitude to you sooner.

    Feel free to surf to my homepage: Muama Ryoko

  161. Great goods from you, man. I’ve understand your stuff previous
    to and you’re just too fantastic. I actually like what you have acquired here, certainly like what you are stating and the way in which you say it.
    You make it enjoyable and you still care for to keep it wise.
    I cant wait to read much more from you. This is really
    a terrific website.

    my web-site: Ultra Cut Keto

  167. Hello, i read your blog from time to time and i own a similar
    one and i was just curious if you get a lot of spam comments?
    If so how do you prevent it, any plugin or anything you can recommend?
    I get so much lately it’s driving me crazy so any assistance is very much appreciated.

  168. Nice weblog right here! Additionally your web site rather a lot up fast!
    What web host are you using? Can I get your associate link to your host?
    I desire my website loaded up as fast as yours lol

  171. hey there and thank you for your information – I’ve certainly picked up something new
    from right here. I did however expertise a few technical points
    using this web site, as I experienced to reload
    the website many times previous to I could
    get it to load properly. I had been wondering if your hosting is OK?
    Not that I am complaining, but sluggish loading instances times will
    sometimes affect your placement in google and could damage your high
    quality score if ads and marketing with Adwords. Well I’m adding this RSS to my email and could look out for a lot more of your respective interesting
    content. Make sure you update this again very soon. https://george4023.tumblr.com/

  174. naturally like your web-site but you have to test the
    spelling on several of your posts. A number of them are rife
    with spelling issues and I find it very troublesome
    to tell the reality however I will certainly come back again.

  179. Fantastic site you have here but I was curious about if you knew of
    any forums that cover the same topics talked about in this article?

    I’d really like to be a part of community where I
    can get feedback from other experienced people that
    share the same interest. If you have any recommendations,
    please let me know. Cheers!

  181. Excellent blog! Do you have any tips for aspiring writers?
    I’m hoping to start my own website soon but I’m a little lost on everything.

    Would you advise starting with a free platform like WordPress or go for a paid
    option? There are so many choices out there that I’m completely overwhelmed ..
    Any suggestions? Thank you!

  182. I know this if off topic but I’m looking into starting my own blog
    and was wondering what all is needed to get set up? I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very web savvy so I’m not 100% sure. Any recommendations
    or advice would be greatly appreciated. Cheers

    Feel free to surf to my web site; Benjamin

  189. This design is spectacular! You definitely know how to keep
    a reader amused. Between your wit and your videos, I was almost
    moved to start my own blog (well, almost…HaHa!) Wonderful job.
    I really loved what you had to say, and more than that,
    how you presented it. Too cool! scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  190. It’s a pity you don’t have a donate button! I’d certainly donate to
    this excellent blog! I suppose for now i’ll settle for bookmarking and adding your RSS feed to my
    Google account. I look forward to brand new updates and will share this site with my Facebook group.
    Talk soon! ps4 games https://j.mp/3z5HwTp ps4 games

  194. We would like to thank you just as before for the beautiful ideas you offered Jesse when preparing her post-graduate research as well as, most importantly, regarding providing all the ideas in one blog post.

    Provided we had been aware of your web page a year ago, we may have been saved the unwanted
    measures we were implementing. Thank you very much.

    Feel free to surf to my web-site; Tacoma Farms CBD Oil

  198. Hey are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you
    need any coding knowledge to make your own blog? Any help would be really appreciated!

    My web blog Dillon

  200. Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I get in fact enjoyed account your blog posts.
    Any way I will be subscribing to your feeds
    and even I achievement you access consistently rapidly.

    My web site :: various cannabis

  207. Hello there, just became aware of your blog through Google,
    and found that it’s really informative. I am going to watch out for brussels.
    I’ll appreciate if you continue this in future. A lot of people will
    be benefited from your writing. Cheers!

    My webpage http://www.comptine.biz

  211. Hello, i read your blog from time to time and i own a similar one and
    i was just curious if you get a lot of spam comments?
    If so how do you protect against it, any plugin or anything
    you can recommend? I get so much lately it’s driving me mad so any help
    is very much appreciated.

    My page; wrinkle skin

  212. I’d like to thank you for the efforts you’ve put in writing this site.
    I’m hoping to check out the same high-grade content from you in the future as well.
    In fact, your creative writing abilities has inspired me to
    get my very own site now 😉

    my homepage … ketogenic diet

  216. Thank you, I have just been searching for information approximately this topic for a long time and yours is
    the greatest I have found out till now. However, what in regards to
    the conclusion? Are you certain in regards to the source?

    My web page; Lori

  217. Pingback: healthy keto snacks
  218. Pingback: eharmony gay dating

Leave a Reply

Your email address will not be published.