Material UI 在对比度和亮度 (ReactJS) 方面是否与 RGAA 兼容?

问题描述

我需要根据背景颜色设置文本颜色自动显示(文本为黑色或白色)。我看到要可以访问,该网站的对比度必须为 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'
    }
}

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)