{"id":24348,"date":"2021-04-20T09:11:22","date_gmt":"2021-04-20T16:11:22","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=24348"},"modified":"2023-04-21T06:26:15","modified_gmt":"2023-04-21T13:26:15","slug":"evaluate-design-color-contrast","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/","title":{"rendered":"Best Ways to Evaluate Your Design for Color Contrast"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3-1024x512.png\" alt=\"Improve Your Product Design and Development Model \" class=\"wp-image-24349\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Using a color contrast checker can make your designs more attractive and accessible to people with vision problems. Worldwide, about<a href=\"https:\/\/www.colourblindawareness.org\/colour-blindness\/\" target=\"_blank\" rel=\"noreferrer noopener\"> 300 million people<\/a> have colorblindness. About<a href=\"https:\/\/www.who.int\/news-room\/fact-sheets\/detail\/blindness-and-visual-impairment\" target=\"_blank\" rel=\"noreferrer noopener\"> 2.2 billion people<\/a> have vision issues that could make it difficult for them to use your digital products.<\/p>\n\n\n\n<p>Understanding the positive and negative effects of some color combinations will put you on the path to reaching more people with your web and app designs.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-use-color-contrast-in-product-ui\"><strong>Why use color contrast in product UI<\/strong>?<\/h2>\n\n\n\n<p>A color contrast checker can make your digital products better in at least two important ways.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-follow-wcag-2-guidelines-to-make-products-more-accessible\"><strong>Follow WCAG 2 guidelines to make products more accessible<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"noreferrer noopener\">WCAG 2.1<\/a> (web content accessibility guidelines) and<a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-mult-loc.html\" target=\"_blank\" rel=\"noreferrer noopener\"> Success Criterion<\/a> set rules you can follow to make your products more accessible to people with a broad range of vision impairments.<\/p>\n\n\n\n<p>Using a background color that blends in with text color can make it impossible for some people to use your products. Colorblind people might also have difficulty seeing text and images when you select a color that they do not perceive as the larger population does.<\/p>\n\n\n\n<p>Something as simple as picking a different color can help people recognize:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>User interface components<\/li>\n\n\n\n<li>Web page content<\/li>\n\n\n\n<li>Navigational menus<\/li>\n\n\n\n<li>Logos<\/li>\n<\/ul>\n\n\n\n<p>A color picker that considers accessibility makes it much easier for you to create designs that more people can use. You can check your designs in our built-in <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features\/#color-blindness-simulator\" target=\"_blank\" rel=\"noreferrer noopener\">color blindness simulator<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features\/#contrast-checker\" target=\"_blank\" rel=\"noreferrer noopener\">contrast checker<\/a> that comply with all the WCAG 2 guidelines.&nbsp;<\/p>\n\n\n\n<p>You can learn more about the topic by reading<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/accessibility-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Things every designer needs to know about accessibility<\/a>. It explains some of the ways you can help users by using large text and other features.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-reach-a-broader-audience-with-color-contrast\"><strong>Reach a broader audience with color contrast<\/strong><\/h3>\n\n\n\n<p>When you make your designs more accessible, more people can use your products. Ethically, you want to include as many people as possible because everyone deserves to enjoy using the same products. Financially, you want to include more people because it helps grow your business\u2019s revenue.<\/p>\n\n\n\n<p>Using color contrast attracts more users, which can lead to higher advertising revenues and more sales. It makes sense from ethical and business perspectives.<\/p>\n\n\n\n<p><em>Recommended reading:<\/em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/new-e-book-web-ui-design-human-eye-colors-space-contrast\/\" target=\"_blank\" rel=\"noreferrer noopener\"> New e-book: Web UI Design for the Human Eye (Colors, Space, Contrast)<\/a><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-know-the-three-wcag-levels\"><strong>Know the three WCAG levels<\/strong><\/h2>\n\n\n\n<p>WCAG has<a href=\"https:\/\/www.wuhcag.com\/wcag-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\"> three levels<\/a>. Aim to reach the highest level so you can make your designs as accessible as possible.<\/p>\n\n\n\n<p>The following explanations only cover vision-based accessibility. You will need to think about other features before you can reach people with other accessibility restrictions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-level-a-beginner\"><strong>Level A (Beginner)<\/strong><\/h3>\n\n\n\n<p>The presentation doesn\u2019t rely exclusively on color.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-level-aa-intermediate\"><strong>Level AA (Intermediate)<\/strong><\/h3>\n\n\n\n<p>The color contrast ratio between the text and background color is at least 4.5 to 1.<\/p>\n\n\n\n<p>The color contrast ratio between user interface components, graphics, and nearby colors is at least 3 to 1.<\/p>\n\n\n\n<p>Text can double in size without losing function or context.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-level-aaa-advanced\"><strong>Level AAA (Advanced)<\/strong><\/h3>\n\n\n\n<p>The color contrast ratio between your text and background is at least 7 to 1.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-color-contrast-checker-tools-to-explore\"><strong>Color contrast checker tools to explore<\/strong><\/h2>\n\n\n\n<p>If you don\u2019t have any visual impairments that prevent you from distinguishing colors, you probably can\u2019t identify whether you reach the minimum contrast unless you use a color contrast checker. The following tools can help you choose colors that improve accessibility for more people.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-colour-contrast-analyser-cca\"><strong>Colour Contrast Analyser (CCA)<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noreferrer noopener\">Colour Contrast Analyser<\/a> is a free tool that you can download to your computer. Enter the hex code, CSS color format, or use the color picker tool to get your contrast ratio and determine whether you pass AA or AAA standards.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-built-in-contrast-checker\"><strong>Built-In Contrast Checker&nbsp;<\/strong><\/h3>\n\n\n\n<p>See if your design tool has <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features\/#contrast-checker\" target=\"_blank\" rel=\"noreferrer noopener\">a built-in contrast checker<\/a> to make it easier for you to evaluate the colors you used. At UXPin, you don\u2019t need to search for plugins that will help you with that as it\u2019s already there, in the editor.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-colour-contrast-check\"><strong>Colour Contrast Check<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/snook.ca\/technical\/colour_contrast\/colour.html#fg=33FF33,bg=333333\" target=\"_blank\" rel=\"noreferrer noopener\">Colour Contrast Check<\/a> makes it easy for you to know whether your design is WCAG 2 AA or WCAG AAA compliant. Enter the hex value of your background and foreground colors. The results will give your contrast ratio and a simple \u201cyes\u201d or \u201cno\u201d regarding compliance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accessible-color-generator\"><strong>Accessible Color Generator<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/learnui.design\/tools\/accessible-color-generator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Accessible Color Generator<\/a> lets you enter a color by hex code or a color palette. It will analyze your color and give you a contrasting color that meets AA or AAA guidelines for small, large, or normal text sizes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-color-laboratory\"><strong>Color Laboratory<\/strong><\/h3>\n\n\n\n<p>The<a href=\"http:\/\/colorlab.wickline.org\/colorblind\/colorlab\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Color Laboratory<\/a> tool lets you choose colors to see how they look next to each other. It will also augment the colors you select so you can see them the way someone with colorblindness would. It can give you quite a bit of insight into how colorblind people experience your products.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-color-safe\"><strong>Color Safe<\/strong><\/h3>\n\n\n\n<p><a href=\"http:\/\/colorsafe.co\/\" target=\"_blank\" rel=\"noreferrer noopener\">Color Safe<\/a> generates color palettes based on WCAG guidelines. Choose a color, your text size, and font family to get a color palette that complies with WCAG standards.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-apca-contrast-calculator\"><strong>APCA Contrast Calculator<\/strong><\/h3>\n\n\n\n<p>The<a href=\"https:\/\/www.myndex.com\/APCA\/\" target=\"_blank\" rel=\"noreferrer noopener\"> APCA Contrast Calculator<\/a> is a tool that stands out for giving you a simple and full font matrix version of its tool. If you just want to know whether your text size and color contrasts meet APCA standards, you can use the simple version. If you want to include more variables, try the full font matrix version.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ensure-proper-color-contrast-with-uxpin\"><strong>Ensure proper color contrast with UXPin&nbsp;<\/strong><\/h2>\n\n\n\n<p>UXPin lets you<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/mirror-app-mobile-prototypes\/\" target=\"_blank\" rel=\"noreferrer noopener\"> make prototypes<\/a> that look and perform just like your final product. That way, you don\u2019t have to worry about your color contrast changing between the prototyping and product release stages.<\/p>\n\n\n\n<p>Try our 14-day trial to use the editor with a built-in contract checker and so much more! <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up here<\/a>. No credit card required!\u00a0<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Using a color contrast checker can make your designs more attractive and accessible to people with vision problems. Worldwide, about 300 million people have colorblindness. About 2.2 billion people have vision issues that could make it difficult for them to use your digital products. Understanding the positive and negative effects of some color combinations will<\/p>\n","protected":false},"author":3,"featured_media":24349,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[262,371,372,266],"class_list":["post-24348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-accessibility","tag-color-contrast","tag-contrast-checker","tag-web-content-accessibility-guidelines"],"yoast_title":"","yoast_metadesc":"A color contrast checker can make your designs easier for people with vision problems to use. Do you know which tools work best?","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Best Ways to Evaluate Your Design for Color Contrast | UXPin<\/title>\n<meta name=\"description\" content=\"A color contrast checker can make your designs easier for people with vision problems to use. Do you know which tools work best?\" \/>\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.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Ways to Evaluate Your Design for Color Contrast\" \/>\n<meta property=\"og:description\" content=\"A color contrast checker can make your designs easier for people with vision problems to use. Do you know which tools work best?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-20T16:11:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-21T13:26:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Best Ways to Evaluate Your Design for Color Contrast\",\"datePublished\":\"2021-04-20T16:11:22+00:00\",\"dateModified\":\"2023-04-21T13:26:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/\"},\"wordCount\":938,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png\",\"keywords\":[\"accessibility\",\"color contrast\",\"contrast checker\",\"Web Content Accessibility Guidelines\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/\",\"name\":\"Best Ways to Evaluate Your Design for Color Contrast | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png\",\"datePublished\":\"2021-04-20T16:11:22+00:00\",\"dateModified\":\"2023-04-21T13:26:15+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"A color contrast checker can make your designs easier for people with vision problems to use. Do you know which tools work best?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png\",\"width\":1200,\"height\":600,\"caption\":\"How to Improve Your Product Design and Development Model copy 3\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/evaluate-design-color-contrast\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best Ways to Evaluate Your Design for Color Contrast\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Ways to Evaluate Your Design for Color Contrast | UXPin","description":"A color contrast checker can make your designs easier for people with vision problems to use. Do you know which tools work best?","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.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/","og_locale":"en_US","og_type":"article","og_title":"Best Ways to Evaluate Your Design for Color Contrast","og_description":"A color contrast checker can make your designs easier for people with vision problems to use. Do you know which tools work best?","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/","og_site_name":"Studio by UXPin","article_published_time":"2021-04-20T16:11:22+00:00","article_modified_time":"2023-04-21T13:26:15+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Best Ways to Evaluate Your Design for Color Contrast","datePublished":"2021-04-20T16:11:22+00:00","dateModified":"2023-04-21T13:26:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/"},"wordCount":938,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png","keywords":["accessibility","color contrast","contrast checker","Web Content Accessibility Guidelines"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/","name":"Best Ways to Evaluate Your Design for Color Contrast | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png","datePublished":"2021-04-20T16:11:22+00:00","dateModified":"2023-04-21T13:26:15+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"A color contrast checker can make your designs easier for people with vision problems to use. Do you know which tools work best?","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/04\/How-to-Improve-Your-Product-Design-and-Development-Model-copy-3.png","width":1200,"height":600,"caption":"How to Improve Your Product Design and Development Model copy 3"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Best Ways to Evaluate Your Design for Color Contrast"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=24348"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24348\/revisions"}],"predecessor-version":[{"id":44468,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24348\/revisions\/44468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/24349"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=24348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=24348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=24348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}