Create graphic design elements with accessibility in mind to ensure that your content can be understood by as wide an audience as possible.
Designing for accessibility means being inclusive to the needs of your users. Accessible graphic design helps ensure that your printed documents and web content are easy on the eyes and easy to navigate for the largest number of users possible.
Colour
Within graphic design, visual accessibility is a key element that determines overall inclusivity. Colour plays an important part in a design, invoking emotions, feelings, and ideas. Colours can also help strengthen a brand's message and perception.
Colour contrast is an often overlooked web accessibility problem. People who have low vision could find it difficult to read text from a background colour if it has low contrast. When a low-vision or colour blind user can't see colours or perceives them differently, the power of your message can be diminished, or worse, your content may not be understandable.
Understanding colour as an element of document design will help you to create content that will benefit all users and make your messages clearer.
Graphic Design Software
This section contains information and links to accessibility guidance for software used in graphic design. Please also refer to our 'Creating Accessible Documents' page.
Adobe InDesign
Adobe InDesign supports accessible cross-media publication, allowing you to export InDesign documents to ePub, HTML, or accessible PDF. You can apply accessibility features within your InDesign document, rather than having to make major changes in Adobe Acrobat DC. PDF tags, alt tags, and the content order you assign stay with the document as you revise it.
InDesign should be used to create any text + graphic flyers or posters intended for distribution on the web.
Tips for optimising accessibility in InDesign
- Create your document using paragraph styles
- Associate each of the styles you've created with specific PDF tag
- Apply anchors to images
- Thread text
- Apply artifacting to paragraph styles for any text elements that should be artifacted, such as page numbers and running headers and footers.
- Apply artifacting to object styles such as decorative blocks of colour and decorative background graphics.
- Add bookmarks to long documents
- Add alt text to images (Object > Object Export Options > Alt Text). After you've added alt text to an image, the alt text stays with that image as you design your layout.
- Do not convey information by colour alone. Distinguish with tags and differences in size, font weight, styling, etc.
- Establish content read order with the Articles panel (Window > Articles). Simply drag content from the document into the Articles panel in the order in which it should be read by screen readers.
- Export to PDF, and be sure to select "Acrobat 6" or higher for Compatibility, and check the "Create Tagged PDF" checkbox. - n.b. Export Tagging cannot be previewed within the InDesign layout, as it only impacts what is marked up in the exported file (EPUB, HTML, or PDF).
Adobe InDesign Accessibility information
Adobe Photoshop
Adobe Photoshop CC provides some support for individuals who want to create accessible web graphics. With Photoshop, users can proof images with Colour Universal Design (CUD) to ensure that graphical information is conveyed accurately to people with various types of colour vision impairment, including people with colour blindness.
Photoshop should NOT be used for designing flyers or posters containing text that are exported as PDF files, as the text layers will not be recognised by screen readers and cannot always be converted to text by the OCR function in Acrobat. Please use InDesign for this type of work.
Adobe Illustrator
Adobe Illustrator CC provides support for individuals who want to create accessible web graphics. With Illustrator, users can proof images with Colour Universal Design (CUD) to help ensure that graphical information is conveyed accurately to people with various types of colour vision impairment, including people with colour blindness.
Illustrator should NOT be used for designing flyers or posters containing text that are exported as PDF files, as the text layers will not be recognised by screen readers and cannot always be converted to text by the OCR function in Acrobat. Please use InDesign for this type of work.
Useful graphic design accessibility links
- Gov.uk accessibility blog: Dos and don'ts on designing for accessibility. This resource includes printable posters with guidance for catering to users from these areas: low vision, D/deaf and hard of hearing, dyslexia, motor disabilities, users on the autistic spectrum and users of screen readers.
- Gov.uk accessibility blog: Colour contrast: Why does it matter?
- Colour Blind Awareness
- Colour contrast accessibility validator
- Text on background image a11y check - a guide for designers and developers to test if their design solution is accessible
- Adobe Color contrast checker analyzer tool - a tool that allows you to upload images to check contrast levels
- A Practical Handbook on Accessible Graphic Design (PDF)
- Using Adobe InDesign to Create Accessible PDF Documents (doi.gov)
- Creating accessible PDFs (adobe.com) - Adobe's suggested workflow
- WAI images tutorial - how to provide appropriate text alternatives based on the purpose of an image