<\/p>\n There are loads of microsites and developer tools for looking at color accessibility, including tools built right into browser DevTools. They often show you if a color passes AA or AAA WCAG guidelines. But color contrast is more complicated than that because there is a wide variety of vision impairments. This site from Corey Ginnivan […]<\/p>\n","protected":false},"author":3,"featured_media":299822,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[466,1431],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/whocanuse.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":288170,"url":"https:\/\/css-tricks.com\/color-contrast-accessibility-tools\/","url_meta":{"origin":299781,"position":0},"title":"Color contrast accessibility tools","date":"May 28, 2019","format":false,"excerpt":"Accessibility is all the rage these days, specifically when it comes to color contrast. I\u2019ve stumbled upon a couple of tools this week that I think are pretty nifty for helping make sure that all of the text on our websites is legible regardless of what background color they might\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/color-palette.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":261774,"url":"https:\/\/css-tricks.com\/advocating-for-accessible-ui-design\/","url_meta":{"origin":299781,"position":1},"title":"Advocating for Accessible UI Design","date":"November 21, 2017","format":false,"excerpt":"Accessibility is a hot topic these days, and the older we web-makers get, the hotter it's going to become! That might be a snarky outlook, but what I'm trying to say is that it's about time we start designing the web for everyone because the web was meant to be\u2026","rel":"","context":"In "Article"","img":{"alt_text":"Side-by-side example of typography improvements for accessibility.","src":"https:\/\/i0.wp.com\/notlaura.com\/wp-content\/uploads\/2017\/10\/typography-improvements-1200x408.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":303361,"url":"https:\/\/css-tricks.com\/understanding-web-accessibility-color-contrast-guidelines-and-ratios\/","url_meta":{"origin":299781,"position":2},"title":"Understanding Web Accessibility Color Contrast Guidelines and Ratios","date":"February 19, 2020","format":false,"excerpt":"What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you\u2019re able to read content throughout the site, but to someone else, it might be a totally different experience. How can put yourself in that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/contrast-checker.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":256,"url":"https:\/\/css-tricks.com\/accessibility-basics-testing-your-page-for-color-blindness\/","url_meta":{"origin":299781,"position":3},"title":"Accessibility Basics: Testing Your Page For Color Blindness","date":"October 30, 2007","format":false,"excerpt":"By some estimates, up to 10% of the male population of the world suffers from some form of color blindness. The most common being Protanopia, or Red-Green color blindness, the inability to distinguish between red and green hues. There is also Blue-Yellow color blindness and Total Color blindness. Good web\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":279771,"url":"https:\/\/css-tricks.com\/re-pleasing-color-palettes\/","url_meta":{"origin":299781,"position":4},"title":"Re: Pleasing Color Palettes","date":"January 11, 2019","format":false,"excerpt":"There are so many tools out there to help you pick colors. I totally get it! It's hard! When colors are done well, it's like magic. It adds a level of polish to a design that can really set it apart. Let's look at some, then talk about this idea\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/color-palette.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297433,"url":"https:\/\/css-tricks.com\/designing-accessible-color-systems\/","url_meta":{"origin":299781,"position":5},"title":"Designing accessible color systems","date":"October 21, 2019","format":false,"excerpt":"The team at Stripe explores how they\u2019re refining their color palette to make it more accessible and legible for users across all their products and interfaces. Not only that but the team built a wonderful and yet entirely bonkers app for figuring out the ideal range of colors that they\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/stripe-accessible-colors.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299781"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=299781"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299781\/revisions"}],"predecessor-version":[{"id":299899,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299781\/revisions\/299899"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/299822"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=299781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=299781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=299781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/Screen-Shot-2019-11-30-at-2.42.09-PM.png?ssl=1\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"