一个精心选择的视觉效果可以增加兴趣，并可以设定网站的基调，除了(希望)传达一些意义。眼球追踪研究表明人们被带有信息的照片所吸引，当图像与用户当前任务相关时。(如果图片看起来纯粹是装饰，它们就会很可能被完全忽略．)图片可以迅速激起观众的情感反应，促使他们采取某种行动。这种能力以引起积极的本能反应这使得许多设计师创造了高度可视化的界面，淡化文本，通常包含大的背景图像或视频。(大图片经常与极简主义，尽管它们并没有完全定义这种设计趋势。)
由于图像扮演着如此重要的角色，设计师通常会将文本置于图像之上，以利用照片的吸引眼球的一面，同时提供基于文本的内容来交流实际信息。然而，这些努力通常会事与愿违文字和背景的对比太低了．根据颜色对比的可访问性需求，不纯粹是装饰或标志的一部分的文字应该有对比度至少为4.5:1(或3:1为大字符，定义为18点字体，或14点粗体字体)。
细微的调整在可用性方面有很大的不同
不需要完全避免在图像上放置文本，但必须特别小心确保文本既易读又易读给用户。(提醒一下，易读性指的是区分个性，而可读性实际上指的是能力过程这些词的意思。)当文本难以解读时，读者不得不在努力阅读和跳过内容之间做出选择。与其冒着用户忽略文本的风险，还不如对设计做一些小改动，以增加文本和背景之间的对比度。
别:
做的事:
当选择将文本置于图像之上时，要同时考虑文本颜色和图像的主颜色。背景大多为浅色的图像——或者经过编辑后显示为褪色的图像——不太适合白色文本，因为颜色太相似了。在这些情况下，背景需要变暗，以提供足够的对比度。这可以通过处理图像本身来实现，也可以通过在CSS中为图像添加半透明的黑色渐变来实现。一种工具，例如颜色对比分析仪Chrome浏览器扩展从NCSU可以帮助确定背景什么时候足够暗，以便为覆盖的文本提供足够的对比度。
别:
做的事:
给照片添加模糊效果肯定会影响网站的美观和品牌，但这是一个很好的替代昏暗的图像。此外，由于颜色和亮度水平的大变化会降低区分字符清晰轮廓的能力，因此模糊显示文本的照片部分可能会最小化易读性问题。将文本区域定位在靠近图像边缘的一致位置，可以使添加对比度的模糊效果局限于该特定区域，从而对图像的影响较小。照片的较低部分特别适合添加一些特效，比如模糊、渐暗渐变叠加(又名“地板褪色”)，或者是文本区域的半透明彩色背景。
别:
做的事:
在决定处理叠加文本对比度的技术之前，要考虑可能使用的图像的全部范围。通常情况下，一种解决方案可能对一种类型的图像有效——例如，那些大多是深色或景深较浅的图像——但对其他类型的图像无效。如果暗图像和亮图像都可能包含在设计中，请确保所选的方法为最坏的情况提供足够高的对比度背景图像和文本放置。就因为你做了某物增加对比度并不一定意味着你增加了足够的对比，使文本真正可读。
结论
没有必要在创造一个实用的设计和一个美观的设计之间进行选择——如果把注意力放在两个目标上，两者都可以同时实现。当将激发情感的图像与信息文本相结合时，通过在文本和背景之间创建高对比度，确保文本是可读的。使用效果，如半不透明覆盖(覆盖整个图像或只是文本部分)，模糊，文本阴影或轮廓，或这些技术的组合。记住，成功是不够的可能的为人们使用网站，这是定义可访问性．网站也必须是简单和愉快的——这些品质要求良好的可用性和很少的眼睛疲劳。
分享这篇文章: