改变客户的想法。

没有什么可以解决这样一个事实，即蓝色背景上的红色文本对于易读性来说是一个极差的选择，因为对比度太低，而且特别是红色和蓝色作为对比色效果不佳。

这个网站webaim.org显示你的两种颜色之间的对比度是可怜的 1.52:1

对比度对于易读性很重要

文本对比度是文本易读性的更重要方面之一。幸运的是，Web 内容可访问性指南(WCAG) 2.0 专门解决了文本对比问题，并提供了尽管旨在为残障人士提供 Web 可访问性的指南，但总体上也提供了合理的建议。

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

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

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

希望所提供的链接可以帮助您以更可靠的方式提出您的案例，而不是简单地争论您觉得难以阅读。事实证明，它很难阅读。

拟黄体

如果这还不够有说服力，试试这个——Chromostereopsis（简而言之！）是一种视觉错觉，会给观众带来景深问题。这很不愉快！

虽然绝不是完美的（甚至是好的），但在文本中添加白色（或其他）轮廓有助于提高可读性：

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

你不能。那些深浅不一的红色和蓝色都是深色的、饱和的颜色，它们实际上是相互震动的，而那些文字会让人流血。任何不关心文本易读性的开发人员或设计师都应该在红宝石轨道上跑出城外。

尝试使红色更轻。它看起来是粉红色的，但更具可读性。或者在该背景上使用白色或淡黄色。众所周知，深色背景难以辨认。您可以使用相同的一般颜色 - 绿蓝色 - 但使其更亮。但是鲜红色的文本也不容易阅读，所以我会放弃文本的配色方案。

正如已经指出的那样，这是可怕的颜色对比。对于色盲的人来说，这也是一个糟糕的调色板（红蓝色盲，对比度下降到该死的接近 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)）作为起点。