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
Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
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
Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos.
Quod appareat id eos, noster malorum et mea.
Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos.
Quod appareat id eos, noster malorum et mea.
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.
Navy (#052049)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
Light Navy (#506380)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
Interactive Teal (#058488)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
Purple (#716FB2)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
Interactive Green (#6EA400)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
Interactive Red (#EB093C)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
Interactive Blue (#0071AD)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
Black (#000000)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
Interactive Orange (#F26D04)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
Dark Gray (#4D4D4D)
24px large text
19px bold text
16px normal text
24px large text
19px bold text
16px normal text
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.
Gray (#9BA6B6)
24px large text
19px bold text
16px normal text
Teal (#18A3AC)
24px large text
19px bold text
16px normal text
Green (#90BD31)
24px large text
19px bold text
16px normal text
Purple (#716FB2)
24px large text
19px bold text
16px normal text
Blue (#178CCB)
24px large text
19px bold text
16px normal text
Orange (#F48024)
24px large text
19px bold text
16px normal text
Red (#EC1848)
24px large text
19px bold text
16px normal text
Yellow (#FFDD00)
24px large text
19px bold text
16px normal text