Inclusive Branding

A Guide to Accessibility Best Practices for State Agencies

Can I Use It?

Font Alternatives

Are Our Fonts Accessible?

Our brand fonts are considered accessible and recommended by a wide variety of sources including accessibility vendors, universities, and others. Museo Slab is widely regarded as highly accessible. Trebuchet is reasonably accessible, too, but may not be ideal for all readers in all contexts.

What Fonts Can I Use?

The State’s official brand fonts, including primary and special use fonts, are below. As a state employee, you may occasionally have a need to use a font not mentioned in our brand guidelines. If you do, you can email DPA_IDSCustomerService@state.co.us to explain where and how you want to use what font. A representative from IDS will get back to you with their decision. Pre-approved fonts and contexts can be found below. Use of any other non-brand compliant fonts or alternative fonts in non-approved contexts without pre-approval from IDS is not permitted.

Brand Fonts

• Museo Slab 500 (Primary)
• Trebuchet MS (Secondary)

Special Use Fonts

• Brandon Grotesque
• Museo Slab (700, 300, 100)
• Museo Sans (500)
• Museo (300)
• Open Sans (restrictions apply, see Brand Guidelines)

In general, you may use the following non-brand-compliant fonts in (and only in) the specific contexts listed.

Allowed Non-Compliant Fonts by Context

In general, all resources should use brand-compliant fonts. If you are unable to, due to limitations with the platform you are using or issues with legibility, you may use the following fonts in limited contexts.

No Brand Fonts Available

You Can Use: Sans Serif (Generic), Arial, and Open Sans 

These fonts may be used in email or document body or heading text if a brand-compliant font is unavailable or another compelling need exists.

Multilingual Support Needed

You Can Use: Google Noto (All Variants) 

If you need to communicate in a writing system that is not supported by a State-compliant font, you may use one of these multilingual fonts. In general, Noto should be preferred over other options due to its comprehensiveness and open availability. For multilingual support, Noto may be used for both headings and body text.

• Google Workspace Users: Easily add Noto fonts to Docs and more by opening your font dropdown, clicking More Fonts, and searching for Noto.

Dyslexia-Friendly Fonts Needed

You Can Use: OpenDyslexic, Accessible-DfA, and Similar 

No default approved contexts for these fonts have been established. Please reach out to IDS to discuss your intended use.

You Need to Share Source Code

You Can Use: Courier New, CMU, Consolas, and Source Code Pro 

These fonts may be used when displaying limited code (programming, scripting, markup, styles, and similar) snippets in digital documents (email, web content, or word processing documents) if necessary. Courier variants should be preferred over other options.

Color Variations

In addition to the Primary Color Pallet (please see page 16 of the Brand Guide), more than two dozen color pallets exist to help you represent your department and the State of Colorado. Most colors, when paired with appropriate foreground or background colors, meet or exceed contrast standards. Altered versions of brand colors are not acceptable in any context.

Contrast Tips

If you are unable to configure a platform to use brand-compliant color combinations that result in adequate (or, ideally, enhanced) contrast, please opt for black-on-white rather than using “built-in” or document theme colors that do not align with our brand guidelines. Visit WhoCanUse.com to learn more about specific color combinations.

Email Best Practices

Emails are electronic documents. They are essential for communication. It is vital that you ensure that your emails are accessible and compliant with State branding standards.

Formatting Your Emails

The following best practices, derived from our Formatting Fundamentals, should be applied to every email communication where practical.

• Font size: use a minimum of 12pt. Gmail users, use “normal” size as a minimum. 14 to 16pt font is generally easier for most people to read and should be preferred in email newsletters.
• Font face: Use a brand-approved font (like Trebuchet). Do not use “fancy” or unapproved fonts or styles (like drop caps, highly stylized fonts, or other decorative formats) even in limited contexts (like as a signature, for a signature quote, etc.).
• Font color: Stick to black text on a white background. Do not use colorful text (including red text to warn people about an absence or similar).
• Font alignment: Use left-aligned text unless you’re communicating in an RTL language.
• Structure: Use headings for long emails (if they are available). Gmail user tip: if you copy/paste your verbose content from a structured Google Doc, your headings will come over, too!
• Links: Use descriptive link text that clearly communicates where a link will lead. Avoid using "click here," "learn more," and other generic text.
• Images: ONLY use images that add value (this includes images in your signature). Use alternative text for all images, charts, and other non-text objects.
• Font emphasis: Don’t underline things that aren’t links.
• Tables: Don’t use them unless you’re sharing limited tabular data or have a formatting limitation due to your platform. Most tabular data should be shared via a link or attachment. If you’re working with a table-based newsletter, make sure to add role=”presentation” to your tables.

Your Email Signature

The minimum requirements (layout, content, and accessibility) for your signature can be found in the Digital Guidelines. In addition to these guidelines, please:

• Don’t include your personal photo as a replacement for your typed salutation.
• Don’t include any embedded (in the body of the email) content that is animated or flashing.
• Do not link to non-State (external) resources unless you’ve gotten approval to do so from your supervisor, OIT, or the most appropriate person or agency.

Document Best Practices

All documents must conform to all applicable accessibility and brand standards. Documents include nearly every resource used to convey information in digital or print format. This includes:

• Web Content
• Google Workspace Documents (Docs, Sheets, Slides)
• Microsoft Documents (Word, Excel, PowerPoint, etc.)
• Adobe Documents (Acrobat, InDesign, etc.)
• PDFs
• …. and many others!

Content Standards

• Make sure your content is readable. On the Flesch-Kincaid Reading Ease scale, content reading ease should be as high as possible (60 or higher) and read at a less-than-high-school grade level.
  • Most content should read around an 8th grade level.
  • Some (more complex) content should read near a 10th grade level.
  • Rarely, content including special terms or technical subject matter may not be able to meet recommendations. If that is the case, you should still make the non-technical content of your document as readable as possible.
• Provide Summaries. If your content is long or complex, provide a plain-language summary (or abstract) to help everyone understand the gist.
• Introduce Topics. Headings will help you do this. In paragraphs, start off with a sentence that makes the purpose of the paragraph clear.
• Avoid Acronyms. If you need to use them, make sure to provide their meaning when you introduce them.
• Avoid Uncommon Words. If you need to use them, add a definition (in context if you can).
• Avoid Double Negatives. If you're sharing a positive, stick with more traditional ways of expressing it.
• Avoid (or Limit) Figurative Language. Telling jokes, being sarcastic, or including hyperbole or metaphors is usually bad for readability. If you're a fan of humor, try to be sparing in your written work.

Brand Standards

Please refer to the Brand Guidelines for a complete list of standards (and a lot of guidance!). Different documents may require different formatting. In general:

• Museo Slab 500 should be used for primary (H1) headings.
• Trebuchet should be used for secondary (H2) headings.
• Alternative fonts (please see Font Alternatives on Can I Use It?) may be used for headings and body text in limited contexts.

Formatting Fundamentals

The way that you format your content has a significant impact on how people - regardless of difference or disability - interact with it. In addition to accessibility, your document's formatting can have significant impacts on:

• Credibility. The State of Colorado has brand-standard fonts. Using these provides a familiar and more trustworthy experience to most readers.
• Digestibility. In addition to readability, fonts can impact how - and whether - people retain what they've read.
• Feelings. Fonts and colors evoke emotions. Adhering to brand standards and accessibility requirements will help to keep things positive, enhance integrity, and maintain continuity.

How Content Looks

Font Sizes

• Use a minimum 11-12 pt font throughout your document.
• Use consistent and larger font sizes for headings. Always use built-in formatting tools in your word processor or editor to add your headings. Simply changing font sizes does not create headings.

Cases

• Use standard or sentence case for body text and title case for headings.
• Use consistent cases throughout your document. Try not to “mix and match” cases for the same kind of content.
• Try not to use UPPER CASE (ALL CAPS) - or small caps! - except in very limited scenarios. Headings in documents should rarely be in uppercase. Uppercase words are harder to read.

Justification

• Use left-aligned justification for most text.
• Use centered text only when necessary.
• Avoid justified or right-aligned text (in English documents). Justified text has inconsistent spacing and is really hard for some people to read.

Line Height & Letter Spacing

• Use a minimum line height of 1.5 throughout your document.
• Use standard letter spacing. This should be at least 0.12 times the font size.
• Use built-in line and paragraph spacing tools, not repeated blank characters (like tab, enter, or space) to create white space.
• Don't use repeated characters (like tab, new line, or space) to create white space. Instead, use built-in tools like line and paragraph spacing, page breaks, and column formatting.

Fonts (Typography)

The font that you use can impact legibility, perception, letter spacing, and more.

• Use brand-approved fonts in the appropriate contexts.
• Avoid stylized ("fancy") fonts.
• Do not underline things that aren’t links.

Color

• Never rely ONLY on color to convey meaning. Common examples include making "important" text red and making "less important" text gray.
• Always ensure there is adequate (high) contrast between text and its background. Black text on a white background is always the safe choice.

Links

• Use descriptive link text that clearly communicates where a link will lead. Avoid using "click here," "learn more," and other generic text.
• Unless content is intended for print, don’t include the full URL in link text. If you need to include a URL in your document, consider using a short link (see below for more info).

Short Links

• Do not use “url shortener” services you find on the internet. If you must, never use a third-party-shortened URL in a PDF document. These URLs can be “hijacked”. You don’t want to be responsible for sending people to malicious websites.
• Colorado.gov content managers can create short links. Short links can go to any resource (like a state.co.us website, a page on the same site, or even a document). If you’re doing a print campaign and need an easy-to-read URL, you can set up a redirect from a shorter URL to your “real” page. As an example, https://dhr.colorado.gov/MyStep goes to https://dhr.colorado.gov/state-hr-professionals/compensation/step-pay-program-for-state-of-colorado-employees.

