无障碍网页设计：「10」使用高对比度文本提高可读性

路条编程 2020-09-30

532

欢迎关注路条编程的公众号，通过学习无障碍网页设计这一系列文章，你将会逐步掌握无障碍的代码编写，为图片、音频及视频等非文本内容提供文本替代及创建更好用户体验的 Web 页面相关的基础知识。

今天我们介绍的内容是使用高对比度文本提高可读性。对比度是通过比较两种颜色的相对亮度值来计算的，其范围是从相同颜色的 1 : 1（无对比度）到白色与黑色的最高对比度 21 : 1。

低对比度的前景色与背景色会使文本难以阅读。合适比例的对比度可以提高内容的可读性，但是怎样的对比度才算是合适的比例呢？Web 内容无障碍指南（WCAG）建议以下两种比例：

普通文本至少 4.5 : 1 ，大文本至少 3 : 1 才符合 WCAG 2.1 AA 级标准

普通文本至少 7:1 ，大文本至少 4.5 :1 ，才符合 WCAG 2.1 AAA 级要求

对于标准网站，应至少争取达到 AA 级标准。如果你的网站专门针对老年人或残疾人等弱势群体，需要在连续文本块中达到 AAA 级标准。要了解有关 WCAG 2.1 合规性级别的更多信息，请查阅 W3C 的网站 https://www.w3.org/TR/WCAG21/#cc1 查看可访问性指南。

在文章 “无障碍网页设计：「09」使用日期选择器进行日期选择” 代码基础上，调整模块 6 显示内容。设置两种比例的文字，第一种为浅灰色文字，对比度为 1.5 : 1，这个比例使用文字 “高山仰止，景行行止。虽不能至，心向往之。” 难以阅读。下面的两行文字“望方觉风浪小，凌空乃知海波平。” 的颜色设置为深灰色（#636363），使对比度提升到 6 : 1。比较两种对比度的文本，可以很容易看出对比度为 6 : 1 的文本阅读起来比较舒服。

调整样式类如下：

<style type="text/css">
    .light-gray{
      color: #D3D3D3;
      text-align: center;
    }


    .mt-10 {
       margin-top: 10px;
    }


    .deep-gray{
      color: #636363;
      text-align: center;
    }


    .grid-one-cols-wide {
      display: grid;
      grid-template-columns: 100%;
      justify-content: center;
      align-items: center;
    }
</style>

调整 html 如下所示：

<article class="article  ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6">
   <div class="card">
      <div class="grid-one-cols-wide mt-20">                       
            <div class="light-gray">高山仰止，景行行止。</div>
            <div class="light-gray">虽不能至，心向往之。</div>
            <div class="deep-gray mt-10">远望方觉风浪小，</div>
            <div class="deep-gray">
            凌空乃知海波平。
            </div>
      </div>
  </div>
</article>

保存页面代码，预览页面，整体效果图如下所示：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

无障碍网页设计：「10」使用高对比度文本提高可读性

评论