Web and Digital
UC San Diego communicates to audiences in a number of ways through web and digital media. Following the guidelines listed here will ensure accessibility and consistency, which are critical in reinforcing our identity in the digital sphere.
Our websites in particular are a major point of communication for both internal and external audiences, making them a prime location for our branding to shine. While showcasing our messaging and visual brand, it is also key to maintain professionalism and consistency. Above all else we must strive to provide an excellent user experience inclusive of accessibility to all platforms.
Logo
The UC San Diego logo must appear in the masthead on all campus websites; this is referred to as the logo header. In most cases, the site name should be in the top left and the campus logo in the top right. The consistent presence of this header allows for the audience to recognize that they are on a page that is part of the greater UC San Diego system. The use of the university logo within the masthead is required for all academic, administrative and research units within UC San Diego.
Academic schools and their divisions, departments and programs may choose to include their official school sub-brand logo in place of the main UC San Diego logo on their website. All other academic, administrative and research units should use the main UC San Diego logo as specified above. Academic divisions, departments and programs are not permitted to use sub-brands other than their school’s sub-brand.
The UC San Diego logo or appropriate unit sub-brand logo should also appear at the top of all designed email communications and on all digital graphics not housed on a branded UC San Diego website or channel.
Accessibility
Accessibility is essential for all UC San Diego websites and digital communications. Ensuring accessibility is not only in accordance with the mission of UC San Diego, it is also the law. For more information and resources related to electronic accessibility, visit accessibility.ucsd.edu.
Ample color contrast is key for legibility. The Web Content Accessibility Guidelines (WCAG 2) recommends a type/background contrast ratio of at least 4.5:1 for normal sized text to meet Level AA requirements. This excludes large text, logotypes and incidental elements, such as those that are not interactive. Large text is defined as bold 18.66px (14 point) or larger, or 24px (18 point) or larger.
To ensure proper color contrast on digital mediums, use only approved color combinations as identified in the interactive chart below.
Accessible Brand Color Combinations
To find an accessible color combination, select a background color and a text color from the list below. Your color contrast results (including the contrast ratio) will appear below the sample text. A green check indicates that the color combination passes Level AA requirements for the specified type size. A red x indicates that the color combination does not pass for the specified type size.
Choose a Background Color
#182B49
#00629B
#FFCD00
#C69214
#00C6D7
#D462AD
#F5F0E6
#F3E500
#FC8900
#6E963B
#000000
#747678
#B6B1A9
#FFFFFF
Choose a Text Color
#182B49
#00629B
#FFCD00
#C69214
#00C6D7
#D462AD
#F5F0E6
#F3E500
#FC8900
#6E963B
#000000
#747678
#B6B1A9
#FFFFFF
Example Output
The Most Far Out Place is a Blank canvas
Some see the stark white expanse as a daunting undertaking. We see it as an invitation, a dare to create something never before seen and feel something never before felt. With 100 + undergraduate majors and graduate programs at our School of Arts and Humanities, there’s no end to the far out places you can go without leaving the page.
Color Contrast Results
This color combination of Background: Navy and Foreground: Yellow passes with a color contrast ratio of 9.45
Contrast Ratio 9.45
Small Text
Large Text
Typography
UC San Diego’s primary typeface, Brix Sans, is available as a webfont from MyFonts.com. If you are unable to purchase a license for Brix, the recommended substitute for web is Roboto. Roboto is available for free through Google Fonts. It is also the font used in the latest campus web templates provided by IT Services. A traditional webfont stack (e.g. Helvetica Neue, Helvetica, Arial, or other sans-serif) is also acceptable as a backup.
Campus Content Management System (CMS)
IT Services offers a free content management tool to manage your campus website. The templates, based on the image-rich ucsd.edu site, feature an easy-to-use modular design and are fully responsive. Learn more about available templates.
