智唯高端建站是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司

建站优化电话:138 2557 5516(免费SEO检测 保证收录 保证排名)
广州建站微信号
返回旧版
网站设计News
公司网站建设

网站设计之如何提升色盲用户的体验

关键词:广州建站 作者:智唯建站 | VISITORS: | 来源:智唯网络科技
08Oct
2017
本文中,海淘科技提出13条主张来改进色盲用户的体会——这些对视觉正常的用户同样有利。色盲是什么?有很多品种的色盲,但终究都能分红这几类:无法明晰辨认色彩、色彩稠浊、无

本文中,智唯网络提出13条主张来改进色盲用户的体会——这些对视觉正常的用户同样有利。

色盲是什么?

有很多品种的色盲,但终究都能分红这几类:无法明晰辨认色彩、色彩稠浊、无法差异特定色彩。

这些疑问在特定环境中愈发严峻,比方阅览网站。这包含低分辨率显现器、差劲的光线、小移动端屏幕、远离大屏幕电视而坐。

只是依托色彩树立可读性和可见性,会让网站难以运用,终究影响了阅览和出售。

虽然下面这些主张并不全部,它们的确涵盖了色盲用户阅览网站时遇到的首要疑问。

1. 文字可读性

要保证文字简单阅览,它就应当遵从可读性规范,结合字色、布景色和字号:

“WCAG 2.0的AA级规范恳求,一般字号的比照率要到达4.5:1,大字号的比照率要到达3:1(大字号是指14磅的加粗或加大文字,或许18磅及以上字号)”

——WebAim色彩比照查看器

下面列举了一些色彩和字号组合,有的到达规范,有的没有:


Contrast is based on color and size

这表明了色彩和字号的组合构成了如何的反差比照。(查看大图)

2. 布景图上的文字

布景图上的文字处理起来很奇妙,由于图像局部或整张图都也许无法与文字构成满足的反差。


Description of the image.

文字没有蒙层,直接掩盖在图像上。(图像来历:Jay Wennington) (View large version)

下降布景透明度能够增强反差,让文字更简单阅览。


Description of the image.

文字掩盖在带有蒙层的图像上。(查看大图)

或许,你能够给文字挑选一个可靠的色彩,或许加上投影,别的任何契合品牌规范的办法都行。

3. 色彩过滤器、挑选器和色盘

下图展现了Amazon的色彩过滤器,能够看到一般人与红绿色盲(分不清赤色与绿色)的视觉效果。假如没有描绘文字,就不也许从这么多选项中作出差异。


Amazon color picker

不带标签的色彩过滤器,在红绿色盲看来是彻底没法用的。(查看大图)

在用户鼠标悬停时,Amazon展现了描绘文字,但移动端上没有这一操作。

鄙人图中,Gap在每个色彩周围加上了文字标签,疑问得以处理。


Amazon color picker

带有标签的色彩挑选器,红绿色盲运用起来很轻松。(查看大图)

这刚好也对正常视觉的人有利。例如,黑色与藏蓝在屏幕上很难差异。文字标签能让人免于猜想。

4. 缺少有用描绘的照片

下图展现了SuperDry网站上售卖的一件T恤。它的描绘是“树叶纹路”,这太模棱两可了,由于树叶能够有很多色彩(绿色、黄色、棕色等等)。


Description of the image.

色盲难以了解这件SuperDry T恤是什么色彩。(查看大图)

Jaspe(本来应当是“jaspé”)是指随机的斑驳或纹路,所以应当加上这么的特别阐明:“灰绿色树叶纹路”。

5. 连接的辨识度

连接应当简单被发现,不用依靠色彩。下图模拟了全色色盲(看不到色彩)阅览UK Government Digital Service (GDS)网站所见到的画面。很多连接都难以发觉。例如你有没有注意到“GDS team, User research”(标题下方)是连接?


GDS

GDS博客在全色色盲眼里的姿态。(查看大图)

要发现一个连接,用户只能鼠标悬停,等候指针成为一个手形。在移动端,他们只能点按文字,期望它触发页面恳求。

上面带有图标的连接更简单发觉。而那些没有图标的,加一条下划线是个好办法,GDS在文章正文有些恰是这么做的:


GDS

带下划线的连接更简单被全色色盲发觉。(查看大图)

6. 色彩组合

在实际国际,你无法操控色彩的组合排列:赤色的苹果也许掉进绿色的草丛里。可是,咱们能够操控页面规划中运用的色彩。下面这些色彩组合应当尽量防止:

绿色/赤色

绿色/棕色

蓝色/紫色

绿色/蓝色

浅绿色/黄色

蓝色/灰色

绿色/灰色

绿色/黑色


Colour combinations as seen with Protanopia

色盲眼里的色彩组合。(查看大图)

7. 表单的默许文字

没有标签,,只用框内的默许文字提示,这是个疑问,由于默许文字一般缺少满足的比照度。Apple的注册表单就有这么的疑问,请看下图:


Apple registration form

Apple的注册表单运用了不带标签的文字提示。(查看大图)

不主张增强比照度,由于那样就难以差异默许提示和用户输入的文字。

最佳仍是运用标签——毕竟是最佳实习——比照要明显,下图中的Made.com恰是这么做的:


Labels

Made.com运用了比照度激烈的标签。(查看大图)

8. 主按钮

一般状况下,只有主按钮运用色彩来体现,Argos在它的登录页面即是这么做的:


Argos login screen

Argos的登录界面依托色彩来着重主按钮。(查看大图)

关于网站制作,看看客户怎么说
***(匿名) 评价文章 成都艺美高画材公司网站制作服务

2016年6月,我司成功签约成都艺美高画材有限公司的网站制作服务,非常感谢成都艺美高画材有限公司对智唯网络的支持。 成都艺美高画材有限公司成立于2016年,公司秉承着质量...

***(匿名) 评价文章 广州建设网站制作公司哪里好?

广州建设网站制作公司 建站的资讯在哪里 消费者对于广州建设网站制作公司进行建设的咨询还是比较关注的,希望能够通过一些比较正规的方式来进一步的了解一下最近所做的...

***(匿名) 评价文章 细节更能体现网站品质网站制作切莫因小失大

网站制作已经不是多么高深的技术活,对于很多公司来说,自己的IT部门就可以下载一个开源的网站系统,然后再让设计师捣鼓出一个网站出来。但是真正想设计制作一个高水准...

我要咨询做网站
网站建设定制案例
网站建设 相关的文章
建站流程
  • 网站需
    求分析
  • 网站策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • +86 0757 81089123
    400 028 3820
品牌网站定制
营销型网站定制
公司网站建设
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

广州建站 感恩回馈

咨询送礼现在提交,将获得智唯网络策划专家免费为您制作
价值5880元《全网营销方案+优化视频教程》一份!
下单送礼感恩七周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线0757-8108-9123
合作意向表
您需要的服务
您最关注的地方
预算
  • 验证码

直接咨询