Digital Colors

In digital environments, color plays a big role in accessibility  –  the greater the contrast, the better the readability. UCSF offers edited color formulas to our master palette for optimal levels of readability across interactive deliverables.

Our interactive/digital color formulas have been created to provide opportunities for greater contrast to meet W3C’s Web Content Accessibility Guideline (WCAG) AA level color contrast standards.

The following interactive color formulas should only be used in specific interactive situations, detailed below.

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

UCSF digital color swatches

* = indicates color specific to interactive use

UCSF Secondary Palette for Digital/Interactive Use

UCSF secondary digital color swatches

* = indicates color specific to interactive use

UCSF Neutral Palette

UCSF neutral digital color swatches

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 (#007CBE)

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