Accessible Design for Print and Digital

This article deals with the visual text design and accessibility for print and digital products, also known as accessible typography for Print Disabled. Accessible conception and design of websites is covered in this article.

Since I'm not a graphic artist/desktop publisher myself, I apologize if I don't use the technical terms. My cooperation partner Silta.ai will be happy to advise you on accessible graphic design, print, documents, websites, corporate design and related topics.

Article Content

European Accessibility Act and associated ordinance

The European Accessibility Act was passed in 2019 and the associated ordinance in 2022. The private sector is committed to accessibility for the first time. Section 4 of the Implementation Ordinance states that information must be legible, especially on product packaging or in operating instructions. Concrete specifications are not named, but result from the expected context of usage.

WCAG and graphic design

The Web Content Accessibility Guidelines (WCAG) have few strict requirements for visual text design. This is because it is quite difficult to prove that text X is more readable than text Y. However, it is also the case that the requirements of different groups can conflict. Certain text formatting may be helpful for a person with dyslexia that is totally inappropriate for a visually impaired person. A specific typeface may be better for visual impairment X than for visual impairment Y. WCAG 2.x requires that each request must be verifiable for success. This is not possible for many conventions of good design. If there is one aspect of design that affects everyone, the WCAG says that this is usability, not accessibility.

This is why digital texts are better, because they can be customized. My general recommendation is: If the text is not aimed at a specific group of persons, no special fonts or formatting should be used if possible. Adaptability is particularly important here: to different screens, different default and user settings.

At the middle level of the WCAG, level AA, there are WCAG specifications for the minimum contrast: 4.5:1 for normal texts, 3:1 for large texts (18 PT/24 px or larger) and ui elements /Information Graphics. Only at the highest level of WCAG 2.1 under 1.4.8 Visual Presentation (AAA) are there very strict requirements for spacing between words, characters and lines as well as line length and text composition as well as higher contrast requirements.

The following WCAG success criteria apply to text:

  • 1.4.4 Resize Text Level AA
  • 1.4.5 Images of Text Level AA
  • 1.4.8 Visual Presentation Level AAA
  • 1.4.9 Images of Text (No Exception) Level AAA
  • Guideline 1.4 – Distinguishable

Standards for accessible print

Unlike in the digital area, there are no hard guidelines for accessibility for accessible print products. Only general aspects that contribute to recognisability and readability can be determined here. Where possible, I would also refer to the WCAG guidelines in this area.

Caution is advised when it comes to recommendations from certain interest groups such as the foundations of the blinds: They primarily have their own peer group in mind. Also, as always with accessibility, one should not rely on the statements of an individual, especially if this person is not trained. The danger is too great that personal taste will prevail here. This means that you are welcome to test with those affected or get feedback, but in the end it is about keeping an eye on partly contradictory requirements.

Common design patterns have one advantage: they have generally proven themselves over a long period of time, and usually not without reason. Professional magazines rely on a design grid and do not distribute content without structure on one page. This makes orientation easier, for example on large newspaper sheets.

Good orientation is important for all groups mentioned. The design grid and the laws of good design are very helpful.

Accessibility and typography

Both the aesthetics and the readability of a website depend crucially on the typography. Typography deals with the aesthetic text design. There is a German DIN standard for accessible fonts, DIN 1450. Fonts with the suffix 1450 are optimized for this DIN. So far, however, apart from Frutiger 1450, there seems to be no such typeface.

The legibility of a text depends on various aspects of typography:

  • the choice of font
  • Spacing of characters, words, lines and paragraphs
  • Font color and background color
  • font size

Usually you employ an Expert who is familiar with graphic text design. But it doesn't hurt to have a little basic knowledge about it. Editors in particular can enhance the texts if they are a little familiar with typography.

Technical requirements

In principle, it is recommended to use CSS for all design information on the web. That is, no HTML tags should be used for design purposes. This includes bold and italic tags. On the one hand, this formatting can have a negative effect on readability. On the other hand, they are difficult to adapt using reading tools. Highlighting is done either via strong/em or a CSS class in HTML which can then be styled in CSS.

This separation of structure and layout not only corresponds to a clean way of working. It also makes it easier to adapt the content to any assistive technology. It should therefore not be possible to use the HTML tags mentioned, but to work with strong or CSS classes.