How Content is Organized

Text (and other content elements) should have a standard layout, be structured, and be presented in a logical order. All modern word processors include built-in features to help you identify special content elements. Using structure appropriately can not only improve navigability (letting people get to the content they need more quickly), but can also make content more readable.

• Page Layout. Standard word processing documents (like Word and Google Docs) should have standard page dimensions, adequate white space, and reasonable margins.
• Structure (sometimes called Content Layout). Structure (like headings, lists, and tables) makes documents more navigable, readable, and valuable. All modern word processors have structural tools built in.
• Logical Order. Content should always be arranged in a way that should make sense for most people.

Headings

• Most documents include a broad topic and specific details (like sub topics). Without headings, areas of content can be difficult to identify.
• Every document should have one Level 1 (Heading 1) Heading. Your heading 1 should be a short, high-level description of your document.
• Some documents have enough content to warrant the use of additional heading levels. Headings always go in order from largest heading (1) to smallest heading (6). Headings should usually not go past level 6.
• Headings should be clear and concise.
• Headings should always be added using built-in tools. Making a line of text really really big so that it looks like a heading doesn't actually turn it into a heading. Always use your text formatting menu to select heading levels.

Headers & Footers

Keep important content in the document’s body. Avoid adding critical content in the header or footer regions of a document. Appropriate footer and header elements include things like: page numbers, document revision details, and similar. If you must include vital information (like a notice of confidentiality, due date, etc.) in the header or footer, make sure to duplicate the information in the body of your document.

Lists

Lists group like things. As structural elements, they play an important role in helping to organize your content. They can also make content more readable. Usually, lists include 3 or more related items.

Lists can be used to break up long sentences, identify a sequence (like steps in a process), and be used to help people identify important concepts. To put that another way...

Lists Can

• Be used to break up long sentences. If you have a "run on" list of things, it might be easier for your readers to see it presented as an actual list. If you use a list, you can then expand on the terms or ideas you are talking about.
• Identify a sequence. Steps in processes are important. Ordered (numbered) lists can help you share them more effectively.
• Identify important concepts. Lists are great tools for highlighting things like terms (and providing definitions), giving summary data, and much more.

Tables

Tables (often called data tables) are intended to be used to display tabular data in a grid or matrix. Tables should never* be used for layout purposes. Tables should:

• Be used to show logical relationships between data. This means having clearly defined header rows, columns, or both.
• Be simple when possible. Complex tables (with merged cells, split cells, or nested tables) should be avoided.
• Not include empty or blank cells for formatting.

Tables for Layout

We just said tables should never be used for layout. There are some exceptions. You can use a presentational table if it is necessary. Not all platforms have styling tools that make it possible to lay content out well without tables. If you need to use a table for layout:

• Make sure your content order makes sense. If your table didn't exist, would your content still "flow" in a logical way? Data will be read from the top left cell to the bottom right cell. Your content needs to make sense if read in that order. To dive deeper into this requirement, check out Linearization on WebAim.org.
• Keep the table simple. Use as few cells as you can.
• Label the table as presentational if possible. Some platforms support this, some don't. If you're using a table in an email newsletter, as an example, you can add role="presentation" to your table via source code editing (<table role="presentational">.
• Remove table tags (for presentational tables only) in PDFs in favor of text elements. If you do this, pay extra close attention to reading order.

Media & More

Images

• Only use images that add value and represent our brand.
• Make sure your images are accessible.
  • Text: If you must include text, your text should have very high contrast against the background. Text should also be as big as possible in your design.
  • Graphs & Infographics: Contrast should be high between neighboring elements, like bars on a graph.
  • Don’t rely on color alone. If you’re conveying meaning with color, add a distinct pattern (or icon or similar) so that meaning is conveyed. Include a key, too!
• Always add alternative text for images, charts, and non-text objects that are not purely decorative. Alternative text should be brief but descriptive. It should describe the key parts of an image so that whatever is being visually conveyed is easily - and equally! - understandable in text.
  • For non-complex images, try to keep alternative text to around 150 characters or less.
  • Complex image? Describe it with words in close proximity to your image. For more strategies, check out the W3C’s Complex Images guide.
  • Check out the W3C’s Alt Decision Tree for guidance on when to add alternative text (hint: it is almost always).
  • Explore the GSA’s guide to Authoring Meaningful Alternative Text for tips on language and more.

Share Your Thoughts

Do you have a best practice to share that you think could help your colleagues across the State? Do we need to tweak something in this guide? Please let us know! For general brand guidance, check out the Toolbox & Brand Guidelines or reach out to DPA_IDSCustomerService@state.co.us.

Send in a Best Practice Suggestion (Google Form)

Need Accessibility Guidance?

• General Info - For information about Colorado’s Technology Accessibility Rules, and more best practice information, explore OIT’s Guide to Accessible Web Services.
• Document Help - Please reach out to your agency’s document remediation specialist or digital accessibility team for assistance with your document.