{"id":5432,"date":"2022-03-02T16:57:22","date_gmt":"2022-03-02T23:57:22","guid":{"rendered":"https:\/\/www.boisestate.edu\/webguide\/?p=5432"},"modified":"2026-01-13T14:43:01","modified_gmt":"2026-01-13T21:43:01","slug":"using-university-colors-in-web-graphics","status":"publish","type":"post","link":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/","title":{"rendered":"Using University colors in web graphics"},"content":{"rendered":"\n
\"Examples<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Boise State provides specific values for using university colors in print, digital and embroidered media.<\/p>\n\n\n\n

For university websites and other online media, combinations of these university colors may pose difficulties for viewers who have color vision issues. 1 in 12 men and 1 in 200 women have color blindness; that’s ~1,060 faculty, staff, and students at Boise State.<\/p>\n\n\n\n

These issues are particularly apparent when viewing colored text against a colored background.<\/p>\n\n\n\n

Know your contrast ratio<\/h2>\n\n\n\n

We can eliminate most color vision hurdles by ensuring the contrast ratio of text against a background is at least 4.5:1<\/strong> for normal text, and 3:1<\/strong> for large text.<\/p>\n\n\n\n

In general, this means that text against a dark background needs to be very light, and text against a light background must be very dark.<\/p>\n\n\n\n

The good folks at WebAIM offers a simple online resource to validate your colors for contrast requirements<\/a>. Input both the hex values<\/a> of your text and background colors (you can find these in your image editor or on the university’s Brand Standards site<\/a>) to find your contrast ratio:<\/p>\n\n\n\n

\"Screenshot
Example of the WebAIM contrast checker showing the ratio between foreground and background colors. The minimum ratios for normal and large text are 4.5:1 and 3:1, so the displayed value of 5.11:1 is compliant.<\/figcaption><\/figure>\n\n\n\n

Avoid blue on orange<\/h3>\n\n\n\n

Most color contrast issues we see at Boise State involve blue text against an orange background, or vice-versa.<\/p>\n\n\n\n

We love our blue and orange, but they weren’t designed to be used together as foreground text against a colored background.<\/p>\n\n\n\n

When standard Boise State blue text is used against a standard Boise State orange background, the contrast ratio is 2.35:1. (The same is true for orange text on a blue background.) This ratio doesn’t meet the required minimums for both normal and large text.<\/p>\n\n\n\n

So, if you want that vast majority of people to be able to read your text, avoid the blue and orange combo!<\/p>\n\n\n\n

More information<\/h2>\n\n\n\n

You can learn more about using Boise State colors<\/a> with your digital projects by visiting the Office of Communications and Marketing’s website.<\/p>\n","protected":false},"excerpt":{"rendered":"

Boise State provides specific values for using university colors in print, digital and embroidered media….<\/p>\n","protected":false},"author":90,"featured_media":5435,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3162],"tags":[],"class_list":["post-5432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility"],"acf":[],"yoast_head":"\nUsing University colors in web graphics - Webguide<\/title>\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.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using University colors in web graphics\" \/>\n<meta property=\"og:description\" content=\"Boise State provides specific values for using university colors in print, digital and embroidered media....\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/\" \/>\n<meta property=\"og:site_name\" content=\"Webguide\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-02T23:57:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-13T21:43:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664-664x630.png\" \/>\n\t<meta property=\"og:image:width\" content=\"664\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/\"},\"author\":{\"name\":\"Shad\",\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/person\/026a5fb49b740daab0e72d8d199f88f2\"},\"headline\":\"Using University colors in web graphics\",\"datePublished\":\"2022-03-02T23:57:22+00:00\",\"dateModified\":\"2026-01-13T21:43:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/\"},\"wordCount\":344,\"publisher\":{\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664.png\",\"articleSection\":[\"Accessibility\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/\",\"url\":\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/\",\"name\":\"Using University colors in web graphics - Webguide\",\"isPartOf\":{\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664.png\",\"datePublished\":\"2022-03-02T23:57:22+00:00\",\"dateModified\":\"2026-01-13T21:43:01+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#primaryimage\",\"url\":\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664.png\",\"contentUrl\":\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664.png\",\"width\":664,\"height\":665,\"caption\":\"Examples of poor and good color contrast in images\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/#website\",\"url\":\"https:\/\/www.boisestate.edu\/webguide\/\",\"name\":\"Webguide\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.boisestate.edu\/webguide\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/#organization\",\"name\":\"Boise State University\",\"url\":\"https:\/\/www.boisestate.edu\/webguide\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2025\/09\/boisestate-primarylogo-2color-rgb-scaled.png\",\"contentUrl\":\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2025\/09\/boisestate-primarylogo-2color-rgb-scaled.png\",\"width\":2560,\"height\":1142,\"caption\":\"Boise State University\"},\"image\":{\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/person\/026a5fb49b740daab0e72d8d199f88f2\",\"name\":\"Shad\",\"url\":\"https:\/\/www.boisestate.edu\/webguide\/author\/sjessen\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using University colors in web graphics - Webguide","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.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/","og_locale":"en_US","og_type":"article","og_title":"Using University colors in web graphics","og_description":"Boise State provides specific values for using university colors in print, digital and embroidered media....","og_url":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/","og_site_name":"Webguide","article_published_time":"2022-03-02T23:57:22+00:00","article_modified_time":"2026-01-13T21:43:01+00:00","og_image":[{"width":664,"height":630,"url":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664-664x630.png","type":"image\/png"}],"author":"Shad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Shad","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#article","isPartOf":{"@id":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/"},"author":{"name":"Shad","@id":"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/person\/026a5fb49b740daab0e72d8d199f88f2"},"headline":"Using University colors in web graphics","datePublished":"2022-03-02T23:57:22+00:00","dateModified":"2026-01-13T21:43:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/"},"wordCount":344,"publisher":{"@id":"https:\/\/www.boisestate.edu\/webguide\/#organization"},"image":{"@id":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#primaryimage"},"thumbnailUrl":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664.png","articleSection":["Accessibility"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/","url":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/","name":"Using University colors in web graphics - Webguide","isPartOf":{"@id":"https:\/\/www.boisestate.edu\/webguide\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#primaryimage"},"image":{"@id":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#primaryimage"},"thumbnailUrl":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664.png","datePublished":"2022-03-02T23:57:22+00:00","dateModified":"2026-01-13T21:43:01+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.boisestate.edu\/webguide\/2022\/03\/02\/using-university-colors-in-web-graphics\/#primaryimage","url":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664.png","contentUrl":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664.png","width":664,"height":665,"caption":"Examples of poor and good color contrast in images"},{"@type":"WebSite","@id":"https:\/\/www.boisestate.edu\/webguide\/#website","url":"https:\/\/www.boisestate.edu\/webguide\/","name":"Webguide","description":"","publisher":{"@id":"https:\/\/www.boisestate.edu\/webguide\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.boisestate.edu\/webguide\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.boisestate.edu\/webguide\/#organization","name":"Boise State University","url":"https:\/\/www.boisestate.edu\/webguide\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/logo\/image\/","url":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2025\/09\/boisestate-primarylogo-2color-rgb-scaled.png","contentUrl":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2025\/09\/boisestate-primarylogo-2color-rgb-scaled.png","width":2560,"height":1142,"caption":"Boise State University"},"image":{"@id":"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/person\/026a5fb49b740daab0e72d8d199f88f2","name":"Shad","url":"https:\/\/www.boisestate.edu\/webguide\/author\/sjessen\/"}]}},"featured_image_url":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2022\/03\/ColorContrast-Graphic664x664.png","author_name":"Shad","cats":["Accessibility"],"featured_caption":"","_links":{"self":[{"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/posts\/5432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/comments?post=5432"}],"version-history":[{"count":7,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/posts\/5432\/revisions"}],"predecessor-version":[{"id":10773,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/posts\/5432\/revisions\/10773"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/media\/5435"}],"wp:attachment":[{"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/media?parent=5432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/categories?post=5432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/tags?post=5432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}