Right: The text now possesses the needed 3:1 contrast ratio for accessibility. Additionally, the text has been moved down to have consistent placement with other grid items, allowing the blur to be contained to a smaller portion of the image. Do: Left: In this edited version, a blur has been added to bottom of photos containing text, and the font color has been changed to the default dark colors instead of white. Right: The majority of the text areas with a photo background do not meet the contrast-ratio guideline of 3:1 for large-sized text. These category links are difficult to read due to the low contrast, and are likely to be ignored in favor of the easier-to-read grid items. Don’t: Left: The furniture site Compliments displays product-category links as white text over photos. A tool such as the Color Contrast Analyzer Chrome browser extension from NCSU can help determine when the background has been sufficiently darkened to provide adequate contrast for the overlaying text. This can be done either by processing the image itself, or by adding a semi-transparent black gradient over the image in the CSS. In these situations, the background will need to be darkened in order to provide enough contrast. Images with mostly light-colored backgrounds-or images edited to appear faded-are not well suited to white text because the colors are too similar. When choosing to place text over an image, consider both the text color and the main color of the image. Right: The edited darkened version does pass the 4.5:1 contrast ratio guideline for accessibility. Do: Left: Darkening the background with a radial gradient overlay allows the white text to have stronger contrast, without drastically changing the visual tone of the image. Right: A tool for contrast-ratio analysis confirms that the white text does not have adequate contrast with the background (the dark, nonoutlined areas are those that do not possess the sufficient contrast ratio of 4.5:1 for small-sized text). Don’t: Left: The background image used for the third slide in the homepage carousel for is both faded and visually busy, making the white text difficult to read. Rather than risk that users ignore your text, implement small changes to the design to increase the contrast between the text and the background. (As a reminder, legibility refers to the ability to distinguish the individual characters, 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. Placing text over an image need not be completely avoided, but special care must be taken to ensure that the text is both legible and readable to users. Subtle Tweaks Make a Big Difference in Usability
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). However, these endeavors commonly backfire, usually when the contrast between the text and the background is too low. (Large pictures are frequently encountered in conjunction with minimalism, although they do not quite define this design trend.)īecause images play such an important role, often designers end up placing text over an image to leverage the attention-grabbing aspect of the photo while providing text-based content to communicate actual information. This ability of an image to elicit a positive visceral response has caused many designers to create interfaces that are highly visual, downplay text, and often contain large background images or videos. (If instead the images appear to be purely decorative, they will likely be completely ignored.) Images can quickly prompt an emotional response in viewers and can spur them into taking some type of action.
Eyetracking research has shown that people are attracted to information-carrying photos, when the images are related to the user’s current task. A well-chosen visual adds interest and can set the tone of a website, in addition to (hopefully) conveying some meaning.
0 kommentar(er)