Fonts

Basically, typefaces are divided into two families: the serif typefaces have decorations on the letters. Sans serif fonts have no such embellishments and thus appear clearer, but often also more boring. There are also the monotype fonts as a special variant. There each letter occupies the same width. Known variants are Courier or Lucida. These fonts are mostly used for computer code or in console applications. They are often difficult to read for the visually impaired and should therefore not be used for conventional text.

Serif fonts are preferred for print, especially for fiction and magazines. On the other hand, sans serif fonts are preferred in the computer area and for factual texts. This is also due to the fact that the typeface in print has a higher resolution than on the screen. The letters can therefore be recognized much easier in the printed area. In the future, this will probably change due to better display technology in e-book readers and self-illuminating screens. The resolution of many high-priced smartphones and tablets is already quite high today. Premium e-book readers based on e-ink already achieve a similar resolution of 300 dpi as printed texts.

There are specially developed fonts for practically every conceivable area of​​application. There are specific fonts for scoreboards, street signs, portable devices, and more.

It may come as a surprise at first, but the legibility of a typeface depends less on what typeface is used than on how familiar the reader is with a particular typeface. Word users often work with Calibri or Arial, so both fonts are widely used and considered legible. Arial and Calibri are characterized by the simple design of the character lines. Nevertheless, Arial is also criticized because, for example, the capital I and the small l look relatively similar.

Aesthetics and legibility can not only complement each other, but also contradict each other. Many newspapers put the newspaper name in fractal script. But they wouldn't think of setting longer texts in this typeface, because nobody would read them. For the same reason, it is becoming increasingly rare to write texts in cursive unless they are intended for personal matters. Cursive handwriting can be aesthetically pleasing, but because we are no longer used to reading different handwriting from different persons, it is difficult to read longer texts in cursive handwriting.

Common sans serif fonts should be used to ensure legibility on the screen. Serif fonts often make legibility worse; they are smaller than sans serif fonts for the same point size. Times New Roman takes up around ten percent less space than Arial with the same font size. If you still decide to use a serif font, you should choose a slightly larger font size than you would use for a sans serif font.

Fonts can be considered difficult to read if the characters are:

  • have very thin letter lines like Times New Roman
  • have many ornaments
  • the letter lines change their thickness within a character, often recognizable by the M or W
  • the letters are very wide or narrow

Common fonts such as Source Sans, Helvetica or arial can serve as a frame of reference.

In general, it should be up to the reader to adapt the text to their needs. You will never be able to please all readers.

Is there an accessible font?

The answer to the question of an accessible font is a clear no. If you compare some fonts such as Arial or Times New Roman, it is clear that Arial is easier to read under the same conditions.

But the circumstances are not the same: font colour, size, background and font position can be different. It cannot then be said that font A is better than font B in all circumstances.

There are fonts that have been optimized for specific target groups such as persons with dyslexia or the visually impaired. This does not mean, however, that these writings are also easy or pleasant to read for persons without dyslexia or visual impairment.

Special fonts for persons with print disabilities include Open Dyslectic, Atkinson Hyperlegible and Semicolon Plus. recommended as especially readable. Since special fonts are sometimes quite expensive, we recommend using common fonts such as Source Sans, Arial or Calibri or fonts that are very similar to them. As said above, it is not so much the font used that matters, but the reading experience with the font. You are also welcome to check whether scientific evidence of the quality of a special typeface is actually available. For example, it is very difficult to find legible font for two persons with different visual impairments. For the one visually impaired, Font X can be easy to read, for others, this writing can be difficult to read. For a long time, Comic Sans was considered to be well suited for persons with reading disabilities. This could not be proven in tests, on the contrary, it performs worse than mainstream fonts.

Even if Arial has some weaknesses, I believe it is still the reference framework for accessible fonts. If a font differs significantly from Arial, it is likely difficult for many persons to read. At this point, we have to leave it up to the readers to incorporate these special fonts into their reading tools if they benefit from them. The ultimate accessible font per se cannot exist because the needs of the individual groups are too different for that.

Even other fonts that describe themselves as accessible or inclusive cannot convince every person. They may make sense in specific contexts, but in the end a font must work for the general public when the writing is intended for the general public.

