Digital Color Usage

The UCSF color palette has been customized for print and digital applications. In general terms, the medium of a deliverable will determine which color specification to use  – although elements such as logos or logo expressions should always retain the master palette color specifications. For projects that span both print and digital processes, color formulas and usage should be customized with the final use in mind.

	Use Regular Color Formulas	Use Digital Color Formulas
All logos and lock-ups	X
Editorial expressions (including those that appear within web graphics)	X
Advertising that appears on digital channels owned outside UCSF (e.g. ads running on outdoor billboards, ads in news media websites)	X
PPT presentations for large display	X
PPT presentations for digital download		X
PDFs for printout	X
PDFs for website viewing or digital download		X
Fact sheets	X
Booths or printed displays/standing graphics	X
Social media avatars		X
Posters or flyers	X
Website design elements		X
Website graphics		X
Web promos or banners		X
Electronic newsletters or announcements		X
Apps		X
Digital display graphics/kiosks		X

 

Color Contrast Ratios

Following WCAG guidance, the interactive color formulas for the UCSF color palette conform to an AA level contrast standard, which requires that color combinations meet a minimum contrast ratio for text. Below are guidelines and best practices to meet the required contrast with interactive/digital text.

Normal Text

Normal Text is the main body content on a website or other digital application, typically 14 to 18px. This text requires a 4.5:1 contrast ratio. Type can either be on a white background or knocked out of a solid color. Only certain colors from our interactive color formulas achieve a 4.5:1 contrast ratio. For lighter colors, such as yellow and neutrals, use black text to achieve a 4.5:1 ratio.

Large Text

Larger text in digital applications - defined as 19px (1.2em) bold or 24px (1.5em) regular or larger - only requires a 3:1 contrast ratio. Type can either be on a white background or knocked out of a solid color. Some of our interactive color formulas, such as green and orange, can only achieve a 3:1 contrast ratio and should not be used with normal-sized text.

Checking Contrast

When designing for digital applications, there are a number of online tools where you can check text-to-background contrast. WebAIM has an easy-to-use contrast checker that shows compliance with WCAG AA level accessibility.

 

Digital Colors

Hyperlinks

The universal hyperlink color for UCSF websites is #0071AD. This color not only has a strong contrast against white backgrounds, but it also passes contrast requirements for tinted backgrounds that are common in breakout boxes or other featured website areas. Before designing tinted backgrounds for text, be sure to check that the contrast between the text and background is at least 4.5:1 for Normal Text and 3:1 for Large Text.

Do not use the universal hyperlink color (#0071AD) against backgrounds using a dark primary color, such as website footers. When hyperlinking in these areas, the text should be white or light gray.

Digital Color Palette

The interactive color formulas provide five additional darker versions of UCSF’s color palette to meet required contrast ratios. All other specifications for UCSF brand colors, tints and neutrals remain unchanged. All of the colors and tints shown here conform to the WCAG AA level contrast standard, which requires that the color combination meets a minimum contrast ratio.

Normal Text = 4.5:1 contrast
Large Text = 3:1 contrast
Each color formula includes relevant contrast ratio to white (#FFFFFF) or to black (#000000).

UCSF Primary Palette for Digital/Interactive Use

* = indicates color specific to interactive use

UCSF Secondary Palette for Digital/Interactive Use

* = indicates color specific to interactive use

UCSF Neutral Palette

See below to copy HEX codes of digital colors.

Using White Text

The examples below show which type sizes and styles meet the minimum contrast requirements for WCAG AA level accessibility when knocked out of a solid color or on a white background. Please note that interactive green and interactive orange colors only work for Large Text  – 19px (1.2em) bold or 24px (1.5em) regular or larger.

 

Using Black Text

A large number of palette colors and tints are WCAG AA level compliant when used as a background for black text. The following examples show which ones meet the minimum contrast requirements for accessibility.