色彩的对比度和饱和度_使用高色彩对比度进行更方便的设计-程序员宅基地
技术标签： python java 人工智能 编程语言 大数据
网站跳出率高通常是由于网站的视觉可访问性差所致。 当字体太小或它们难以辨认时，当太多的干扰或足够的空白时，许多人会离开网站而无需三思 。
早期放弃的最常见原因之一是选择不当的配色方案，这些方案降低了内容的可读性 。
根据世界卫生组织的统计 ，全世界约有2.85亿视力障碍者，其中许多人部分或全部患有色盲。 视障人士对颜色的看法不同，因此，如果我们想为客户提供一个易于访问且用户友好的网站，那么避免在我们的设计中避免低色差是不可避免的。
Web标准的色彩对比
色彩对比度衡量两种颜色之间的对比度差异。 值越高，越容易将前景中的对象（文本，图像，图形）与背景区分开。
颜色可以以许多不同的方式进行对比，例如色调 ， 值和饱和度。 色彩对比度是由W3C（万维网的主要国际标准组织）提供的公式计算的。
它可以采用介于1：1 （ 完全没有对比度 ，前景和背景具有相同颜色）和21：1 （仅在黑白之间存在的最大对比度 ）之间的值。
W3C最新的Web内容可访问性指南（ WCAG ）2.0为Web开发人员和内容创建者提供了可接受的颜色对比度的最低（AA级）和增强（AAA级）值的基准。
AA级别的普通文本至少需要4.5：1的比例 ，大文本至少需要3：1的 比例 。 阅读大文本（如字幕）要容易得多，这就是为什么它需要较低的颜色对比度的原因。
如果要达到AAA级（增强级），则需要更加谨慎地设计配色方案，因为普通文本至少需要7：1的对比度 ，大 字体需要 4.5：1的 对比度 。 如果文字是徽标或品牌名称的一部分，则在任一WCAG级别都没有最低颜色对比要求。
如果每个前景对象与其背景之间的颜色对比度至少达到AA级，我们只能将网站称为视觉可访问的网站。
高色彩对比度的好处
通过确保更好的可读性，您不仅会吸引视觉障碍的用户，而且还会吸引在小屏幕上（例如在智能手机或智能手表上），在光线不足的情况下以及在质量较低的显示器上阅读您的内容的人 。
当文本和背景之间的对比度更高时，人们的阅读速度也会更快，因此，他们很可能会花更多的时间使他们对网站的内容感到无聊。
如果您担心应用较高的对比度会给设计的美观带来负面影响，则需要查看Contrast Rebellion网站项目，该示例通过实际示例证明仍然可以坚持使用高对比度规则具有吸引力和酷炫的设计。
检查色彩对比度的应用程序
网上有许多很棒的免费工具，可以帮助设计人员检查其网站的色彩对比度。
测试你的设计，色彩对比的最简单的方法是选择的主色调与Photoshop或合适的浏览器扩展像这样一个针对Firefox，和值复制到下面的应用程序之一。
要记住的最重要的事情是，您始终需要将前景色（例如文本色）与其周围区域 （背景色）进行比较。
1. WebAim色彩对比检查器
WebAim（Mind Web Accessibility in Mind）是一个促进Web可访问性的组织，为开发人员提供了简单而可靠的颜色对比检查器以及许多其他出色的可访问性工具，例如Wave ，这是一个通用的可访问性评估应用程序，可以帮助您快速评估站点的可访问性问题 。
WebAim的颜色对比度检查器会告诉您，对于普通文本和大文本， 颜色是否通过WCAG AA和AAA测试 。
2. Snook颜色对比检查
目前在Shopify担任前端前端开发人员的乔纳森·斯努克（Jonathan Snook）主持了他方便的色彩对比检查工具已有十多年了。 Snook的应用程序允许您使用方便的范围滑块一次更改前景和背景色的HSL和RGB值 ，直到获得符合WCAG 2.0基准的结果。
CheckMyColours
由乔凡尼·斯卡拉 （ Giovanni Scala）创建的CheckMyColours允许您检查实时网站上所有前景与背景颜色组合的颜色对比度。
它计算亮度对比度，亮度差和色差 ，并为您提供有关结果的完整报告。 CheckMyColours的报告可以极大地帮助您了解如何改善网站的视觉可访问性。
配色方案设计师
我们将其包含在此集合中，因为它具有一项功能，可让您查看不同类型的视觉障碍人士如何看待您的配色方案。 您可以测试您的颜色是否有全色盲，泛色，氘代和其他许多视觉障碍。 该应用程序具有称为Paletton的更新版本，该版本甚至可以进行更复杂的视觉模拟（您也可以测试糟糕的LED显示屏或弱CRT显示屏）。
W3C还为您提供了庞大的Web辅助功能评估工具列表 ，您可以在其中找到许多其他颜色对比工具，例如此有用的辅助功能色轮 。
创建视觉可访问的网站的提示
如果您想创建一个视觉上可访问的网站 ，最好避免单独使用颜色来传达功能或含义 。 根据其当前状态更改其颜色的图标就是典型示例。
如果可能，请始终设计其他视觉提示 ，以帮助看待颜色不同的人理解功能。
不要忘记特别注意按钮，链接和菜单的颜色对比 ，因为它们是您网站上的导航方式。 如果用户不能轻松地在您的网站上导航，您将很快失去他们。 号召性用语的可访问颜色 对于获得良好的转化率也至关重要 。
在设计过程中尽早测试色彩对比度是一个很好的工作流程实践，因为很难说服客户在设计过程的后期更改站点的配色方案。
现在阅读：
翻译自: https://www.hongkiat.com/blog/high-contrast-color-design/
智能推荐
c# 调用c++ lib静态库_c#调用lib-程序员宅基地
文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib
deepin/ubuntu安装苹方字体-程序员宅基地
文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang
html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地
文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时，向何处发送表单中的数据，地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些
PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地
文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器
【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地
文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距
docker — 容器存储_docker 保存容器-程序员宅基地
文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器
随便推点
网络拓扑结构_网络拓扑csdn-程序员宅基地
文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn
JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地
文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios
如何将EXCEL表导入plsql数据库中-程序员宅基地
文章浏览阅读5.3k次。方法一：用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头，使全列成选中状态，然后粘贴，最后commit提交即可。（前提..._excel导入pl/sql
Git常用命令速查手册-程序员宅基地
文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，包括untracked的文件...
分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120-程序员宅基地
文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120
【C++缺省函数】 空类默认产生的6个类成员函数_空类默认产生哪些类成员函数-程序员宅基地
文章浏览阅读1.8k次。版权声明：转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数