The font used for accessibility plays a subordinate role, especially on websites. Reading tools can replace this font. This is more difficult in the printed area and with PDF. For this reason, fonts that are as easy to read as possible should also be used here. As I said above, I gravitate towards mainstream fonts rather than supposedly accessible or inclusive fonts.

When selecting fonts, the different cuts must always be taken into account: Is the font still legible even with bold, italics, and the probably highest or lowest font size to be expected? Does the font become difficult to read when used in raster graphics such as charts?

The accessible font size

In various user experience guides, the minimum font size is 16 pixels = 12 pt for continuous text. As a rule, web designers no longer work with pixels, but with relative sizes such as em or rem. On the rendered website you can then check how many pixels it is in the end.

In general, however, it is important that text can be seen, so it should still be legible at the smallest font size. It is also important that the writing can be read without elements overlapping.

Word currently has 11 pt as the minimum font size for continuous text. In my opinion, that's also the lower limit. Small print shouldn't be smaller than 10 pt, that's my personal recommendation. This of course applies to sans serif fonts with clear lines such as Calibri or Arial. As said above: the more complex the font design, the higher the minimum font size.

As a rule of thumb, I would recommend a maximum font size of 20 pt. There is no fixed rule for this either. We would have a range of 100 percent difference between the smallest and the largest font size.

We would like to advise against the currently frequently seen huge headlines. Some websites have huge headlines and very small body text. This is very tiring for the visually impaired because they have to constantly adjust the magnification.

Standard sizes should be selected for the font sizes. For persons with a reduced field of vision, for example, font sizes that are too large would be difficult to read. In the past, websites were expected to have a function for enlarging text, but now all common browsers are capable of text enlargement. In responsive web design, font sizes are not defined in absolute terms, but rather in relative terms. Due to this and the responsive design of the website, a high zoom for text is usually no longer a problem.

Large changes in the font sizes within a document should be avoided. The visually impaired are not always able to adapt their eyes to changes quickly. You have to constantly readjust the zoom level.

text flow

The text should always be left-aligned and ragged. Justification has only proven itself for multi-column texts, but leaves

unsightly gaps in the text if there is no hyphenation. What weighs more heavily is that the different line lengths in the ragged typeface offer the eye additional points of reference. The justification looks too even, making orientation difficult. This is especially relevant when you have a wide column of text. With narrow gaps, you lose orientation less quickly.

The left-aligned text makes orientation easier for the visually impaired because an imaginary line is created on the left-hand side. If you have centered text and use screen magnification, you will have trouble finding the beginning of the line.

Especially with large displays or high magnification and narrow columns, it can quickly happen that centered content is quickly overlooked.

Manual hyphenation is not useful on the Internet because it makes it difficult to scan the text. The problem for slow readers and screen readers is that long words are harder to read. The reader has to remember the beginning of the word, jump to the beginning of the next line, put the word back together, and again put it in the overall context of the sentence. The small advantage of hyphenation is that the gaps in the justification are avoided, but – as I said – we want to avoid that anyway.

A maximum line length of 80 characters is recommended. The text should not take up the entire screen and the lines should not be too long. The longer the lines, the harder it is for the eye to find the beginning of the next line. If the lines are too short, on the other hand, the eye has to be moved back and forth too often.

Special formatting and Highlighting

Special formatting should always be used sparingly. Italics, capital letters , underlining and decorative fonts always impair legibility. Whole paragraphs in such formatting look tiring. Many visually impaired and all blind persons miss bold emphasis.

Highlighting and text formatting should be marked as technically as possible, in HTML this is done with strong or em. Special formatting such as uppercase words should be styled with CSS.

Images of text

Images of text, i.e. longer text that is embedded in an image, should also be avoided. Such texts become blurred when enlarged, they are also not legible for the blind and are also often distorted on large screens, on the other hand they are not legible on small displays because the graphics are displayed too small.

If you need to use images of text for any reason, you should use vector graphics formats such as SVG. With raster formats such as JPG, PNG or WEBP, the above-mentioned problem of pixelation arises when enlarged.

Spaces

Letter, word, line, and paragraph spacing should be standard. Letters that are too narrow, for example as a graphic effect, impair legibility, as do letters that are too wide.

