{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Color in Digital Design |Digital.gov",
    "description": "Color in Digital Design",
    "home_page_url" : "/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/","feed_url" : "/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/2017/04/04/color-in-digital-design/index.json","item" : [
    {"title" :"Color in Digital Design","summary" : "How do we choose color in digital design? In print, we have the Pantone fan and what you see is what you get — as long as your printer is color calibrated. With computer monitors, one does not get such precision, even within one office. So how much time and effort do you spend on color selection?","date" : "2017-04-04T11:00:46-04:00","date_modified" : "2024-07-10T08:44:18-04:00","authors" : {"angela-smithers" : "Angela Y. Smithers"},"topics" : {
        
            "content-strategy" : "Content Strategy",
            "design" : "Design",
            "product-and-project-management" : "Product and project management",
            "user-experience" : "User Experience"
            },"branch" : "snyk-fix-08ac0319715b31f28b1a7897cd249f39",
      "filename" :"2017-04-04-color-in-digital-design.md",
      
      "filepath" :"news/2017/04/2017-04-04-color-in-digital-design.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/snyk-fix-08ac0319715b31f28b1a7897cd249f39/content/news/2017/04/2017-04-04-color-in-digital-design.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/snyk-fix-08ac0319715b31f28b1a7897cd249f39/content/news/2017/04/2017-04-04-color-in-digital-design.md","slug" : "color-in-digital-design","url" : "/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/2017/04/04/color-in-digital-design/","content" :"\u003cp\u003eHow do we choose color in digital design? In print, we have the Pantone fan and what you see is what you get — as long as your printer is color calibrated. With computer monitors, one does not get such precision, even within one office. So how much time and effort do you spend on color selection? What you select could be your agency or office standard for the next five, ten or one hundred years! No pressure.\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2017/04/600-x-461-Boutet_1708_color_circles.jpg\"\n    alt=\"Claude Boutet’s 7-color and 12-color color wheels.\"/\u003e\u003cp\u003eBy C. B. (probably Claude Boutet or it\u0026rsquo;s editor, Christophe Ballard[1]) [Public domain], via Wikimedia Commons\u003c/p\u003e\u003c/div\u003e\n\n\n\u003cp\u003eRemember the colors of the box of your favorite cereal? Of course you do, even if it’s from when you were a kid. If the color changed next week, you wouldn’t recognize it; you would have trouble finding it in the cereal aisle and might even ask someone in the store for assistance. Well, website and online apps work much the same way. So, choosing colors that will last is highly important.\u003c/p\u003e\n\u003cp\u003eIn my experience, many of the Ivy League colleges (and hidden Ivies) have excellent style guides with sample do’s and don’ts for both digital and print. They make wonderful templates!\u003c/p\u003e\n\u003cp\u003eIn a recent \u003ca href=\"/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/communities/\"\u003eUX Community\u003c/a\u003e topic thread on color in digital design, many members shared their experiences and style guides. Arva Adams of the U.S. Patent and Trademark Office (USPTO) noted, “The most successful brands have one or two brand colors, and then list complimentary colors to use, but aren’t called “brand colors.” Think Sprint’s yellow and black, McDonalds’ yellow and red, BP’s blue, yellow, and green, and FedEx’s orange and blue. We have too many colors to really call our colors “brand colors,” but having our defined color guidelines takes hours of guesswork out of our project schedules.” Visit the \u003ca href=\"http://uspto.github.io/designpatterns/\"\u003eUSPTO UI Design Library\u003c/a\u003e on GitHub to see their excellent work. You can submit recommendations or “fork” your own to use and customize for projects.\u003c/p\u003e\n\u003cp\u003eWhether you want colors that are deep and rich, warm and inviting, or light and airy, it is important that those colors work with a little thing called \u003ca href=\"/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/topics/accessibility/\"\u003eSection 508\u003c/a\u003e Compliance. Why? Because \u003ca href=\"https://www.section508.gov/section-508-of-the-rehabilitation-act\"\u003eit’s the law\u003c/a\u003e. Tanya McIlravy of U.S. Department of Agriculture (USDA) also shared her firsthand experience and stated the importance of “viewing your page in grayscale to gauge proper contrast” so that “your purposeful use of color isn’t lost.” She goes on further to note, “red doesn’t read as red, but rather the same as the blue or green … so a warning text or important item could be missed,” and that “Gradients are uncomfortable to view, especially as a background because the contrast changes as you go down the page and when you are searching for contrast as part of visual cues, you get ‘lost.’”\u003c/p\u003e\n\u003cp\u003eJennifer Horan of the Consumer Financial Protection Bureau (CFPB) added, “Remember, for 508, colour alone cannot indicate importance. You need programmatic cues as well.” when discussing how a dialogue box or other features that grabs a user’s focus could be a great solution regarding the need for visual cues for important items that are often called out in color. She also noted the great work their team put into their \u003ca href=\"https://cfpb.github.io/design-manual/brand-guidelines/typography.html\"\u003eDesign Manual\u003c/a\u003e when it comes to colour, contrast, and text size and weight.\u003c/p\u003e\n\u003cp\u003eAtul Varma of 18F recently created my new favorite \u003ca href=\"https://toolness.github.io/accessible-color-matrix/\"\u003etool for determining combinations with 4:5:1 contrast ratio or higher for a custom color palette\u003c/a\u003e. This is an important first step because when you select colors, you want them to be consist throughout the website. You don’t want to tweak the hexadecimal colors three different times — and end up with 5 different blues and 11 total colors in one website. Gag!\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2015/09/600-x-315-US-Web-Design-Standards-desktop-tablet-and-phone-home.jpg\"\n    alt=\"The U.S. Web Design Standards are designed to be viewed on any device.\"/\u003e\u003c/div\u003e\n\n\n\u003cp\u003eAnother approach to color selection is to utilize the guidance of the \u003ca href=\"https://standards.usa.gov\"\u003eU.S. Web Design Standards\u003c/a\u003e, created by \u003ca href=\"https://18f.gsa.gov\"\u003e18F\u003c/a\u003e and the \u003ca href=\"https://www.usds.gov\"\u003eU.S. Digital Service\u003c/a\u003e. You may find the \u003ca href=\"https://standards.usa.gov/components/colors/#palette\"\u003eColor Palette\u003c/a\u003e section to be of great help — for more information, \u003ca href=\"https://standards.usa.gov/components/colors/#palette\"\u003ewatch DGU’s U.S. Web Design Standards Update webinar\u003c/a\u003e that was held on January 25th. (Short on time? \u003ca href=\"/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/2017/02/09/webinar-recap-better-faster-and-more-flexible-u-s-web-design-standards-update/\"\u003eRead the highlights recap\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eAdditionally, you could always go for a simplified approach where the base scheme is black \u0026amp; white, with just one or two colors for highlights. It’s not so bad — check out the man websites for \u003ca href=\"https://www.nps.gov/\"\u003eNational Park Service\u003c/a\u003e (NPS), the \u003ca href=\"https://www.opm.gov/\"\u003eOffice of Personnel Management\u003c/a\u003e (OPM), and the \u003ca href=\"https://www.si.edu/\"\u003eSmithsonian Institute\u003c/a\u003e.\u003c/p\u003e\n"}
  ]
}