Human Resource Services | Alameda County Design

Logo Usage Guidelines

The Alameda County Human Resource Services logo is an important expression of its brand identity. By applying the wordmark and the symbol in a consistent manner, the recognition and visibility of the brand is strengthened. These few simple rules will help you use the logo, wordmark, and symbol to communicate the brand most effectively.

Logo Anatomy

The logo consists of a symbol and a wordmark. The symbol and the wordmark can be used together or the symbol can be used independently.

The Alameda County Human Resources Logo

This is the Alameda County Human Resource Services logo, It is the primary graphic device and should be the first choice when choosing a graphic element to represent the brand.

Primary – Logo with tagline

Primary – Logo without tagline

Minimum Height
Digital: 40 pixels
Print: .5 inches

The Alameda County Human Resources Logo – Variations

These are variations of the logo that can be used when space is limited.

Tertiary – Stacked Logo

Minimum Height
Digital: 40 pixels
Print: .5 inches

Tertiary – Symbol Only

Minimum Height
Digital: 25 pixels
Print: .3 inches

Logo Clearance

When using the logo in a design or placing it next to other visual elements, it should have plenty of room to breathe. This maximizes the visibility & impact of the logo. The minimum amount of space that the logo must have on all sides is ½ the height of the symbol.

For example: If the logo is sized 60px tall, there should be at least 30px of clearspace on all sides.

If symbol is used alone, the minimum amount of space on all sides is ¼ the height of the symbol.

For example: If the logo is sized 60px tall, there should be at least 15px of clearspace on all sides.

Logo Margins

Do not alter the spacing between the symbol and the wordmark. The distance between the symbol and the wordmark is 1/5 the height of the symbol.

For example:If the symbol is sized 100px tall, there should be exactly 20px between the symbol and the wordmark.

Color

acHRS Blue is a key signifier of the brand and should be applied across all communications to uphold brand consistency. The symbol uses 8 colors.

acHRS Blue

#2e398d
CMYK 67, 60, 0, 45

#2856a7
CMYK 76, 49, 0, 35

#3bb54a
CMYK 67, 0, 59, 29

#7fc356
CMYK 35, 0, 56, 24

#f89622
CMYK 0, 40, 86, 3

#e75364
CMYK 0, 64, 57, 9

#ec2027
CMYK 0, 86, 83, 7

#9d1f60
CMYK 0, 80, 39, 38

Incorrect Usage of Logo

Do not reverse logo.
Do not apply other colors.
Do not rotate any single part of the logo.
Do not stretch or alter the proportions of the logo.
Do not change the arrangement of the logo.
Do not apply gradients, shadows, or other effects.

Inverted

These versions are to be used on black backgrounds. The same clearance, margin and usage rules apply.

Black and White Logos

These should only be used when it is not possible to use color.

#000000
CMYK 0, 0, 0, 100

#5c5e5e
CMYK 0, 0, 0, 63

#ffffff
CMYK 0, 0, 0, 0

#cccccc
CMYK 0, 0, 0, 20

Digital Accessibility

Digital accessibility involves designing and building websites, tools and technologies that allow access to all visitors, no matter what their abilities or disabilities.

ITD follows the Web Content Accessibility Guidelines (WCAG) 2.1, which are international standards that define how to make web content more accessible. WCAG only requires logos to have text alternatives. However, even though logos are exempt from other WCAG guidelines, ITD still strives to create designs that are accessible to all users, including those with disabilities.

Our goal with accessibility isn’t simply WCAG conformance but to present the best possible experience for users.

The Alameda County Human Resource Services logo follows these accessibility guidelines:

The wordmark exceeds the minimum color contrast ratio of 3:1
The wordmark uses a sans-serif font which has a slightly higher readability than serif fonts
The logo mark is not too visually complex

When using logos digitally make sure to include an alternate text attribute:

Alt Text
To comply with the WCAG guidelines always provide text-alternatives when using any logo digitally.

For example:

Alameda County Human Resource Services logo, Our community. Your purpose.

alt=”Alameda County Human Resource Services logo, Our community. Your purpose.”

Logos with a hyperlink
Logos often function as hyperlinks, following the best practice of linking to the homepage. It is important to use appropriate markup in the html to make it accessible. The link element (aka anchor tag) supports the function of naming from child content. The logo image is the child of the link, and so the alt text of the logo will become the text for the link. To be a meaningful link, the alt text should describe where the link will go.

For example:

If you are linking the logo in an older application or system that will not allow setting or changing the alt text of the logo image, you can fall back to using an aria-label attribute on the anchor tag. The aria-label attribute on an anchor tag will hide the child content (the image) from assistive technology and the aria-label value will become the text for the link.

For example:

If adding an aria-label is not possible, we suggest that you don’t place a link on the logo, and instead provide a text link.

Need Help? Have Questions?

Email ITD Web