--- title: "Library 2.0: Can Everyone See Your Website Colors?" description: Colors are an excellent way to create a unique brand personality. Read this handy guide to the best website colors for accessibility and compliance. image: https://blog.bibliocommons.com/hubfs/Blog/Blog%20Posts/2022-05-25%20-%20A11y%20-%206%20-%20Library%202.0%20-%20Can%20Everyone%20See%20Website%20Colors/BiblioCommons_Social_Blog_A11y-6_2022-05-25.jpg --- [Partner Portal](https://partnerportal.bibliocommons.com/hc/en-us) [Support](https://partnerportal.bibliocommons.com/hc/en-us/requests/new) [Careers](https://www.bibliocommons.com/careers) [![BiblioCommons\_logo\_RGB](https://blog.bibliocommons.com/hs-fs/hubfs/Logos/BiblioCommons_logo_RGB.png?width=2000&height=586&name=BiblioCommons_logo_RGB.png)](https://www.bibliocommons.com/) Why BiblioCommons? ## Featured Resources [![64cc72825ae66c58460a5783\_BiblioCommons\_Resource\_Video-Story-Lawrence-Polli\_Thumb](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc72825ae66c58460a5783_BiblioCommons_Resource_Video-Story-Lawrence-Polli_Thumb.jpeg?width=600&height=350&name=64cc72825ae66c58460a5783_BiblioCommons_Resource_Video-Story-Lawrence-Polli_Thumb.jpeg) Lawrence Public Library Creates Personalized Readers Advisory Services to Connect with Patrons](https://resources.bibliocommons.com/access-granted-video-lawrence-public-library-creates-personalized-readers-advisory-services-to-connect-with-patrons) [![Library 2.0: Why Everyone’s Talking About Digital Accessibility-Everyone-Is-Talking-Digital-Accessibility\_Thumb](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc728108678fffccadf55e_BiblioCommons_Resource_Blog_A11y-Everyone-Is-Talking-Digital-Accessibility_Thumb.jpeg?width=600&height=350&name=64cc728108678fffccadf55e_BiblioCommons_Resource_Blog_A11y-Everyone-Is-Talking-Digital-Accessibility_Thumb.jpeg) Library 2.0: Why Everyone’s Talking About Digital Accessibility](https://blog.bibliocommons.com/blog/library-2.0-why-everyones-talking-about-digital-accessibility) [See all resources](https://www.bibliocommons.com/resources) ## Why BiblioCommons? [Success Stories Hear how Library Partners are making an impact in their communities](https://www.bibliocommons.com/success-stories) [Our Story A better online catalog was just the beginning](https://www.bibliocommons.com/our-story) [Libraries We Work With Take a look at all the Partner Libraries that subscribe to BiblioCommons](https://www.bibliocommons.com/libraries-we-work-with) [News Stay up-to-date on the latest company updates with news articles, press releases, and announcements](https://www.bibliocommons.com/news) Solutions ## Featured Resources [![How EPL Makes All Formats Easily Discoverable on Its Online Catalog](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc7283a40d493701247bda_BiblioCommons_Resource_Video-Story-EPL-BiblioCore_Thumb.jpeg?width=600&height=350&name=64cc7283a40d493701247bda_BiblioCommons_Resource_Video-Story-EPL-BiblioCore_Thumb.jpeg) How EPL Makes All Formats Easily Discoverable on Its Online Catalog](https://resources.bibliocommons.com/access-granted-video-how-epl-makes-all-formats-easily-discoverable-on-its-online-catalog) [![Library 2.0: Inclusive Images and Text Take Your Website Beyond Technical Compliance](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc728263171ef951dfe9fe_BiblioCommons_Resource_Blog_A11y-Inclusive-Images-and-Text_Thumb.jpeg?width=600&height=350&name=64cc728263171ef951dfe9fe_BiblioCommons_Resource_Blog_A11y-Inclusive-Images-and-Text_Thumb.jpeg) Library 2.0: Inclusive Images and Text Take Your Website Beyond Technical Compliance](https://blog.bibliocommons.com/blog/library-2.0-inclusive-images-and-text-take-your-website-beyond-technical-compliance) [See all resources](https://www.bibliocommons.com/resources) ## Solutions [![Discovery Layer](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a211ced7fa857343a5cf_biblio-core-round.svg) Discovery Layer Accurate search results, easier borrowing, and endless discovery pathways](https://www.bibliocommons.com/solutions/bibliocore) [![Discovery Layer Add-Ons](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a211ced7fa857343a5cf_biblio-core-round%20(1).svg) Discovery Layer Add-Ons Unlock more ways to engage with patrons](https://www.bibliocommons.com/solutions/bibliocore-add-ons) [![Mobile App](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a2113ed2327dd1a577c3_biblio-apps-round.svg) Mobile App Deliver engaging content and promote discovery wherever your patrons are](https://www.bibliocommons.com/solutions/biblioapps) [![Website Builder](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a2119e3caf2ea2a27417_biblio-web-round.svg) Website Builder Showcase the best your library has to offer with a fully integrated CMS and webpage builder](https://www.bibliocommons.com/solutions/biblioweb) [![Events Calendar](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a211fe53659fbd9b0c10_biblio-events-round.svg) Events Calendar A patron-friendly way to manage and promote your library's programs and events](https://www.bibliocommons.com/solutions/biblioevents) [![Email Marketing](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a2118a7ef86b347b5dae_biblio-email-round.svg) Email Marketing Email Marketing That’s Personalized, Automated, and Integrated](https://www.bibliocommons.com/solutions/biblioemail) Services ## Featured Resources [![Library 2.0: How Accessible Is Your Mobile App? (Tips to Make It Happen!)](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc72835ae66c58460a58ad_BiblioCommons_Resource_Blog_A11y-Mobile-App_Thumb.jpeg?width=600&height=350&name=64cc72835ae66c58460a58ad_BiblioCommons_Resource_Blog_A11y-Mobile-App_Thumb.jpeg) Library 2.0: How Accessible Is Your Mobile App? (Tips to Make It Happen!)](https://blog.bibliocommons.com/blog/library-2.0-how-accessible-is-your-mobile-app) [![Creating Focused Emails That Will Delight Library Patrons](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc7280d4d4629cd9c4467a_BiblioCommons_Resource_Blog_Email-Structure_Thumb.jpeg?width=600&height=350&name=64cc7280d4d4629cd9c4467a_BiblioCommons_Resource_Blog_Email-Structure_Thumb.jpeg) Creating Focused Emails That Will Delight Library Patrons](https://blog.bibliocommons.com/blog/creating-focused-emails-that-will-delight-library-patrons) [See all resources](https://www.bibliocommons.com/resources) ## Services [Professional Services Support your library’s team with professional services](https://www.bibliocommons.com/professional-services) [Training and Support Comfort in knowing you're always supported](https://www.bibliocommons.com/training-and-support) Resources ## Featured Resources [![Email Marketing Planning](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc727f70e1ef2a2b0a928b_BiblioCommons_Resource_Template_Email-Marketing-Planning_Thumb.jpeg?width=600&height=350&name=64cc727f70e1ef2a2b0a928b_BiblioCommons_Resource_Template_Email-Marketing-Planning_Thumb.jpeg) Email Marketing Planning](https://resources.bibliocommons.com/template-email-marketing-planning) [![64cc7284d4d4629cd9c44a5b\_BiblioCommons\_Resource\_Blog\_Mktg-PR-to-Visionary\_Thumb](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc7284d4d4629cd9c44a5b_BiblioCommons_Resource_Blog_Mktg-PR-to-Visionary_Thumb.jpeg?width=600&height=350&name=64cc7284d4d4629cd9c44a5b_BiblioCommons_Resource_Blog_Mktg-PR-to-Visionary_Thumb.jpeg) Library Marketing: From Building Public Relations to Becoming Visionary Storytellers](https://blog.bibliocommons.com/blog/library-marketing-public-relations-to-visionary-storytellers) [See all resources](https://www.bibliocommons.com/resources) ## Resources [All Resources Access all types of resources like guides, templates, videos, and reports to learn best practices and get new ideas](https://www.bibliocommons.com/resources) [Webinars Register to attend upcoming live webinars and get access to on-demand webinar recordings that cover a variety of topics](https://www.bibliocommons.com/webinars) [Blog Dive into our blog to read about library trends, expert opinions, fresh ideas, and practical tips that you can use in your day-to-day](https://www.bibliocommons.com/blog) [Newsletters Sign up to receive the latest in public library topics, new product features, and upcoming events in your inbox](https://www.bibliocommons.com/newsletters) [BiblioCon Learn from public library staff and leaders that are experts in creating unforgettable, fresh, and engaging experiences](https://www.bibliocommons.com/bibliocon) [Contact Us](https://www.bibliocommons.com/contact-us) # Library 2.0: Can Everyone See Your Website Colors? [May 25, 2022](https://blog.bibliocommons.com/blog/library-2.0-can-everyone-see-your-website-colors) Colors are an excellent way to convey emotion and create a unique personality for your brand. Using the right combination of colors takes a little planning. For example, if your library logo is navy blue and red, the same colors can be used on the website where appropriate, but there are some scenarios you would want to avoid to ensure the experience isn't obnoxious for the viewers or, worse yet, not legible at all. Using buttons that have blue text on a red background is a bad idea. ---   |   ![Thumbnail for Asset on Investing in Your Librarys Digital Future](https://blog.bibliocommons.com/hs-fs/hubfs/Resources/Brochures/Thumbnail%20for%20Asset%20on%20Investing%20in%20Your%20Librarys%20Digital%20Future.png?width=273&height=162&name=Thumbnail%20for%20Asset%20on%20Investing%20in%20Your%20Librarys%20Digital%20Future.png) |   **Transform Your Library Website into a Vibrant Patron Engagement Platform** Demystify web design, UX, security, accessibility, and more with our complete guide and checklists! | | --- | --- | | [![Get Full Guide](https://no-cache.hubspot.com/cta/default/8616836/9cc0333c-bdbc-46cb-b1f2-d83b06d4f8af.png)](https://cta-redirect.hubspot.com/cta/redirect/8616836/9cc0333c-bdbc-46cb-b1f2-d83b06d4f8af) | |   --- Things get even more complicated for visitors with color blindness, low vision (common as our population ages), or even folks looking at your website on their phones in the bright sunshine. When text isn’t easy to read, the chances of people staying on your website to engage with your content, find your events, or discover and access your collection and other resources are diminished. In this series on [digital accessibility](https://blog.bibliocommons.com/blog/library-2.0-why-everyones-talking-about-digital-accessibility), we’ve talked about [design guidelines](https://blog.bibliocommons.com/blog/library-2.0-the-4-pillars-that-make-your-services-digitally-accessible), [assistive technologies](https://blog.bibliocommons.com/blog/library-2.0-are-you-ready-for-the-assistive-technologies-your-library-patrons-are-using), doing your own [website accessibility audit](https://blog.bibliocommons.com/blog/library-2.0-top-5-ways-to-make-your-website-more-accessible), and [tips for website accessibility compliance](https://blog.bibliocommons.com/blog/library-2.0-tips-for-website-compliance-to-put-into-action-today). Now we want to give you a handy guide to the best website colors for accessibility and compliance that deliver a great digital experience for all.   **[![W3C video about colors with good contrast.](https://blog.bibliocommons.com/hs-fs/hubfs/Blog/Blog%20Posts/2022-05-25%20-%20A11y%20-%206%20-%20Library%202.0%20-%20Can%20Everyone%20See%20Website%20Colors/Blog_A11y-6_W3-Web-Accessibility-Perspectives.jpg?width=1000&name=Blog_A11y-6_W3-Web-Accessibility-Perspectives.jpg)](https://www.w3.org/WAI/perspective-videos/contrast/)Even people without a visual disability will appreciate a color palette that won’t cause unnecessary eye strain. [Check out WCAG’s quick video on color contrast and why it matters.](https://www.w3.org/WAI/perspective-videos/contrast/)**   ## **What is Color Contrast? Simple, but Often Overlooked** Ease and simplicity are expected when people visit your website. And when it comes to digital accessibility, the concept of color contrast is critical. Yet it is one of the [most overlooked accessibility issues](https://medium.com/cross-team/top-5-most-overlooked-accessibility-issues-c0c8018c1eab). It’s also one of the most straightforward strategies to put in place to make sure your website is compliant, and your color choices follow the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html). What exactly is color contrast? If you’re not an artist or designer, you may not know the ins and outs. Color contrast refers to the difference in light between your text font—or anything in the foreground—and its background. It’s best to have enough of a visual distinction between the color of the text on the page and its background color. When you use sufficiently contrasting colors, your website’s font visibility is stark enough to distinguish easily. This way, the great content you’ve taken the time to develop can be read by everyone. The question is, which colors work best for high visibility? A very well-known example is [Apple’s simple black text on white](https://www.apple.com/) with calls to action in a serious but standout electric blue shade for potential buyers. And note the[Pima County Public Library’s use of color](https://www.library.pima.gov/elibrary/) with clear white text on blue backgrounds for its top navigation and black and grey text on white for featured material below. Clear and direct is the way to go. [![Screen capture and link to the Pima County Public Library website.](https://blog.bibliocommons.com/hs-fs/hubfs/Blog/Blog%20Posts/2022-05-25%20-%20A11y%20-%206%20-%20Library%202.0%20-%20Can%20Everyone%20See%20Website%20Colors/Blog_A11y-6_Pima-County-Public-Library-Website.jpg?width=1000&name=Blog_A11y-6_Pima-County-Public-Library-Website.jpg)](https://www.library.pima.gov/elibrary/) [Pima County Public Library](https://www.library.pima.gov/elibrary/) uses contrast compliant white text on different colored backgrounds.   ## **Choose Website Colors with High Contrast Ratios** When we talk about good color choices, we’re looking for the best color contrast ratios. These ratios are numerical values that are assigned to the difference in light between the foreground and background. [WCAG has a criterion for success for you to follow for color contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). The concept of how contrast ratio is used is simple—the higher the contrast ratio, the easier it is to distinguish. Interestingly, the contrast ratio needed to see the distinction clearly varies from person to person. Someone who can distinguish between objects that have a low contrast ratio is very contrast sensitive, while someone who requires high contrast to distinguish between objects has a low sensitivity.  The guidelines say that normal text and images of text must meet a contrast ratio of at least 4.5:1. There are some exceptions to this rule, including: Large text, defined as 14 point and bold or larger, or 18 point or larger, must have a contrast ratio of at least 3:1. Incidental text, or images of text, that are pure decoration and serve no user purpose do not have to meet color contrast requirements. Brand logos do not have to meet color contrast requirements. Thankfully, you don’t need to be a web design expert to see how your website measures up. You can run your color choices through one of the many free color contrast accessibility evaluation tools, like the [WebAIM Contrast Checker Tool](https://webaim.org/resources/contrastchecker/)from [WebAIM](https://webaim.org/), a non-profit organization based out of the Center for Persons With Disabilities at Utah State University. If you don’t know the color code to plug in, WebAIM suggests using [Colorzilla](http://www.colorzilla.com/firefox/) to extract the color value from any page element. Also, [WAVE](http://wave.webaim.org/) can analyze contrast ratios for all page text elements at once. WebAIM offers a [link contrast checker ](https://webaim.org/resources/linkcontrastchecker/?fcolor=0000FF&bcolor=FFFFFF)to evaluate links that are identified with color alone.   [![Link to Colorblindly, a Chrome extension that simulated color blindness in your webs browser](https://blog.bibliocommons.com/hs-fs/hubfs/Blog/Blog%20Posts/2022-05-25%20-%20A11y%20-%206%20-%20Library%202.0%20-%20Can%20Everyone%20See%20Website%20Colors/Blog_A11y-6_Colorblindly-Chrome-Extension.jpg?width=1000&name=Blog_A11y-6_Colorblindly-Chrome-Extension.jpg)](https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg/) There’s even a [Chrome extension you can use to simulate color blindness](https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg/) to get a sense of what people with color blindness would experience on your website, and make improvements.   We know that [color is a powerful tool to capture attention and engage your website visitors](https://99designs.ca/blog/creative-inspiration/psychology-color-web-design/), so you want to make well-thought-out choices for compliant color combinations. Here’s the thing: unless you’ve paid specific attention to color contrast, there’s a good chance your elements will get flagged for color contrast issues. For example, many common user experience design practices, like using light grey to indicate inactive fields, do not pass the color contrast standards guidelines. And, as the [Bureau of Internet Accessibility points out](https://www.boia.org/blog/the-basics-and-importance-of-color-contrast-for-web-accessibility), “It’s important to keep in mind that these designated numbers, just like all WCAG checkpoints, are not arbitrary—they’re specifically designed to help more people access the information on your website.” Improving accessibility is great for everyone.     ---   | [![BiblioCommons Brochure: Providing An Accessible and Inclusive Digital Library Experience](https://blog.bibliocommons.com/hs-fs/hubfs/Resources/Brochures/BiblioCommons_Resource_Brochure_Accessible-and-Inclusive_Thumb.jpg?width=266&name=BiblioCommons_Resource_Brochure_Accessible-and-Inclusive_Thumb.jpg)](https://blog.bibliocommons.com/hubfs/Resources/Brochures/BiblioCommons_Brochure_Providing-An-Accessible-Digital-Library-Experience.pdf)   | **Providing An Accessible and Inclusive Digital Library Experience** It’s up to software vendors and users to create inclusive digital spaces. Find out how we’re doing that in BiblioCommons products. [![See How We're Accessible](https://no-cache.hubspot.com/cta/default/8616836/7af8184a-bf71-469a-b9a0-507c46d3d601.png)](https://cta-redirect.hubspot.com/cta/redirect/8616836/7af8184a-bf71-469a-b9a0-507c46d3d601) | | --- | --- | ---   ## **Make Sure Color Contrast Isn’t an Afterthought** Here are a few tips to put color contrast into practice on your website: - Your branding and website design go hand-in-hand. Create a contrast-compliant color palette that your team can use for accessible design for your branding colors and all materials. You can incorporate those colors into your website to fully support accessibility and branding. Check out this free tool, the [Accessible Color Palette Builder](https://toolness.github.io/accessible-color-matrix/), which helps you create a palette of up to six colors and shows you a matrix of which color combinations meet the WCAG standards. - Remember that all website features need to be visible to be usable. Don’t forget about navigational elements, menus, footnote regions, or any area on your website that your visitors will see or interact with. - It’s good practice to review and test colors in the design phase before going live. This helps prevent re-work and allows more time to make any needed tweaks and revisions. Color contrast has a huge impact on the accessibility of your digital library services, so definitely something to keep top of mind! We’ll dig into more digital accessibility and strategies for overall website performance in our next blog in the series.     ---   #### Sign up to receive the latest in public library topics delivered straight to your inbox!     ---   Tagged: [BiblioWeb](https://blog.bibliocommons.com/blog/tag/biblioweb), [BiblioCore](https://blog.bibliocommons.com/blog/tag/bibliocore), [Accessibility](https://blog.bibliocommons.com/blog/tag/accessibility), [Website Design](https://blog.bibliocommons.com/blog/tag/website-design) Share - [Tweet](https://twitter.com/share) Newer Post [Library 2.0: How to Evaluate the Success of Your Library’s Website](https://blog.bibliocommons.com/blog/library-2.0-how-to-evaluate-the-success-of-your-librarys-website) Older Post [Library 2.0: Tips for Website Compliance to Put into Action Today](https://blog.bibliocommons.com/blog/library-2.0-tips-for-website-compliance-to-put-into-action-today) [![BiblioCommons](https://blog.bibliocommons.com/hubfs/BiblioCon%202023/white-logo.svg)](https://www.bibliocommons.com/) Join the *Love Your Online Library* newsletter to stay up to date on features and releases. Newsletter Sign Up ### Why BiblioCommons? - [Success Stories](https://www.bibliocommons.com/success-stories) - [Libraries We Work With](https://www.bibliocommons.com/libraries-we-work-with) - [Our Story](https://www.bibliocommons.com/our-story) - [News Articles](https://www.bibliocommons.com/news) ### Solutions - [Discovery Layer](https://www.bibliocommons.com/solutions/bibliocore) - [Discovery Layer Add-Ons](https://www.bibliocommons.com/solutions/bibliocore-add-ons) - [Mobile App](https://www.bibliocommons.com/solutions/biblioapps) - [Website Builder](https://www.bibliocommons.com/solutions/biblioweb) - [Events Calendar](https://www.bibliocommons.com/solutions/biblioevents) - [Email Marketing](https://www.bibliocommons.com/solutions/biblioemail) ### Services - [Professional Services](https://www.bibliocommons.com/professional-services) - [Training and Support](https://www.bibliocommons.com/training-and-support) ### Resources - [All Resources](https://www.bibliocommons.com/resources) - [Blog](https://www.bibliocommons.com/blog) - [Webinars](https://www.bibliocommons.com/webinars) - [Newsletters](https://www.bibliocommons.com/newsletters) - [BiblioCon](https://www.bibliocommons.com/bibliocon) [Follow BiblioCommons on Facebook (Opens in a new window)](https://www.facebook.com/BiblioCommons/) [Follow BiblioCommons on X (Opens in a new window)](https://twitter.com/bibliocommons) [Follow BiblioCommons on LinkedIn (Opens in a new window)](https://www.linkedin.com/company/bibliocommons) © 2024 BiblioCommons. All rights reserved. [Privacy and Cookie Policies](https://www.bibliocommons.com/privacy-policy)