高对比度显示模式下常见 Accessibility 问题分析及解决（3）对比度太低

look_w

问题二：对比度太低在 Web 设计中，文字与背景色颜色对比度太低，这不仅对色盲或色弱用户不易用，对正常人而言，也存在一定的阅读障碍。前景色与背景色的亮度比例，避免太接近。通常来说 5:1 是可以接受的。
示例：
图 5. 文字与背景色对比度太低示范截图解决方案这段文字颜色为 #363e26，而背景色为 # 333333，对比底太低导致极不易读。颜色选择不合理，勉强辨认内容文字，给阅读增添了困难。在设计时应避免。
问题三在 Web 设计中，仅使用背景图片与文字的对比来显示信息，容易有隐患。当背景图片被禁用时，对于那些禁用图片以节省带宽的用户，还有那些因为低速连接导致好象永远载入不完图片的用户来说，这种状态令人沮丧，万一文字颜色与背景色相似，或颜色重叠，将寻到完全看不到文本内容。
示例：
图 6. 提高文字与背景色对比度示范截图解决方案这段白色的文字所在的 div 里运用 CSS 平铺了一个渐进色背景 (background.jpg)，通常情况下不会有可访问性问题，但当图片被禁掉时，白色文字将显示在白色背景上，导致不可读。WEB 设计师在设计页面时经常为整个页面平铺一个背景图，为 body 设置背景图，与此同时为了保证页面无懈可击，需要额外添加一个与背景图片颜色接近的背景色值，当背景图无法显示时，背景色正常工作。CSS 代码如下：

1 2 3 4 5

body { background: #000000 url(background.jpg) repeat fixed top; /* 在设置背景图的同时，也设置一个背景颜色值 */ }

结束语本文对高对比度显示模式下常见的可访问性问题支持做了一个简要的介绍 , 并结合例子对如何解决此类问题做了演示，高对比度显示作为对视力不健全者浏览网页应用的一个重要特征，还有很多值得研究的地方，希望通过本文可以帮助您开发更友好更可读的页面。1914 年，IBM 聘请 Michael Supa 博士，帮助满足视障人群对产品的需求，Supa 博士是盲人，现在越来越多的软件开发人员意识到 Accessibility 的重要性，我们之所以要探讨这些可能对大多数人并不需要的功能，是为了保证我们的用户能更加广泛、多元化，更公平的参与网络给我们带来的信息世界。