24

我正在尝试改善现有的网站，而这就是我开始的目的：

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

我发现这种颜色组合很难看懂。其他人则不同意，但是我们已经同意，它在很大程度上取决于对比度，亮度和其他显示属性（甚至是视角）：

我已经尝试了不少用-webkit-text-stroke，text-shadow（见上面的代码），但正如我在一个显示器上改进的东西，它会在另一个更糟糕。

在保持整体配色方案的同时，我还能做些什么使它在各种显示器上更具可读性？

color website-design color-theory

— 啤酒
source

22

随时向您的客户显示此评论。我有多年的设计经验，可以向您保证，上述问题中的“其他”（他们认为可读）完全错误:)应当更改整个方案，因为它无法修复。

— mayersdesign

15

我有30多年的设计师经验……我完全同意上面@mayersdesign的评论。该配色方案应立即被拒绝。

— 斯科特

6

首先，您应该了解配色方案的目的。在UI的配色方案中，使用中性色作为原色是有意义的，任何强调色都应谨慎使用。以YouTube为例，想到什么颜色？红色和黑色，但请查看实际的YouTube网页，其98％的白色和浅灰色。红色仅用作口音。

— 欢乐时光编码

谢谢大家（包括答题者）！我只是仔细检查了SE，以查看自今天早上以来我期望发表的1或2条评论，现在是。我学到了很多东西，并收到了一些令人信服的论点-谢谢！

— bers

1

1995年致电。他们想要他们的配色方案。

— Mazura

54

改变客户的想法。

没有什么可以解决以下事实：蓝色背景上的红色文本对于清晰度而言是极差的选择，因为对比度太低，并且特别是红色和蓝色作为对比色效果差。

该网站webaim.org显示，两种颜色之间的对比度可怜的1.52：1

对比度对于可读性很重要

文本对比度是文本可读性的更重要方面之一。对我们来说幸运的是，Web内容可访问性指南（WCAG）2.0专门解决了文本对比问题，并提供了一些指南，尽管这些指南旨在为残疾人提供网络可访问性，但总体上也提供了合理的建议。

WCAG级别AA要求普通文本的对比度至少为4.5：1，大文本为3：1，而AAA级AAA要求普通文本的对比度至少为7：1，大文本为4.5：1。

因此，您客户的网站与已发布的专业指南直接矛盾。这也与审美趣味相矛盾（以我的专业观点）

如果需要，您仍然可以在设计中使用红色和蓝色元素。但是，在蓝色背景上放置“内容大小”的红色文本只会使您网站的大部分访问者拒之门外。我认为您有专业的责任说服客户不要使用它。

希望所提供的链接可以使您的案例更加稳健，而不是简单地认为您难以阅读。实际上，事实证明它很难阅读。

嗜铬菌

如果还没有足够的说服力，请尝试以下操作- 色盲（简而言之！）是一种光学错觉，会对观看者造成景深问题。真不愉快！

— 市长设计
source

11

为了明确起见，W3C文档中的对比度是最小值。不要说比例应该在4.5：1或7：1之间；他们说应该至少是其中之一，具体取决于您要定位的辅助功能级别。

— 阿德里安·麦卡锡

1

很好，我已经更新了答案，以包括更多细节，尤其是这一点。

— mayersdesign

8

尽管这绝对不是完美的（甚至不是很好），但在文本中添加白色（或其他）轮廓可以提高可读性：

如果您的客户坚持保留颜色，这可能会很有用。

— 格林姆林
source

公平地说，这仅适用于36pt类型。

— user8356

是的，很棒的想法。不意味着讽刺。而且您应用的次数越多，我们阅读文本的效果就越好。因此，将白色轮廓线一直拖到屏幕边缘...眨眼，眨眼。

— Martin Zaske

8

你不能红色和蓝色的阴影都是深色饱和的颜色，它们几乎彼此振动，并且该文本将使人的眼睛流血。任何不关心文本可读性的开发人员或设计师都应在红宝石栏上跑出城镇。

尝试使红色的A LOT更轻。它看起来是粉红色的，但可读性更好。或在该背景上使用白色或浅黄色。众所周知，深色背景难以辨认。您可以使用相同的一般颜色-绿蓝色-但要轻得多。但是明亮的红色文本也不容易阅读，因此我只需要废弃该颜色方案即可。

