使用 PHP 选择合适的背景/前景色

发布于 2024-08-28 19:10:03 字数 268 浏览 8 评论 0原文

我正在寻找为什么要计算合适的背景颜色和超出顶部的文本颜色,显然我需要考虑可读性和可访问性。

我需要从数组中选择两种颜色,颜色存储在它们的十六进制表示中。

#CC9966
#996633
#FFCC99
#CCCC99
#000000
#333333
#666633
#663333
#CC9933
#FFCCCC

我可以使用像 GD / imageMagick 这样的 PHP 库吗?

任何建议(请注意我使用的是 PHP)

I am looking to find a why to calculate a suitable background colour and a colour for the text that would go over the top, obviously I need to take into account readability and accessibility.

I would need to pick the two colours from the array, the colours are stored in their hex representations.

#CC9966
#996633
#FFCC99
#CCCC99
#000000
#333333
#666633
#663333
#CC9933
#FFCCCC

I can use a PHP library like GD / imageMagick?

Any suggestions (Please note I am using PHP)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

我的奇迹 2024-09-04 19:10:03

首先,我认为您应该看看这篇优秀的博客文章 粒子树

话虽这么说,我会使用他们的 smarty_modifier_contrast() 函数并对其进行一些修改以满足您的特定需求,例如:

function color_contrast($bgcolor, $color1, $color2, $color3, ...)
{
    return (hexdec($bgcolor) > 0xffffff / 2) ? min(array_slice(func_get_args(), 1)) : max(array_slice(func_get_args(), 1));
}

所以您只需要使用任何随机颜色作为背景(不要忘记删除 #!),然后将所有其他颜色传递给数组,在本例中,我使用了可变数量的参数,但您可以更改它这样它就接受单个颜色数组 - 然后它会根据 $bgcolor 自动选择最暗或最亮的颜色,并提供足够好的对比度以提高可读性:

function color_contrast($bgcolor, $colors = array())
{
    return (hexdec($bgcolor) > 0xffffff / 2) ? min($colors) : max($colors);
}

选择 $bgcolor,您可以像我之前所说的那样随机执行此操作,或者使用第二个函数来帮助您完成此任务,例如饱和度亮度,这实际上取决于您的需求正在寻找。

First of all I think you should take a look at this excellent blog post at Particletree.

That being said, I would use their smarty_modifier_contrast() function and modify it a little bit to address your specific needs, something like:

function color_contrast($bgcolor, $color1, $color2, $color3, ...)
{
    return (hexdec($bgcolor) > 0xffffff / 2) ? min(array_slice(func_get_args(), 1)) : max(array_slice(func_get_args(), 1));
}

So you would just need to use any random color for the background (don't forget to drop the #!) and then pass all the other colors to the array, in this case I've used a variable number of arguments but you can change it so that it accepts a single array of colors - it will then automatically pick the darkest or the lightest color depending on the $bgcolor and provide a good enough contrast for readability:

function color_contrast($bgcolor, $colors = array())
{
    return (hexdec($bgcolor) > 0xffffff / 2) ? min($colors) : max($colors);
}

To pick the $bgcolor, you can do it randomly like I said before of use a second function to help you with this task like saturation or luminance, that really depends what you're looking for.

月亮邮递员 2024-09-04 19:10:03

对于可读性和可访问性来说,选择随机颜色通常不是一个好主意,因此我建议您重新考虑您的设计。或者至少将文本限制为黑色或白色。

如果这不是一个选项,那么我建议计算两种颜色之间的“距离”,该距离大约等于颜色之间的视觉差异,因此也与可读性有关。

我会使用 distance = abs(2*(r1-r2) + 3*(g1-g2) + (b1-b2)),然后过滤掉任何没有足够高的组合距离。这应该确保您最终在明亮的背景上得到深色,或者在深色背景上得到明亮的颜色,这几乎是良好可读性的先决条件,并确保色盲的人也能看到两种明显不同的色调。颜色分量的权重不同,因为它们对总感知亮度有不同的影响。

Choosing random colours is usually not a good idea for readability and accessibility, so I'd suggest that you rethink your design. Or at least limit the text to only black or white.

If that is not an option then I'd suggest calculating a "distance" between two colours that would be approximately equal to the visual difference between the colours, and thus also somewhat related to the readability.

I would use distance = abs(2*(r1-r2) + 3*(g1-g2) + (b1-b2)), and then filter out any combination that does not have a sufficiently high distance. This should ensure that you end up with either a dark colour on a bright background, or a bright colour on a dark background, which is pretty much a prerequisite for good readability, and ensures that colour blind people will also see two clearly distinct shades. The colour components are weighted differently since they have a different impact on the total perceived brightness.

你的呼吸 2024-09-04 19:10:03

将每种颜色分解为其 RGB 分量,为每种颜色添加 0x80(或其他类似值,可能是 0x66),用 0xff 进行掩码,然后在表中找到最接近的值。

Break each color into its RGB components, add 0x80 (or some other similar value, perhaps 0x66) to each, mask by 0xff, and find the closest value in the table.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文