For Content Producers
Accessibility Guidelines
On this page:
Discover:
Ensuring Colt content is accessible to everyone
To ensure published content, emails and any downloadable documents are as accessible as possible to staff and customers, the following guides contain information about both the best approaches to creating content and how to make sure that formats such as PDFs or Data Sheets are as accessible as possible.
For all content whether it is published as a web page, in an email or downloadable document it is important to stay true to Colt’s brand guidelines. Ensure these guidelines are implemented inclusively, by following the accessibility guidance for the use of Typography and Colour, and How to write alternative text, which has sections on the use of Colt logos, stream graphics and icons.
Downloadable guides:
On this page:
1. Writing for accessibility
Accessibility can be enhanced through best practices in writing. One important area is what we write as the alternative to Colt’s images.
The Colt How to Write Alternative Text guide explains what the best practices are and how easy it is to do.
Other practices can also have a very positive impact on inclusive user experiences and the following short training videos from Microsoft will help anyone involved in the creation of content or documents ensure their output is as inclusive as possible.
Testing your documents
To ensure that you have created an accessible document, there are two approaches you can use which should be used in combination. The first is to use the Microsoft Accessibility Checker, which will help you spot any issues with Word, Excel or PowerPoint.
- To check the accessibility of the text against the colours, use the Microsoft Accessibility Checker found in the Tools menu.
- The Accessibility Checker will flag any potential accessibility issues including colour contrast. A good way of making sure these don't continue to occur is to check the box "Keep accessibility checker running while I work".
- If your content includes any charts, maps, graphs (or anything where being able to identify colour is important to understand a key), make sure the colours are colour-blind safe, or even better, ensure the content is understandable in monochrome.
To simulate the experience of colour blindness you can use one of the following free phone applications. Point it at your screen or printed document, and see if you can still understand the information presented, especially in infographics.
2. Alternative text for images in documents
Images can be made accessible through the provision of Alternative Text, which is often referred to as “Alt Text” or “Image Description”.
These descriptions should be added by the content producer or whoever chose the image on the page, and the Alt Text should follow one simple objective rule.
An image’s Alternative Text should convey the purpose behind the use of the image.
For some images such as maps or bar charts, describing everything that the image conveys can be too much information so the description should be a summary, such as a being the main point chart proves. For the rest of the information it should also be conveyed by the main copy on the page. For example a map that conveys a particular journey, the detailed directions written from the perspective of someone who can’t see the image should be included on the page.
Graphics such as Icons or logos are more functional and the description should focus on the function only. Icon descriptions should just convey what the icon represents and a logo should just say the name of the logo. Words such as “An image of…”, “ A picture of…” or “... logo”, are superfluous, and should be avoided.
To add a description to a document right click on the image and select 'View Alt text' from the options.
Colt Stream graphics
Abstract graphics or textures such as the Colt Stream Graphics are there for aesthetic or brand identity purposes. Because these are not key to navigation or could be considered as core content, they do not need an alternative. If there is an option, simply mark them as “Decorative”.
How to write good descriptions
After choosing an image, ask the following questions to help determine what should be included in the description:
3. Colours
Every branding system can be accessible, but that is not just down to the system itself, but also how its rules are implemented. The following guidance will help maximise how inclusive the Colt Brand colours can be.
Colt's brand colours
Colt's branding system is aesthetically striking and unique in the marketplace, which means that Colt content can be easily identifiable, which is a great starting point for cognitive inclusion.
Colour is a fundamental part of the Colt brand, and colour is perceived mostly slightly (and sometimes significantly) differently by different people. It is important however to remember that many people cannot differentiate between some hues at all. About 1 in 18 men and 1 in every 200 women have significant issues with colour perception.
Ensuring that content designs are not dependant on accurate colour perception means that no one will be excluded due to how Colt's brand palette is used. Judicious use of colour, however, can increase accessibility for some users and improve usability for many. So rather than avoiding colour-based meaning, ensure that when colour is used as a visual cue, there are alternative non-colour based visual cues provided too. This is often referred to in design and engineering as "redundancy".
What is color blindness?
The red-green colour vision deficiency (of which there are four distinct types and a multitude of varying degrees) is the most usual form of so-called colour blindness disorders.
Blue-yellow colour perception deficiency is a lot less common, and monochromatic colour blindness is rarer still. There are also conditions such as Synaesthesia, Glaucoma, Irlen's Syndrome and some people with ASC can create issues for people processing colours.
If you are not colour-blind yourself, you can test a web page or a document using a colour blindness simulator app on your phone. See our section above for details of how to download this.
Using Colt's brand colours - contrast
Being able to see text is obviously a requirement to being able to read it. This is true for other elements such as forms and other kinds of visual content such as icons, figures and graphs. Displaying these with insufficient contrast can make them inaccessible to people with vision deficiencies. Contrast ratios range from 1:1, meaning no difference between the colours, to 21:1 meaning the greatest possible contrast.
The WCAG defines exactly how much contrast should exist for text to be considered accessible to readers.
Small text should have a contrast ratio of 4.5:1 or higher, large text should be 3:1 or higher. Note: text that is classified as "large" if it is 18pt (or 24px) in size when not bold, and 14pt (19px) in size when it is bold.
Using Colt's colours
In Colt's branding system, there are a wide range of colours, used for text or backgrounds, and these vary in how accessible they can be. The following example colour combinations will ensure that text is as legible as possible:
#00D7BD
Colt Teal
Colt's main primary colour, as described in our Brand Guidelines.
This fails testing for usage in body copy, headings and graphical text when used against a white background. In its current form, it is not recommended to use for anything other than logos and stream graphics. With adjustment, it could be used for graphical elements in infographics and headings, but the tolerance for this would need to be explored to see how much it would need to be changed to fit these purposes. It is recommended that it is not used for sub-headings, body copy, labelling in graphics or link text.
#18A08D
Colt Teal Alt
To be used as either Link or Heading text, on a white background.
#107C74
Colt Dusk Alt
Is high enough contrast for any use.
#0099FF
Colt Blue
Either as a text colour or a background colour with white text, should only be used for Headings.
#50009B
Colt Purple
Is high enough contrast for any use.
#00A59B
Colt Dusk
Either as a text colour or a background colour with white text and should only be used for Headings.
#000000
Colt Black
Is high enough contrast for any use.
Notes on other colours
#FFC43D
Colt Yellow
Can be used as a background colour with black text.
#EF476F
Colt Pink
Can be used as a background colour with white text, should only be used for Headings.
#F5F5F5
Colt Ash
Is OK as a background colour for black, charcoal or purple text.
When using a White background, the following colour combinations are colour contrast compliant, and avoid flourescence or colour blindness issues.
Acceptable colour combinations when using a White or Ash background
When using a White background, the following colour combinations are colour contrast compliant, and avoid flourescence or colour blindness issues.
Colt Charcoal, Colt Black
For Copy
(All text sizes acceptable)
Contrast 9:1, 21:1
Colt Purple, Colt Dusk
For Links
(All text sizes acceptable)
Contrast 10.6:1, 3.1:1
Colt Charcoal, Colt Pink
For Buttons
(All text sizes acceptable)
Contrast 8.2:1, 3.6:1
Colour combinations with poor contrasts to avoid
The following colour combinations (when used with text against a background) have been found to provide too poor a contrast to be considered. These however still can be used when in combination with a high contrast colour e.g. as secondary stream or infographic colours against a white background.
#FFC43D, #0095AB
Colt Yellow & Colt Dusk
#50009B, #0095AB
Colt Purple & Colt Dusk
#EF476F, #0095AB
Colt Pink & Colt Dusk
#00D7BD, #FFC43D
Colt Teal & Colt Yellow
#00D7BD, #0095AB
Colt Teal & Colt Yellow
#00D7BD, #50009B
Colt Teal & Colt Dusk
4. Creating accessible data sheets
To ensure that as many customers as possible can access Colt’s datasheets, the following guidance utilises the Colt Branding system along with best accessibility practices in document design.
To ensure that as many customers as possible can access Colt’s datasheets, the following guidance utilises the Colt Branding system along with best accessibility practices in document design.
PDFs can either be produced using InDesign, Acrobat or Word. The most accessible method is creating them in Word and then exporting them as PDFs, but essentially the techniques are the same across each approach.
Both Adobe and Microsoft provide Accessibility Checkers, and the guidance for their use is at the end of this document.There are four main considerations; branding, structure, images and metadata, that, if applied successfully will ensure the information is accessible.
These also a need to follow the best practices for outputting accessible documents that are covered in these downloadable guides:
For any projects that use InDesign to create accessible documents, the Adobe InDesign Accessibility Guidelines will help, however the most successful way of delivering accessible documents is either through Word or Acrobat.
If you are creating PDFs using Word, this guide will ensure you export the Word file without losing any of the accessibility features.
5. Creating accessible forms (in Word or Excel)
Offline forms can be problematic, and the most accessible format for a form is HTML. There is guidance for form interactions in the Colt Accessibility Guidelines, and further best practices for form components and validation can be found in the Colt Component Accessibility Guidelines.
The most user-friendly downloadable forms are writable PDFs. These are not as usable as HTML forms, but if HTML is not an option, then they are the only alternative that can be made to work, and the best way to create these is through a combination of MS Word and Adobe Acrobat.
Forms can also be created in Excel and these should follow the Excel Accessibility Best Practices below.
Creating an accessible Word document
If you're looking for more general advice on Word documents, or are looking to insert a form into a Word document, view the Microsoft creating an accessible Word document guide, or the downloadable Colt Accessibility for Word Guide.
For this to work, you'll need the 'Developer' tab to be accessible.
Creating accessible basic elements of a form
The following are a quick reference to 'How-to' accessibility guides for the creation of the basic elements of a form. Following these is a guidance on how to take your form, and turn it into an accessible PDF.
Converting the accessible MS Word form to Adobe Acrobat
To create an accessible form in Adobe Acrobat it is easier to build it in MS Word first rather than use Acrobat directly, although this is possible.
Accessible Excel forms
Before you start creating a form in Excel, ensure you are using an Excel Spreadsheet Accessibility Template, and follow the best practices for creating Accessible Excel sheets.
6. Creating accessible process documents
Flowcharts guide readers through a complex process in a visual manner. These visuals can help users make better decisions about a complex issue, making flowcharts a valuable communication tool.
However, like any image published, without a text description and a textual equivalent these complex images are completely inaccessible for anyone who is vision impaired or blind. Additionally, some people prefer to read through processes as opposed to reviewing a visual representation of a process or require both the text and visual to understand a process.
To make the description of a process more accessible to everyone, the following considerations are needed.
7. Typography
The Colt Brand includes a suite of fonts that are recommended for digital and documentation use. At the heart of any brand system is the font or fonts and Colt has chosen Arial as its digital font. Arial is reasonably good for readability and legibility, and it is also universally supported across platforms.
It is important for all these reasons to use Arial for all web pages, apps and documents. Because of their issues with legibility, avoid using Arial Narrow or Arial Black.
Novelty fonts such as Comic Sans, Open Dyslexic or Bionic Reading should be completely avoided.
There is a common misconception that these can make a document more accessible, whereas research has shown the complete opposite is true. More information on font accessibility.
8. Videos
Video content can be problematic for many users especially if they can’t hear (or struggle to hear) the audio or see the images. Many of the issues for people with hearing or vision disabilities stem from the script or shoot and can’t be resolved in post production, so ensuring the following best practices are reviewed at the start of the project is of paramount importance.
