<p>Published on <a href="https://blog.prototypr.io/a-framework-to-create-accessible-and-harmonious-color-system-for-faster-design-dev-handoff-8138b3a9604d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Priyanka Godbole </p>
<p><em>Enabling design &amp; development teams to use colors deliberately for improved consistency across product</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4-ldgyOXSnySz6KIJAv9hQ.png"></p>
<p>Here is a 5 step process which I used to redefine the color system of Practice Fusion’s EHR product. I reduced its color palettes by 40%–75% and simplified application rules to ensure consistency across the product. (This post is going to <strong>focus on the definition of UI colors only</strong>. Brand colors need a different approach and will not be discussed here.)</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-611v9C_CF0WJ4BtGS1hwA.png"></p>
<h3>Step 1: Accessibility (contrast) audit of colors in your UI</h3>
<p>Run the Chrome WAVE plugin and check for color contrast errors in your UI.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*x0m61QHO2Ip39BN3S2Zcgg.png">Accessibility check of test account with mock data</p>
<p>Take note of which color combinations are not accessible and cross them out from palette. It makes decision-making easier later on.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yZb5lOITprjHpeO3T3wmKw.png"></p>
<h3>Step 2: Semantic audit of colors in your UI</h3>
<blockquote><p>Gestalt’s principle of similarity, states that things which share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together.</p></blockquote>
<p>Components with same color properties (fill or border) will be assumed to have similar functionality. Too much variation in color causes unnecessary distraction and cognitive load as users need to process and interpret the meaning of each color variant.</p>
<p>Annotate the meaning for every color usage in couple of key representative screens. And while you do that, ask yourself just one question— “Do I really need these many variations of the same color to convey 1 meaning?” Examples:</p>
<ul>
<li>Links and buttons allow users to click and do some action. Do they really need to be in 4 different shades of blue? Can I have just 1 blue (or may be 2) to rule them all and be the only color/s that means click?</li>
<li>Borders help to contain components, tables and sections. So, they really serve the same purpose of containing content. Do they really need to be in 3 different shades of grays?</li>
</ul>
<h4>How many colors in each palette?</h4>
<ul>
<li>Based on semantics of color usage, I classified blue as the color of action. Our original blue color palette had 8 blues and I needed just 2 — 1 dark blue (shade) to imply “click” and 1 light blue (tint) to indicate “hover”. That is 75% reduction from existing blue palette.</li>
<li>Grays are typically used for secondary text, input field borders and any secondary regions as background. That meant I really needed just 3 grays— 40% reduction from the original gray palette of 5 grays.</li>
</ul>
<p>After doing semantic audit, you will know exactly how many colors you really need in each palette.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kEZuejbXp9qvJ56Qu220sQ.png"></p>
<h3>Step 3: Harmony audit of colors in all your palettes</h3>
<blockquote><p>Colors harmonize if they are variations in lightness and chroma within a single hue (monochromatic harmony)</p></blockquote>
<p><em>Reference: </em><a href="https://www.handprint.com/HP/WCL/tech13.html"><em>https://www.handprint.com/HP/WCL/tech13.html</em></a></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hHR9N2tXGCmYiRHiUTsBxQ.png"></p>
<p>Use HSB model to evaluate if all existing palettes are <strong>harmonious.</strong> <em>(HSB is the most logical humanly readable color model. No other color model gives us a full understanding of how the color outcome will change by adjusting its values.)</em></p>
<p>To have <strong>monochromatic color harmony</strong> within a palette, we need to have <strong>all colors from same hue</strong>. If the color palette has a very varied range of hues, the colors will not look like they belong together. A small delta in hue values may seem to be alright, as the difference is hard to perceive; but the question <strong>is there a good reason to have this small delta?</strong> I have found that picking just 1 hue helps with remembering colors for both designers and developers and in future, if you need to expand a palette, it provides a strong foundation for ensuring harmony in all colors.</p>
<h3>Step 4: Pick 1 hue for each color palette in your UI</h3>
<p>I will start with <strong>example of blue palette, </strong>which had a hue range of 199–210 in my case. I am going to pick 1 single hue from the same range, so that the <strong>overall appearance and brand feel is not impacted</strong>. I created color palettes for H: 195, 200, 205, 210 by keeping either S or B constant at 100%, and varying the other component by 5–15 points to give me shades and tints respectively. I rounded off hues to closest multiples of 5, as it makes it easier to remember the whole color system.</p>
<h4><strong>Color mapping for blue</strong></h4>
<p>I need to finally select just 2 colors out of all these blue palettes (as determined in Step 2), but both colors must be from the same hue. It is helpful to see full palettes of each shortlisted hue at once, as it gives a sense of the overall feel of each color palette and allows you to better compare with an existing palette. I observed that H:205 provided shades as well as tints that looked closest to our existing colors.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*98xRt9MeQxrC2AVkYcjzLA.png">Color mapping for blue</p>
<p><strong>If you are tasked with creating a brand new color system</strong>, it will be helpful to take a look at all the hues available for the color and choose a hue that matches your brand emotion best. Example, for a fun consumer application, you may want to select a fun hue color like H:190.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ss0H4c31pAR7ghht4luoSw.png">Base colors for each hue</p>
<h4>Color mapping for all other palettes</h4>
<p>Color mapping for all other color palettes was much simpler since there were limited colors in other palettes. Example: I started with red: adjusted hue to 0 and the new color set still looked more or less similar. I rounded of orange hue to 30. I started off with yellow hue adjusted to 50 and purple adjusted to 250 as those values seemed closest to existing values, but after testing in UI; I realized that hue 60 and hue 270 looked much better for our context of notifications. I ended up with hue values that had a pattern of being a multiple of 30 for most part (except the blue hue). This was a coincidence, but it did make remembering hues a lot easier.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YJomtwxIDoMsfZeNFZJaJQ.png">Color mapping for all palettes</p>
<h4>Special case: Gray palette</h4>
<p>Gray palette does not have a hue. So, I did not need to do any hue mapping for it.</p>
<h3>Step 5: Determine values in each hue</h3>
<p>The actual process of deriving the background &amp; text color values from the color palette was as follows. Shortlist colors which you can possibly use based on your background &amp; text needs determined in step 2. Do visual check of how text appears on different background colors, to <strong>finalize background colors</strong>. Do accessibility check with WCAG Color contrast checker to <strong>finalize text colors </strong>which work best for the chosen background colors. I followed a similar method for other palettes.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yYPjJUb-2Rdd5rzkOa8ppQ.png"></p>
<blockquote><p>Colors harmonize if they are the same lightness and chroma, regardless of hue (nuance harmony)</p></blockquote>
<p>Wherever possible, I tried to use same S or B values across hues. I made exceptions only if the color was not accessible or was too off visually.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EuixpW42iVXRjZhYwKmc4A.png">Same S across all tints<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*boxfSES3Uq49a2yauShDCA.png">Checking for accessibility &amp; visual appearance in UI<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mzmgAYqWarrTqd_0mN8WMw.png">New color system — Easy to remember due to monochromatic &amp; (almost) nuance harmony</p>
<h3>3 general guidelines while applying color</h3>
<h4>Guideline 1: Permitted text: background pairs &amp; border colors</h4>
<p>All the colors were derived only after first deciding on their application contexts (Step 2). No color should be applied outside of that application context. Example, a color picked for text should not be used for borders or a color picked for background should not be used as text.</p>
<p>As soon as you define your color system, define the permitted text : background and border colors. Color contrast is measured for text and background colors and so they should always be defined in pairs.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zzO_EMzvwnIK2x8XR1yDWQ.png"></p>
<h4>Guideline 2: Derived states (like hover &amp; active)</h4>
<p>Derived states often take colors which are slightly lighter or slightly darker than the original colors. By using CSS preprocessor (SASS or LESS) functions like lighten() or darken(), you can compute the derived states colors.</p>
<p>I have found that it is best to not include colors for derived states as part of the color system. The problem with introducing them as part of the color system is that it increases the number of visible options, and over time makes it difficult to limit its usage for other purposes.</p>
<blockquote><p><em>“As the number of choices increase, it becomes exponentially difficult to make a decision.” — Hick’s law</em></p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FKgNO1ftaHyxvfJqK-u6zg.png"></p>
<h4>Guideline 3: Apply same colors for same states across all UI components</h4>
<p>Make sure all your UI components have similar color application across various states. I used the blue link color for borders for all components in hover state to imply that they are clickable. I used the same gray color for all component borders and also used it for all other types of borders like section borders, table borders, divider lines, etc</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mjxri2QIU-IlbTYnp6eCvA.png">Same colors for same states across all UI components</p>
<h3>In conclusion</h3>
<p>By following this process:</p>
<ul>
<li>You will come up with a color system with limited values and limited application rules <strong>(Hick’s law)</strong> — which are very easy and logical to remember <strong>(Gestalt’s principles of similarity</strong>).</li>
<li>You will be using colors in your UI which adhere to <strong>accessibility color contrast guideline</strong>. This will allow people of different abilities to track and comprehend information more easily.</li>
<li>Design-dev handoffs will become faster as the developers will also know all the rules of application of color system and be able to guess color in mocks delivered by designers.</li>
<li>Designers may not need to redline all colors. Developers will not need to spend time in inspecting mocks in other tools like Zeplin.</li>
</ul>
<p>You can follow me on <a href="https://twitter.com/priyankagodbole">https://twitter.com/priyankagodbole</a>. Thank you for taking the time to read this far!</p>
<h3>Useful articles for reference:</h3>
<p>Though there are plenty of articles touching on color theory, I did not find a lot of resources explaining a systematic practical approach to coming up with a color system. If you know of any other articles besides the ones listed below, please share it in comments below.</p>
<p><a href="https://medium.com/eightshapes-llc/light-dark-9f8ea42c9081">https://medium.com/eightshapes-llc/light-dark-9f8ea42c9081</a></p>
<p><a href="https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3">https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3</a></p>
<p><a href="https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e">Color in UI Design: A (Practical) Framework</a></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8138b3a9604d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/a-framework-to-create-accessible-and-harmonious-color-system-for-faster-design-dev-handoff-8138b3a9604d">A framework to create an accessible and harmonious color system for faster design-dev handoff</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


A framework to create an accessible and harmonious color system for faster design-dev handoff

Top Stories