Paragraphs should not be too long. Long paragraphs often reveal that the writer has not thought about a clean structure. A paragraph should not contain more than three or four medium-length sentences.

The same applies to sections of text. Long texts should be teased or summarized by subheadings.

There are specific requirements in WCAG 2.1 under 1.4.4 Resize text (AA). Text should be expandable to 200 percent without assistive technologies and loss of information.

There are hard specifications for text spacing in WCAG 2.1 under 1.4.8 Visual Presentation. However, this requirement only has to be met at the highest level of accessibility.

Colors

Any combination other than black on white degrades the contrast. There may be persons for whom other combinations are better. In fact, however, it is rather difficult for the text designer to provide meaningful color combinations for all individual visual impairments. Here the user is in demand, who can set his preferred colors on his computer. Above all, the designer should ensure that color adjustments do not result in the text becoming illegible, for example due to a background image. Background images or color effects such as color gradients should generally be avoided in continuous text.

In other countries, there is actually a tradition of not using a pure white background for presentations because these backgrounds are too dazzling. Instead, the background is slightly darkened.

contrasts

There are minimum specifications for contrasts in digital texts. That's 4.5:1 for regular text and 3:1 for large text at WCAG 2.1 Level AA. You can use the contrast calculator to check whether you meet these contrasts.

tables

If text is too close to boundary lines, it tends to merge with these lines for the visually impaired, making it difficult to read. Therefore, we also recommend not using underlining except for links.

Within tables, text should be well spaced from the cell boundaries. The default values ​​of the text processing seem to me to be fine for this. It is generally recommended that cell contents are left-aligned; numbers can also be right-aligned for comparability. Overall, it is advisable not to leave too much "air" in the cells, i.e. too much empty space. Instead, the cell sizes should be optimized to the content if possible.

Bendering is particularly useful for extensive tables. This means that tables or columns are displayed differently. The first white, the second gray, the third white, the fourth gray, and so on. This makes it easier to differentiate between the lines and assign them to column and line headers.

Recommendations for print

We would not recommend bright white for the paper because it reflects the light too much. Creamy white paper is usually easier on the eyes. Even modern recycled paper is fine. We would rather advise against the strongly yellow-grey recycling paper, because it has a clearly negative effect on the contrast.

Visually impaired persons often work with camera systems, so-called screen readers or analogue or electronic magnifying glasses. It is advantageous for enlargement if printed documents lie flat. Thick books have a strong curvature, and the lighting casts a shadow on the bindings in particular. In addition, the binding will be damaged if books are flattened too much or continuously. Some books, such as cheap paperbacks, are not at all suitable for this purpose.

Otherwise, the recommendations made above apply.

Reduce eye movement and cognitive load

Avoid “small print” and footnotes in tiny type. Footnotes are always difficult for the visually impaired or other readers who have difficulty moving quickly within the text. The small print should not deviate too much in size, as writing quickly becomes blurred when it is greatly enlarged electronically, such as with readers. Constantly changing font size forces the eye or the users of screen readers or magnifying glasses to constantly adjust the magnification.

Grid alignment

Multi-column content should always be grid-aligned. Newspapers, for example, work with clear grids, which makes it easy to find your way around, even with large newspapers.

The grids are formed by columns of text and white space or by colored areas or lines. Images, teasers, and headlines can span multiple columns.

The advantage is that orientation is easier for the severely visually impaired or those who are inexperienced in reading. You know that there is nothing left or right of a certain element because the element ends at this point. This is important with high magnification. On the other hand, if you know that something should be coming, but you can't see anything, for example because it's centered, you can search for it in a targeted manner.

Digital alternative to printed text

provide an electronic version of the print medium. Many disabled persons use e-book readers or assistive technologies and can access electronic documents more easily than printed ones.

In my opinion, HTML and XML-based formats like ePub are better suited to accessibility than rigid formats like PDF. Reading programs have evolved over the past few years. But adjustments such as reflow of content or visual redesign such as adjusting the contrast, the font or the zoom are difficult to implement with PDF. HTML content is preferable because virtually any display device can display web pages. PDF is mostly optimized for printing and not for reading on screen, this is the Achilles heel of this format.

Read more