— 用户名
source

7

正如已经指出的那样，这是可怕的色彩对比。对于色盲人来说，这也是一个糟糕的调色板（红蓝色盲，对比度下降到该死的接近1：1的水平，这是完全不可读的）。

您最好的选择是使客户相信，他们不应该将彩色文本和背景混合在一起。要么为文本着色，要么为背景着色，而不是两者都着色。尝试将模型加载到一个工具中，该工具可以模拟色盲感知（您可以在网上找到几个不错的选择），并将结果显示给客户，这将大大有助于说服他们。

如果这不是一个选择，那么您可以尝试提高可读性的其他方法包括（请注意，这些方法都不能解决色盲问题，它们仅有助于对比度或一般可读性：

使用等宽字体。听起来很愚蠢，但这实际上确实可以帮助大多数人更轻松地阅读文本。显然不是Courier New，而是Bitstream Vera Sans Mono（或什至是Droid Sans Mono之类的东西）应该看起来还不错，而且可读性更高。
调整字体粗细，然后再调整大小。独立于对比度，更大，更粗的文本更易于阅读。
交换配色方案（即，在明亮的红色背景上将其变为深蓝色文本）。听起来很简单，但通常对于大多数人来说，将深蓝色变成鲜红色比其他方法容易得多。
在具有偏移的文本上添加高对比度的窄阴影。您想要的不是融合到背景中，而是一个硬边缘，可提供良好的对比度。偏移阴影也可以帮助解决此问题，尤其是简单的对角偏移。我还要在这里用黑色代替白色（您要强调文本，而不是背景，所以要与文本形成高对比度）。总体而言，类似的东西text-shadow: 2px 2px 4px black;可能是一个不错的起点。
大大减轻红色。目前，您正在使用rgb(255,0,0)。我会先尝试类似的东西rgb(255,204,204)（甚至可能更轻），然后从那里进行调整。
使蓝色变暗。较接近rgb(25,51,77)的颜色几乎相同，但应足够暗以使文本更具可读性。

还有一个选项也可以帮助解决色盲问题：

降低蓝色背景的饱和度。虽然不是最好的选择（它确实使配色方案有些偏斜），但是这应该会在我列出的其他所有内容中最大程度地提高可读性，因为它将积极地提高对比度。我会尝试将饱和度降低大约30％（即rgb(82,102,122)）作为起点。

— 奥斯汀·海默加恩
source

6

如果您已经尝试过文本阴影，那么我认为保持相同颜色的唯一可能性就是使文本跨度

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

款式

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}

— 丹妮略
source

1

甚至硬纯白色为好

— aloisdg说恢复莫妮卡

1

那些仍然难以阅读的我..

— 欢乐时光编码

@Dylan你觉得什么jsfiddle.net/bersbers/xdkj76L3

— 别尔斯

2

其可读性。我认为这不是一个好主意。但是可以读取。

— 欢乐时光编码

blog.theteamw.com/2009/11/09/...

— yunzen

5

您需要在背景和文本（前景中的对象）之间具有足够高的对比度，以使其可读，并且最小对比度为4.5：1。 https://www.oss-usa.com/color-check-ada-image-compliance表示您的背景和前景太靠近而无法阅读。

有时，必须告知客户配色方案不能完全保留，需要对其进行修改以满足可读性要求。显然，将文本反转为浅色可提供与深色背景足够的对比度。

— 马克斯·托克曼
source

3

“如何使文字更具可读性？” 简而言之，您不会！颜色组合不符合网络可访问性准则，因此不应使用。应该使用不同的前景色或背景色。无论您假定的目标受众是谁，您都应该始终致力于迎合视力障碍的人，这很容易解决。

您可以在这里查看颜色组合的对比度... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— 安德鲁
source

2

（评论不足）

您可以尝试在文本中添加笔触。我在Photoshop中使用的是“笔画”一词，基本上是将文本的边框/轮廓线的颜色用作对比。黑色/白色应该没问题（特别是如果您使用笔触粗细），但是我认为红色/蓝色的某些阴影也可能起作用。

— Allthemikeys被夺走
source

如何使这种颜色组合更具可读性？

改变客户的想法。