{"id":7146,"date":"2026-11-05T05:10:41","date_gmt":"2026-11-05T05:10:41","guid":{"rendered":"https:\/\/www.originux.com\/resources\/?p=7146"},"modified":"2026-11-05T05:10:43","modified_gmt":"2026-11-05T05:10:43","slug":"accessible-color-palettes-how-to-build-and-test-them-for-ui","status":"publish","type":"post","link":"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/","title":{"rendered":"Accessible Color Palettes: How to Build and Test Them for UI"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#What_Is_an_Accessible_Color_Palette\" >What Is an Accessible Color Palette?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Why_It_Matters\" >Why It Matters<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#The_Numbers_to_Know\" >The Numbers to Know<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Step_1_Start_With_Your_Brand_Colors\" >Step 1: Start With Your Brand Colors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Step_2_Build_a_Scale_for_Each_Color\" >Step 2: Build a Scale for Each Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Step_3_Give_Colors_Roles\" >Step 3: Give Colors Roles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Step_4_Test_Every_Pair\" >Step 4: Test Every Pair<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Step_5_Do_Not_Rely_on_Color_Alone\" >Step 5: Do Not Rely on Color Alone<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Step_6_Plan_for_Dark_Mode\" >Step 6: Plan for Dark Mode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Step_7_Build_Palettes_for_Data\" >Step 7: Build Palettes for Data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Step_8_Put_the_Palette_Into_Your_System\" >Step 8: Put the Palette Into Your System<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Example_A_Simple_Accessible_Palette_Structure\" >Example: A Simple Accessible Palette Structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Tools_That_Help\" >Tools That Help<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Test_With_Real_People\" >Test With Real People<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Common_Mistakes_to_Avoid\" >Common Mistakes to Avoid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#Final_Thoughts\" >Final Thoughts<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">A team picks a bright brand palette. It looks great in the pitch deck. Then the product ships. Yellow buttons carry white text. Light gray labels sit on white cards. Error and success states look the same to color-blind users. The palette was pretty, but it was not built to be used. An accessible color palette is chosen and tested for real use from the start. This guide shows how to build one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_an_Accessible_Color_Palette\"><\/span>What Is an Accessible Color Palette?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An accessible color palette is a set of colors that people with different vision can read and use. Every approved text and background pairing meets contrast rules. Meaning never depends on color alone. The palette also holds up in different themes and on different screens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is not a boring palette. Many bold, bright brands have accessible palettes. The difference is that each color has a clear job and a tested pairing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_It_Matters\"><\/span>Why It Matters<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Many more people have low vision, tired eyes, or a dim screen in bright sun. A weak palette hurts all of them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It also saves time. Teams that test colors once, at the palette stage, avoid fixing the same issue on every screen. Strong palettes also support clear <a href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-visual-hierarchy-definition-and-best-practices\">visual hierarchy<\/a>, because contrast tells users what to look at first.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Numbers_to_Know\"><\/span>The Numbers to Know<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WCAG sets the minimum contrast ratios. Level AA is the usual target.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Normal text:<\/strong> at least 4.5 to 1.<\/li>\n\n\n\n<li><strong>Large text:<\/strong> at least 3 to 1. Large means about 24 pixels, or about 19 pixels when bold.<\/li>\n\n\n\n<li><strong>UI parts and meaningful graphics:<\/strong> at least 3 to 1. This covers input borders, icons, and focus rings.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A few handy reference points on a white background: black gives 21 to 1. A gray of <code>#595959<\/code> gives about 7 to 1. A gray of <code>#767676<\/code> just passes at 4.54 to 1. A gray of <code>#949494<\/code> gives about 3 to 1, so it fails for body text. Always check your exact values with a tool, since small shifts change the result.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Start_With_Your_Brand_Colors\"><\/span>Step 1: Start With Your Brand Colors<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">List your brand colors. Test each one against white and against black. Many brand colors fail as text. Bright yellow, orange, light green, and sky blue are common examples.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A failing brand color does not need to go. Use it for large shapes, backgrounds, and illustrations. Then pick a darker shade of the same hue for small text and thin icons. This keeps the brand look and still passes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Build_a_Scale_for_Each_Color\"><\/span>Step 2: Build a Scale for Each Color<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Do not pick one blue. Build a scale of tints and shades, often from 50 (very light) to 900 (very dark). Keep the same hue and shift only the lightness.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A scale gives you options. A light step can be a background. A mid step can be a button. A dark step can be text. Because every step is known, you can plan which pairs will pass before you design a single screen. Tools such as Leonardo, Material Theme Builder, and Stark can generate scales with contrast in mind.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Give_Colors_Roles\"><\/span>Step 3: Give Colors Roles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A palette needs roles, not just swatches. Common roles include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text:<\/strong> primary, secondary, and disabled.<\/li>\n\n\n\n<li><strong>Surface:<\/strong> page background, cards, and raised panels.<\/li>\n\n\n\n<li><strong>Primary action:<\/strong> buttons and links.<\/li>\n\n\n\n<li><strong>Secondary action:<\/strong> less important controls.<\/li>\n\n\n\n<li><strong>Border:<\/strong> dividers and input outlines.<\/li>\n\n\n\n<li><strong>Status:<\/strong> success, warning, error, and info.<\/li>\n\n\n\n<li><strong>Focus:<\/strong> the keyboard focus ring.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Write down which text role may sit on which surface role, and the ratio for each pair. This table is the heart of an accessible palette. Designers can then pick from approved pairs instead of guessing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Test_Every_Pair\"><\/span>Step 4: Test Every Pair<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Test each approved pair with a contrast checker. The WebAIM Contrast Checker is free and quick. Figma plugins such as Stark and Contrast check pairs right on the canvas. Browser dev tools also show ratios and flag failures.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Test more than the default state. Check hover, pressed, disabled, selected, and error states. Check text on tinted surfaces, since a card with a light blue fill changes the result. Check links against the surrounding body text too. Links that differ only by color need 3 to 1 against that text, plus another cue such as an underline.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Do_Not_Rely_on_Color_Alone\"><\/span>Step 5: Do Not Rely on Color Alone<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Contrast is not enough. People who cannot tell red from green need other cues.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pair color with something else:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add an icon and a text label to errors and success messages.<\/li>\n\n\n\n<li>Underline links.<\/li>\n\n\n\n<li>Mark required fields with text, not only a colored star.<\/li>\n\n\n\n<li>Use patterns or shapes in charts, not only different hues.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A quick check is to view your design in grayscale. If the meaning survives, you are in good shape. Color-blindness simulators in Figma, Chrome, and Stark help too.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_6_Plan_for_Dark_Mode\"><\/span>Step 6: Plan for Dark Mode<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A light palette does not simply flip into a dark one. Pure white on pure black can glare. Saturated colors that look fine on white can vibrate on dark surfaces.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Build the dark palette as its own set. Use dark gray surfaces instead of pure black. Use off-white text. Use lighter, softer versions of brand colors. Then test every pair again. If you name colors by role, such as \u201ctext-primary,\u201d each theme can map the role to its own tested value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_7_Build_Palettes_for_Data\"><\/span>Step 7: Build Palettes for Data<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Charts and dashboards need extra care. Many series must look different from each other, and each must stand out from the background.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Choose colors that vary in lightness, not only hue, so they stay distinct in grayscale. Keep a ratio of at least 3 to 1 between a graphic and its background. Add direct labels, patterns, or markers, so users do not need a legend to decode lines. For more guidance, see this article on creating clear and impactful <a href=\"https:\/\/www.originux.com\/resources\/blog\/discover-how-to-create-clear-and-impactful-data-visualisation-dashboards\">data visualisation dashboards<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_8_Put_the_Palette_Into_Your_System\"><\/span>Step 8: Put the Palette Into Your System<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A palette in a PDF gets ignored. Put it into your design system. Create color tokens with role names, such as \u201ccolor-text-primary\u201d and \u201ccolor-surface-raised.\u201d Document the approved pairs and ratios. Build components, such as buttons, inputs, and alerts, so they use only approved pairs in every state.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the system carries the rules, new screens start from safe choices. A <a href=\"https:\/\/www.originux.com\/services\/design-systems-component-libraries\">design systems and component library<\/a> service can help set this up across design and code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_A_Simple_Accessible_Palette_Structure\"><\/span>Example: A Simple Accessible Palette Structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a way to organize a small palette. Values are placeholders, so test your own.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Neutral scale:<\/strong> 50 to 900, from near-white to near-black. Use 900 for primary text and 700 for secondary text on light surfaces.<\/li>\n\n\n\n<li><strong>Primary scale:<\/strong> A brand blue from 50 to 900. Use a mid-dark step for buttons with white text, and test the pair.<\/li>\n\n\n\n<li><strong>Status colors:<\/strong> Green, amber, red, and blue, each with a dark text step, a mid icon step, and a light background step.<\/li>\n\n\n\n<li><strong>Focus color:<\/strong> One high-contrast color that works on both light and dark surfaces.<\/li>\n\n\n\n<li><strong>Dark theme:<\/strong> A mapped set of the same roles with new tested values.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Each role has a defined pairing, and each pairing has a recorded ratio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tools_That_Help\"><\/span>Tools That Help<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WebAIM Contrast Checker:<\/strong> Fast checks for two colors.<\/li>\n\n\n\n<li><strong>Stark and Contrast (plugins):<\/strong> Contrast and color-blindness checks inside design tools.<\/li>\n\n\n\n<li><strong>Leonardo:<\/strong> Generates color scales from target contrast ratios.<\/li>\n\n\n\n<li><strong>Adobe Color:<\/strong> Explores harmonies and has an accessibility mode.<\/li>\n\n\n\n<li><strong>Coolors:<\/strong> Builds palettes quickly, with a contrast checker.<\/li>\n\n\n\n<li><strong>Chrome DevTools:<\/strong> Shows contrast ratios on live elements.<\/li>\n\n\n\n<li><strong>axe DevTools and Lighthouse:<\/strong> Scan built pages for contrast failures.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Automated tools cannot judge text over photos or check every state, so keep manual checks in the process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Test_With_Real_People\"><\/span>Test With Real People<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tools tell you whether a pair passes. They do not tell you whether people can use the product. Test on different screens, at low brightness, and in bright light. Include users with low vision and color blindness in your sessions. A structured <a href=\"https:\/\/www.originux.com\/services\/usability-testing-feedback-loops\">usability testing and feedback loops<\/a> process helps you catch what the numbers miss.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Mistakes_to_Avoid\"><\/span>Common Mistakes to Avoid<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Picking colors by taste alone.<\/strong> Pretty pairs often fail.<\/li>\n\n\n\n<li><strong>Testing only black and white backgrounds.<\/strong> Real UIs use tints and layers.<\/li>\n\n\n\n<li><strong>Using brand colors as small text.<\/strong> Many fail contrast.<\/li>\n\n\n\n<li><strong>Checking only the default state.<\/strong> Hover, disabled, and error states slip through.<\/li>\n\n\n\n<li><strong>Using color as the only signal.<\/strong> Errors and charts become unreadable for some users.<\/li>\n\n\n\n<li><strong>Skipping dark mode testing.<\/strong> A pass in light mode can fail in dark.<\/li>\n\n\n\n<li><strong>Making palettes too large.<\/strong> Too many colors are hard to test and keep consistent.<\/li>\n\n\n\n<li><strong>Leaving the palette out of the system.<\/strong> Teams fall back to guesswork.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span>Final Thoughts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An accessible palette starts with tested scales, clear roles, and approved pairs. It adds non-color cues, a separate dark theme, and careful chart colors. Then it lives inside your design system, where every component uses it by default. Test with tools and with real users, and keep the rules documented. If you want a team that can build brand-true palettes that also pass accessibility checks, a <a href=\"https:\/\/www.originux.com\/\">UI UX design studio in Bangalore<\/a> can help.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A team picks a bright brand palette. It looks great in the pitch deck. Then the product ships. Yellow buttons carry white text. Light gray labels sit on white cards. Error and success states look the same to color-blind users. The palette was pretty, but it was not built to be used. An accessible color&hellip; <a class=\"more-link\" href=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/\">Continue reading <span class=\"screen-reader-text\">Accessible Color Palettes: How to Build and Test Them for UI<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7146","post","type-post","status-publish","format-standard","hentry","category-blog","entry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Accessible Color Palettes: How to Build and Test Them for UI<\/title>\n<meta name=\"description\" content=\"Learn how to build color palettes that pass WCAG contrast, work for color-blind users, and hold up in dark mode, with roles, scales, tools, and testing steps.\" \/>\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.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessible Color Palettes: How to Build and Test Them for UI\" \/>\n<meta property=\"og:description\" content=\"Learn how to build color palettes that pass WCAG contrast, work for color-blind users, and hold up in dark mode, with roles, scales, tools, and testing steps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"OriginUX Studio\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-05T05:10:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-05T05:10:43+00:00\" \/>\n<meta name=\"author\" content=\"master.origin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"master.origin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/\"},\"author\":{\"name\":\"master.origin\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\"},\"headline\":\"Accessible Color Palettes: How to Build and Test Them for UI\",\"datePublished\":\"2026-11-05T05:10:41+00:00\",\"dateModified\":\"2026-11-05T05:10:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/\"},\"wordCount\":1473,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/\",\"url\":\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/\",\"name\":\"Accessible Color Palettes: How to Build and Test Them for UI\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#website\"},\"datePublished\":\"2026-11-05T05:10:41+00:00\",\"dateModified\":\"2026-11-05T05:10:43+00:00\",\"description\":\"Learn how to build color palettes that pass WCAG contrast, work for color-blind users, and hold up in dark mode, with roles, scales, tools, and testing steps.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.originux.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessible Color Palettes: How to Build and Test Them for UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.originux.com\/resources\/#website\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"name\":\"OriginUX Studio\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.originux.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\",\"name\":\"OriginUX Studio\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"contentUrl\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"width\":120,\"height\":120,\"caption\":\"OriginUX Studio\"},\"image\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\",\"name\":\"master.origin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"caption\":\"master.origin\"},\"sameAs\":[\"https:\/\/www.originux.com\"],\"url\":\"https:\/\/www.originux.com\/resources\/author\/master-origin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accessible Color Palettes: How to Build and Test Them for UI","description":"Learn how to build color palettes that pass WCAG contrast, work for color-blind users, and hold up in dark mode, with roles, scales, tools, and testing steps.","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.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/","og_locale":"en_US","og_type":"article","og_title":"Accessible Color Palettes: How to Build and Test Them for UI","og_description":"Learn how to build color palettes that pass WCAG contrast, work for color-blind users, and hold up in dark mode, with roles, scales, tools, and testing steps.","og_url":"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/","og_site_name":"OriginUX Studio","article_published_time":"2026-11-05T05:10:41+00:00","article_modified_time":"2026-11-05T05:10:43+00:00","author":"master.origin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"master.origin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#article","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/"},"author":{"name":"master.origin","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c"},"headline":"Accessible Color Palettes: How to Build and Test Them for UI","datePublished":"2026-11-05T05:10:41+00:00","dateModified":"2026-11-05T05:10:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/"},"wordCount":1473,"commentCount":0,"publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/","url":"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/","name":"Accessible Color Palettes: How to Build and Test Them for UI","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/#website"},"datePublished":"2026-11-05T05:10:41+00:00","dateModified":"2026-11-05T05:10:43+00:00","description":"Learn how to build color palettes that pass WCAG contrast, work for color-blind users, and hold up in dark mode, with roles, scales, tools, and testing steps.","breadcrumb":{"@id":"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.originux.com\/resources\/blog\/accessible-color-palettes-how-to-build-and-test-them-for-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.originux.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Accessible Color Palettes: How to Build and Test Them for UI"}]},{"@type":"WebSite","@id":"https:\/\/www.originux.com\/resources\/#website","url":"https:\/\/www.originux.com\/resources\/","name":"OriginUX Studio","description":"","publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.originux.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.originux.com\/resources\/#organization","name":"OriginUX Studio","url":"https:\/\/www.originux.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","contentUrl":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","width":120,"height":120,"caption":"OriginUX Studio"},"image":{"@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c","name":"master.origin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","caption":"master.origin"},"sameAs":["https:\/\/www.originux.com"],"url":"https:\/\/www.originux.com\/resources\/author\/master-origin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/comments?post=7146"}],"version-history":[{"count":1,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7146\/revisions"}],"predecessor-version":[{"id":7147,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7146\/revisions\/7147"}],"wp:attachment":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/media?parent=7146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/categories?post=7146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/tags?post=7146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}