0

我需要根据背景颜色设置文本颜色的自动显示（文本为黑色或白色）。我看到要访问，网站的对比度必须为 4.5。事实证明，Material UI 会根据背景颜色自动更改文本的颜色，但我无法确定亮度和对比度是否符合 RGAA 规则。我看过很多关于更改文本颜色的主题，但如果你有一个明确的答案，那就太好了。如果 Material UI 没有提供正确的对比度，我该怎么办？将以下功能连接到我的主题？例如，我得到这个背景颜色：'#6586ef'

    const [r, g, b] = Object.keys(rgbColor).map((key) => {
        // Our color numbers represent a 8bit channel.
        // The formula requires a sRGB channel which is defined by
        // ColorChannelIn8bit / 255
        const channel = rgbColor[key] / 255
        return channel <= 0.03928
            ? channel / 12.92
            : ((channel + 0.055) / 1.055) ** 2.4
    })
    return parseFloat((0.2126 * r + 0.7152 * g + 0.0722 * b).toFixed(3))
}

export default function determineTextColor(color) {
    if (getLuminance(color) > Math.sqrt(1.05 * 0.05) - 0.05) {
        return '#000'
    } else {
        return '#fff'
    }
}

谢谢

4

0 回答 0