在一个段落中考虑对比的整个地方
当我们考虑在设计中选择颜色时,我们一直在考虑可访问性。每当颜色触摸时,就会发生对比度,如果我们谈论文本的颜色对比,则需要足够高才能可读。这使患有各种视觉障碍的人受益,但每个人都喜欢易于阅读的文本。
让我们看一下只有一个段落的颜色对比度考虑!
段落中的链接可能以另一种颜色设置,以将其区分为链接。
聚焦元素(例如链接)也需要具有焦点样式。默认情况下,我们可能会得到一个模糊的蓝色轮廓,因此我们需要检查是否有足够的颜色对比度。而且,如果我们自定义,则自定义也需要良好的颜色对比度。
我们还需要鼠标用户的悬停状态。在这里,我将使用覆盖文本一半的背景效果。当您做这样的事情时,效果需要足够强大才能在悬停方面显着,并且对比度需要在两个背景下工作。
这不是超常见的,但是您可以样式:也访问的链接。样式有些有限(例如,您无法更改不透明度或背景,因为这是安全问题),但是您可以更改颜色。如果这样做,它也需要正确的对比度。也许我们可以用颜色来拉动颜色的差异:继承;在某种程度上强调了链接,但仍然表明了这一点。
要考虑的另一件事是人们强调文本。在我的计算机上,我设置了它以默认情况下以橙色突出显示(通常是MacOS上的浅蓝色)。
希望链接颜色在用户可能拥有的任何突出显示颜色选择下都能保持。它们往往是非常浅的阴影。
您也可以通过::选择来控制文本选择颜色{背景:紫色; }。如果您这样做了,则必须再次检查所有颜色,以确保您获得了足够的对比度。
您可以通过改变颜色和背景来尝试将措施纳入自己的手中。
但是请注意,文本内部的链接在这里失去了一些对比。我们可以通过在A ::选择以及文本中具有自己的其他颜色的其他元素上设置新颜色来继续沿兔子洞沿兔子洞。
我想说一个好的经验法则是,如果您要制作自定义突出显示颜色,然后不为选定的文本执行任何其他自定义。
这篇文章的想法来自我从人们报告的一些错误报告中,在强调文本时,在此网站上很难阅读链接,然后将其集中在此网站上。我尝试通过更精致的方式来修复它,但是您可以做的事情有限制。
::选择A:焦点{ / * nope * /} 答:焦点::选择{ / * nope * /} A ::选择:焦点{ / * nope * /}
通过做得比更多的事情更好地处理。
我最近阅读了Ethan Muller在设计系统帖子中的设计,他在对比度上也有类似的观点,但是在颜色谱而不是跨环境中。例如,您的蓝色链接颜色可能在您的一些设计系统颜色上可以正常工作,但在其他设计系统颜色上却没有那么多。
有几件事可能会有所帮助。
- “每次您声明背景色,声明颜色”可能会有所帮助。
- 我已经使用了父母级别的类,例如on Light,在浅色容器中广泛地更改事物的颜色。
- 我已经使用了Sass Mixin来帮助更容易更改链接和链接状态,因此在更改背景时,我更容易做到这一点。
@mixin linkstyletext($ linkColor){ a { //用$ linkColor更新通用链接样式 &:徘徊, &:重点 { //还可以通过编程更改$ linkColor来更改悬停/焦点样式 } } } 。变化 { 背景:$ SOMENEWBGCOLOR; linkstyletext($ SOMENEWLINKCOLOR) }
好吧,感谢您与我一起旅行。我只是想到颜色对比并不像在背景上检查单个链接颜色那样简单,以确保其通过。根据您在身体副本中着色的东西,可能会有十二件或更多的东西可以检查。
这些屏幕截图中的字体是Ibarra Real Nova,该字体最近刚刚在Google字体上发布。
以上是在一个段落中考虑对比的整个地方的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

您是否曾经在项目上需要一个倒计时计时器?对于这样的东西,可以自然访问插件,但实际上更多
