{"id":37624,"date":"2017-08-09T21:01:26","date_gmt":"2017-08-09T13:01:26","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37624"},"modified":"2017-12-08T19:00:53","modified_gmt":"2017-12-08T11:00:53","slug":"colorsafe-wcag-compliant-color-picker","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/","title":{"rendered":"Color Safe is The WCAG-Compliant Color Picking Tool Designers Need"},"content":{"rendered":"

Web designers are constantly pushing towards more accessibility<\/a><\/strong>. This means increased support on the web for hearing & vision impairments<\/strong>, which can include problems reading high-contrast websites.<\/p>\n

The Color Safe<\/a><\/strong> web app is perfect for finding just the right colors that fit exactly what you need. It\u2019s a free web app that gauges the quality of the contrast ratio of your text<\/strong>, based on the background color, the font size, and the font family.<\/p>\n

Read Also:<\/strong> Using High Colour Contrast For More Accessible Design<\/a><\/p>\n

It\u2019s a very interactive web app, so it\u2019s not just another color scheme generator<\/a><\/strong>.<\/p>\n

First, you enter a background color<\/strong> and pick the font<\/strong> you are using. This doesn\u2019t have to be an exact match but you should try to get the size and placement right. Try to match your page\u2019s body content rather than headers<\/strong>.<\/p>\n

Once you click \u201cOK\u201d, you\u2019ll get a brand new screen full of color recommendations<\/strong>. You can browse through color choices that best match your chosen background to find text colors with high readability ratios<\/strong>.<\/p>\n

The WCAG has very strict color contrast ratio requirements<\/strong> to get a passing grade (either AA or AAA). This rating is based on a specific ratio<\/strong>, calculated by the hex codes and the dissonance to each other.<\/p>\n

For example, a bright green font on a bright red background is a great way to fail the WCAG rating. That\u2019s why this tool is so valuable.<\/p>\n

\"Color<\/figure>\n

Instead of randomly picking colors in Photoshop, you can select from predefined color choices<\/strong> tailored to suit your background. This ensures a high readability ratio and a smooth experience for all users.<\/p>\n

We did a huge post on color contrast for accessibility<\/a><\/strong>, so definitely check that out if you\u2019d like to learn more. And, if you\u2019re stuck finding a great color combo for your website visit Color Safe<\/a> and give it a shot. It will definitely help you find a color scheme that works<\/strong>.<\/p>\n

Read Also:<\/strong> How to Design For People With Accessibility Needs<\/a><\/p>","protected":false},"excerpt":{"rendered":"

Web designers are constantly pushing towards more accessibility. This means increased support on the web for hearing & vision impairments, which can include problems reading high-contrast websites. The Color Safe web app is perfect for finding just the right colors that fit exactly what you need. It\u2019s a free web app that gauges the quality…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[1833,510],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nColor Safe: WCAG-Compliant Color Picking Tool<\/title>\n<meta name=\"description\" content=\"Web designers are constantly pushing towards more accessibility. This means increased support on the web for hearing & vision impairments, which can\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color Safe is The WCAG-Compliant Color Picking Tool Designers Need\" \/>\n<meta property=\"og:description\" content=\"Web designers are constantly pushing towards more accessibility. This means increased support on the web for hearing & vision impairments, which can\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-09T13:01:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-08T11:00:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/colorsafe-wcag-compliant-color-picker\/02-colorsafe-picker-palette.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Color Safe is The WCAG-Compliant Color Picking Tool Designers Need\",\"datePublished\":\"2017-08-09T13:01:26+00:00\",\"dateModified\":\"2017-12-08T11:00:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/\"},\"wordCount\":342,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/colorsafe-wcag-compliant-color-picker\\\/02-colorsafe-picker-palette.jpg\",\"keywords\":[\"Color Tools\",\"Web Designers\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/\",\"name\":\"Color Safe: WCAG-Compliant Color Picking Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/colorsafe-wcag-compliant-color-picker\\\/02-colorsafe-picker-palette.jpg\",\"datePublished\":\"2017-08-09T13:01:26+00:00\",\"dateModified\":\"2017-12-08T11:00:53+00:00\",\"description\":\"Web designers are constantly pushing towards more accessibility. This means increased support on the web for hearing & vision impairments, which can\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/colorsafe-wcag-compliant-color-picker\\\/02-colorsafe-picker-palette.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/colorsafe-wcag-compliant-color-picker\\\/02-colorsafe-picker-palette.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/colorsafe-wcag-compliant-color-picker\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Color Safe is The WCAG-Compliant Color Picking Tool Designers Need\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Color Safe: WCAG-Compliant Color Picking Tool","description":"Web designers are constantly pushing towards more accessibility. This means increased support on the web for hearing & vision impairments, which can","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/","og_locale":"en_US","og_type":"article","og_title":"Color Safe is The WCAG-Compliant Color Picking Tool Designers Need","og_description":"Web designers are constantly pushing towards more accessibility. This means increased support on the web for hearing & vision impairments, which can","og_url":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-08-09T13:01:26+00:00","article_modified_time":"2017-12-08T11:00:53+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/colorsafe-wcag-compliant-color-picker\/02-colorsafe-picker-palette.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Color Safe is The WCAG-Compliant Color Picking Tool Designers Need","datePublished":"2017-08-09T13:01:26+00:00","dateModified":"2017-12-08T11:00:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/"},"wordCount":342,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/colorsafe-wcag-compliant-color-picker\/02-colorsafe-picker-palette.jpg","keywords":["Color Tools","Web Designers"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/","url":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/","name":"Color Safe: WCAG-Compliant Color Picking Tool","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/colorsafe-wcag-compliant-color-picker\/02-colorsafe-picker-palette.jpg","datePublished":"2017-08-09T13:01:26+00:00","dateModified":"2017-12-08T11:00:53+00:00","description":"Web designers are constantly pushing towards more accessibility. This means increased support on the web for hearing & vision impairments, which can","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/colorsafe-wcag-compliant-color-picker\/02-colorsafe-picker-palette.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/colorsafe-wcag-compliant-color-picker\/02-colorsafe-picker-palette.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/colorsafe-wcag-compliant-color-picker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Color Safe is The WCAG-Compliant Color Picking Tool Designers Need"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9MQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=37624"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37624\/revisions"}],"predecessor-version":[{"id":42118,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37624\/revisions\/42118"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=37624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=37624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=37624"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=37624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}