Guidelines for creating accessible digital signage: Difference between revisions

Latest revision as of 01:33, 7 July 2026

What is the critical message?

Real estate on a digital sign is limited, people viewing it may be distracted, and viewing time will be short (anywhere from 5 to 12 seconds). Keep your message succinct.

As you are thinking about the content of your sign, decide what information is most important and then ask, “How can I communicate this in 140-200 or fewer characters?”

Use the “Squint Test”

When evaluating your sign, take advantage of a very simple high level technique to help identify the readability of your sign.

Use simple language

Clear and straightforward language design is crucial for making digital signage accessible to people with cognitive disabilities or those who are not fluent in the language used.

Avoiding technical jargon, complex sentences, and idiomatic expressions can help ensure your message is easily understood.

Use meaningful symbology

Symbols should also be straightforward. For example, let’s say a storefront accepts credit cards. You could use the following symbol:

That symbol is ok, but it doesn’t specify what type of credit card payments are accepted. You can enhance by using specific symbols:

To enhance the sign even further, you can add some color to better convey the message. When adding color pay attention to color contrast and challenges for those with color blindness.

Important: Keep in mind that any information conveyed by symbols should have the textual information alongside it as shown below:

or

Also, keep in mind that one symbol’s meaning to you may be different to others. Because of this, it’s best practice to use well-known symbols for common actions. Font Awesome and the wikipedia page on International Organization for Standardization (ISO) symbols can help one find common symbols. You may also find The Noun Project useful - just choose icons that are easy to interpret.

Audio and video

Audio captions are beneficial for people with hearing disabilities and essential in noisy and quiet environments.

Orientation and size

The vast majority of digital signage screens on campus are 4K and will have a horizontal, or landscape, orientation. Check with the owners of the screens where you will be displaying your message to be sure you are designing for the best display. Below is information on resolution and size:

Landscape (horizontal):
- 16:9 HD signs: 1920 x 1080 px,
- 4K signs: 3840 x 2160 px
- Older SD displays: 4:3, 1440x1080 px
Portrait (vertical):
- 9:16 HD signs: 1080 x 1920 px,
- 4K signs: 2160 x 3840 px
- Older SD displays: 3:4, 1080x1440 px

A note about video:

HD signs use "widescreen" specifications (1080i or 1080p),
SD signs use “fullscreen" (720p)

Fonts

Ideally, font size is not less than 36pt
Use Sans-serif font families like Arial, Calibri, Century Gothic, Helvetica, Lucida Sans, Tahoma and Verdana

High Contrast

Contrast between foreground and background should be at least 7:1. This is also WCAG’s AAA requirement. Below are a few tools that can help you meet this requirement:
- WebAim Contrast Checker - Choose colors that pass WCAG AAA
- Venngage Accessible Color Palette Generator - choose color combinations that are at least 7:1 or greater
- Coolors - Another contrast checker that can suggest new colors to improve contrast and readability. As a plus, users can generate and explore color palettes. Double check your contrast ratio and ensure it is 7:1 or greater.

Color Blindness

Keep color blindness in mind. A very easy way to check this is to view your proposed sign in greyscale. Avoid red/green on black or dark background, avoid black on red/green backgrounds. The image below, from WebAim, is a good example of using grayscale.

Images with text overlays

Avoid overlaying images with text, but if you must ensure that the text is readable. The first image below is an example of what not to do, the second image is the same image that has been faded so the text stands out:

If you don’t want to dim out the entire image, adding a background to the text will make it even easier to read

Image with where a background is applied only to the text, rather than the entire image. Credit: TWeed

QR Codes

QR codes are a great way to lead viewers to a place where they can learn more. They can be included in your signage. They provide a quick and easy replacement for web addresses, which can be hard to remember.

Keep in mind that using QR codes assumes that users have a mobile device. In addition, some members of the community may not benefit from QR codes.

We recommend including all critical information on the screen itself, and using QR codes to provide supplemental information.

Below is a table with recommended sizes based on distance. For most digital signage, we advise using the middle size, scannable from 4-12 feet.

Scanning Distance	QR Code Size Range
1.5-2.5 feet (45-75 cm)	2.4-6.3 in (6-15.8 cm) – magazines, catalogs
4-12 feet (1.2-3.6 meters)	6.3 – 30 in (16-75 cm) – posters, windows
12-25 feet (3.6-7.6 meters)	19-61.3 in (48-157 cm) – billboards

A Note About Community Members with Low or No Vision

Important note: Only meal and campus event information is available in an alternative accessible format on either The Dash or our campus events page.

Sources and References

@@ Line 19: / Line 19: @@
 Symbols should also be straightforward. For example, let’s say a storefront accepts credit cards. You could use the following symbol:
-[[File:Credit Cards Accepted.png|alt=Icon indicating credit cards are accepted]]
+[[File:Credit Cards Accepted.png|alt=Simplified credit card icon with a magnetic stripe and two horizontal lines representing card details]]
 That symbol is ok, but it doesn’t specify what type of credit card payments are accepted. You can enhance by using specific symbols:
-[[File:ALLY_Guidelines_for_creating_accessible_digital_signage-2024-04-23_18-36-41.png|alt=black and white icons of mastercard, visa and apple pay|260x260px]]
+[[File:ALLY_Guidelines_for_creating_accessible_digital_signage-2024-04-23_18-36-41.png|alt=Black and white Mastercard, Visa, and Apple Pay logos in separate squares|260x260px]]
 To enhance the sign even further, you can add some color to better convey the message. When adding color pay attention to [https://docs.google.com/document/d/1cVNgdPmgo0KCIEcBofpJwImBVyJNChPuw84CDKfTAF4/edit#heading=h.rjr82brqku0v <u>color contrast</u>] and challenges for those with [https://docs.google.com/document/d/1cVNgdPmgo0KCIEcBofpJwImBVyJNChPuw84CDKfTAF4/edit#heading=h.u5fucapqv4r8 <u>color blindness</u>].
-[[File:Visa Mastercard and Apple Pay icons in color.png|alt= Visa, Mastercard and Apple Pay icons in color|frameless|300x300px]]
+[[File:Visa Mastercard and Apple Pay icons in color.png|alt=Visa, Mastercard, and Apple Pay payment method logos in color|frameless|300x300px]]
 '''''Important:''''' Keep in mind that any information conveyed by symbols should have the textual information alongside it as shown below:
-[[File:icons of Mastercard, Visa and Apple Pay in grey scale with their names below the icons.png|alt=icons of Mastercard, Visa and Apple Pay in grey scale with their names below the icons|frameless]]
+[[File:icons of Mastercard, Visa and Apple Pay in grey scale with their names below the icons.png|alt=Grayscale Mastercard, Visa, and Apple Pay logos with their names below each symbol|frameless]]
 or
@@ Line 76: / Line 76: @@
 * [https://bit.ly/ColorBlindness-WebAIM <u>Keep color blindness in mind</u>]. A very easy way to check this is to view your proposed sign in greyscale. Avoid red/green on black or dark background, avoid black on red/green backgrounds. The image below, from WebAim, is a good example of using grayscale.
-[[File:ALLY_Guidelines_for_creating_accessible_digital_signage-Screenshot_2024-04-01_at_11.47.08AM.png|alt=line rendering of a subway map.  On the left is the map in color and on the right the same map in grey scale.  It is impossible to discern the different routes when viewing the greyscale image|690x690px]]
+[[File:ALLY_Guidelines_for_creating_accessible_digital_signage-Screenshot_2024-04-01_at_11.47.08AM.png|alt=Colored subway map on the left with distinct route colors and a grayscale version on the right where routes are indistinguishable|690x690px]]
 == Images with text overlays ==
 * Avoid overlaying images with text, but if you must ensure that the text is readable. The first image below is an example of what not to do, the second image is the same image that has been faded so the text stands out:
-[[File:ALLY_Guidelines_for_creating_accessible_digital_signage-Screenshot_2024-04-01_at_11.52.48AM.png|alt=The same image side by side with a text overlay.|786x786px]]
+[[File:ALLY_Guidelines_for_creating_accessible_digital_signage-Screenshot_2024-04-01_at_11.52.48AM.png|alt=Side-by-side comparison of text over a cityscape with a seagull, showing hard-to-read white text on a bright background and easy-to-read white text on a darkened background.|786x786px]]
 If you don’t want to dim out the entire image, adding a background to the text will make it even easier to read
-* [[File:ALLY_Guidelines_for_creating_accessible_digital_signage-Screenshot_2024-04-01_at_11.57.15AM.png|600px|center|alt=Image with where a background is applied only to the text, rather than the entire image.|Image with where a background is applied only to the text, rather than the entire image. Credit: TWeed]]</p></li></ul>
+* [[File:ALLY_Guidelines_for_creating_accessible_digital_signage-Screenshot_2024-04-01_at_11.57.15AM.png|600px|center|alt=Cityscape with historic buildings and a dark translucent background behind white text that reads "Easy to Read Text"|Image with where a background is applied only to the text, rather than the entire image. Credit: TWeed]]</p></li></ul>
 == QR Codes ==