Updated September 25, 2019.
The key words "must", "must not", "required", "shall", "shall not", "should", "should not", "recommended", "may", and "optional" in this document are to be interpreted as described in RFC 2119.
- I. Policies and Statements
- II. Institutional Branding
- III. Accessibility
- IV. Web Technologies
- V. Pattern Library
I. Policies and Statements
University-wide polices and practices for the use of all University of Hawaiʻi website resources are intended to define and provide protection, access and guidelines to supplement existing laws and regulations. View the full Executive Policy, EP 2.210, Use and Management of Information Technology Resources.
A. Privacy, Usage, and Disclaimer Policies
Websites which do not publish their own disclaimers may link or refer to the UH Hilo Website Privacy, Usage, and Disclaimer Policies.
B. EEO/AA Policy Statement
Websites should indicate that UH Hilo is an Equal Employment Opportunity/Affirmative Action institution. The following statement with link to the UH Hilo EEO/AA website is recommended.
UH Hilo is an Equal Employment Opportunity/Affirmative Action Institution.
II. Institutional Branding
Official academic departments, divisions, and schools, and core university functional units must have a look consistent with the main UH Hilo website. Visitors should be able to instantly tell, when landing on any page within the website, that they are on a UH Hilo property.
Website designs shall have a significant red presence in the header with a UH Hilo logo hyperlinked to the UH Hilo homepage (hilo.hawaii.edu) in a consistent position, above the fold, across all of the site’s pages.
See the Pattern Library below for specific colors used.
This requirement may be relaxed for affiliate and grant programs.
UH units and affiliated units must include a link to the UH Hilo home page (
https://hilo.hawaii.edu/) in their site template as either a linked UH Hilo logo or text.
A. Institution Name
The University shall be referred to with one of the following names:
- University of Hawaiʻi at Hilo (the ʻokina is optional but preferred)
- UH Hilo
- Kulanui O Hawaiʻi Ma Hilo
Improper names include “UH-Hilo,” “UHH,” and “University of Hawaii-Hilo” and shall not be used.
There are only two official logo groups for UH Hilo: the seal with wordmark set and the Vulcan Athletics set.
See the UH System Graphics Standards for the seal logo downloads and usage requirements.
Contact the Vulcan Athletics Sports Information Director for logos and usage of the Vulcan Athletics logos.
Images, including logos, must have appropriate alt text (
alt="University of Hawaii at Hilo"). The word “logo” shall not be used in a logo’s alt text. E.g.,
alt="University of Hawaii at Hilo Vulcan Athletics" is the proper alt text for the Vulcans logo, not
Logos may only be scaled proportionally. Logos may not be cropped, truncated, stylized, or otherwise distorted unless being used purely as a design element and after other branding requirements are met.
C. Secondary Marks
As stated in the UH System Graphics Standards,
Individual unit logos are not allowed. Although the drive to “have our own identity” is pervasive, proliferation of such marks dilutes the university’s integrity and creates confusion on the part of the public.
This doesn’t mean everything has to look alike. Schools, colleges, departments and programs may develop design themes and elements, including use of color and graphic images, to provide continuity to their print and electronic communication. Media Production, email@example.com or (808) 956-8856, can assist units in developing and implementing appropriate design elements in conjunction with the official seal and/or signature.
This means that the UH Hilo logo should be the primary identifying mark on each website. Secondary graphic elements can supplement the design and should not replace or overshadow the UH Hilo logo.
See the UH System Style Guide for a complete list, but here are a few highlights and additions.
|login (as a noun)||log in|
|log in (as a verb)||login|
|log out (as a verb)||logout|
|sign up (as a verb)||sign-up; signup|
|UH Hilo||UHH; UH-Hilo|
|University of Hawaiʻi at Hilo||University of Hawaiʻi-Hilo; University of Hawaiʻi, Hilo|
Normal text shall not be presented in all caps except abbreviations and when appropriately honoring brand names.
1. Hawaiian Language
Use of proper diacritical marks and letters for Hawaiian words is strongly recommended, particularly in graphic elements. It is recognized that not all technology, such as screen readers, are compatible with extended unicode characters, often the ʻokina, so alternatives may be used or diacritics dropped when greater compatibility is warranted.
While UTF-8 encoding should be used along with using the actual UTF-8 encoded characters or HTML entities, alternatives may be used.
2. Website URLs
Website URLs should not be used at the link text unless explicitly stating the URL. Link text should instead contain the context of the link so the visitor knows what the link leads to without the surrounding text. This is particularly helpful for people using accessibility technologies. Also, when read aloud, such as by screen readers, URLs are very difficult to understand.
The correct full URL for UH Hilo is
https://hilo.hawaii.edu/. The old URL,
http://www.uhh.hawaii.edu/ shall not be used, nor shall
http://www.hilo.hawaii.edu/ be used, but the URL may be shortened to just
hilo.hawaii.edu for legibility.
All UH Hilo content must adhere to the requirements set forth in Section 508 of the Rehabilitation Act. You may refer to this helpful WebAIM Section 508 Checklist. Note that on January 18, 2017, Section 508 adopted the WCAG 2.0 levels A and AA standards, henceforth referred to as WCAG2. The Section 508 Standards may sometimes be referred to as A.D.A. (Americans with Disabilities Act) for websites, but this is technically inaccurate.
See Meeting Accessibility Requirements for Web Pages for details on why and how to meet the required standards.
Some of the most common compliance issues are highlighted below.
- All non-text content, such as images or photos, must have a text equivalent.
- Videos and live audio with must either have synchronized captions, a time-based transcript, or similar alternatives such as a sign language interpreter in the video. Captions must match the actual content and not the script as performances often vary from scripts.
- Information cannot be conveyed solely with color. This includes hyperlinks; keep the underline as an indicator other than link color (and don’t underline non-links).
- Text must also have a minimum contrast ratio with its background.
- Repetitive navigation elements must be skippable.
IV. Web Technologies
Pages should use the HTML5 Doctype and UTF-8 encoding.
Styling shall be done with CSS and pages should be responsive (natively supported by multiple screen widths).
B. HTML Tags
1. Heading Tags
Pages shall be coded using proper HTML hierarchy (
H6). In most cases, the content of the first
H1 should be the same as the content of the page
Headings should not end with a colon
In accordance to the HTML5 specification, the
i tag should be used in the following cases.
ielement represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
For example, when including non-English words or phrases in an English sentence, use the
Welcome to our ʻohana (family).
Images should be optimized using the following methods and formats where applicable.
- JPG for photos (progressive scan format)
- SVG for vector graphics
- PNG for images where image quality is paramount (and SVG is inappropriate)
- GIF for animations (used sparingly)
Some recommended opitmization tools are:
Pages shall be coded with WAI-ARIA landmark roles roles when semantic HTML5 tags with built-in landmarks are not used.
role="banner"for the header unless the
<header>tag is used
role="complementary"for sidebar/aside content unless the
<aside>tag is used
role="contentinfo"for the footer unless the
<footer>tag is used
role="form"for non-search forms
role="main"for the main content area unless the
<main>tag is used
role="navigation"for navigation unless the
<nav>tag is used (include skip links per accessibility recommendations)
role="search"for search forms
D. Toggled Menus
Studies show that utilizing icon-only menu triggers such as the hamburger button decrease usability and engagement and should be avoided; or, at the very least, include the word “Menu” on or next to it.
V. Pattern Library
A. Website Colors
Use the contrasting color as the background or text color for the highest contrast ratio, as required for WCAG 2 standards.
||UH Hilo Red, PMS 485C||white (5:1)|
||Alternative UH Hilo Red||white (7:1)|
||Dark Red||white (13:1)|
||Dark gray for backgrounds||white (12:1)|
||Light tan/alternate tan||black (20:1)|
||Light tan for element borders||black (18:1)|
||Light tan for element backgrounds||black (20:1)|
||Alice blue for alternating table rows||black (19:1)|
||Pale canary yellow for highlighted table rows||black (20:1)|
||Blue element borders||black (10:1)|
||Light blue for element backgrounds||black (18:1)|
1. Notification Colors
||.notice background||black (13:1)|
||.notice border||white (21:1)|
||.notice.info background||black (18:1)|
||.notice.info border||black (7:1)|
||.notice.error background||black (15:1)|
||.notice.error border||white (7:1)|
||.notice.success background||black (18:1)|
||.notice.success border||black (7:1)|
||.notice.warning background||black (19:1)|
||.notice.warning border||black (12:1)|
B. Website Templates
Several website templates are available for use. Please contact the UH Hilo Web Office for more information.