Working with text over images

April 3, 2017 @ 10:45 am

Make sure that your digital content is designed with the user in mind (UX). Check that it’s accessible, readable and legible.

The content for this post refers to an article written by Aurora Harley from the N N Group  (specialists in Evidence Based User Experience Research). 

Evidence Based User Experience Research

Article highlights (below):

  • It’s not enough to make it possible for people to use a site, which is the definition of accessibility. The site must also be easy and pleasant—qualities which require good usability and little eyestrain.
  • Legibility refers to the ability to distinguish the individual characters (of letters), while readability refers to the ability to actually process the meaning of the words. When text is difficult to decipher, readers are forced to choose between straining their eyes and skipping over the content;
  • According to accessibility requirements for color contrast, text that is not purely decorative or part of a logo should have a contrast ratio of at least 4.5:1 (or 3:1 for large characters, defined as an 18-point font, or a 14-point bold font);
  • When combining emotion-provoking imagery with text, ensure that the text is readable by creating a high-contrast ratio between the text and its background;
  • Use effects such as a semi-opaque overlay (either covering the entire image or just the text portion), a blur, a text shadow or outline, or a combination of these techniques. See examples.

References

Aurora, H. (2015) Ensure High Contrast for Text Over Images. Available at https://www.nngroup.com/articles/text-over-images/ (Accessed:  13 March 2017).

2 Comments on "Working with text over images"

  1. Jon Swanda

    I really like your post. I will get back on your website in the next few days and i will promote it to my facebook group. I think most of our group member will like it. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *