Vision 2036

Logo Usage Guidelines

The Vision 2036 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 Vision 2036 Logo

This is the Vision 2036 logo, It is the primary graphic device and should be the first choice when choosing a graphic element to represent the brand.

The Alameda County Human Resources Logo – Variations

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

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.

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 28% the height of the symbol, except when stacked vertically where it is 14% the height of the symbol.

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

Color

The symbol uses 8 colors. The three colors highlighted below are the primary accent colors that can be applied across communications to uphold brand consistency.

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 Vision 2036 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:

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?