MMRIZE / CX3_Shared

shared library for CX3 series.
MIT License
0 stars 2 forks source link

OppositeColor calculation is sometimes hard to read #1

Closed btastic closed 1 year ago

btastic commented 1 year ago

Hello,

I was investigating why the some events are hard to read on my screen (turned up the contrast and brightness, to be fair). However, after investigating with some online accessibility checker tools, the calculation for the opposite colors leads to color combinations with a low contrast ratio.

I used this tool to check: https://webaim.org/resources/contrastchecker/

According to your code, an event-color of "#ffb100" will lead to a white text color (opposite color). When checking with the contrast checker, it will give you these results if white is the opposite color:

image

When using a black color, the contrast is much higher, and will lead to better readability.

image

I went online for a bit and I stumbled upon this blog post, which has the following code snippet:

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

Using this function in your code leads to more desirable color contrasts

eouia commented 1 year ago

Thanks for your contribution. I'll research and then admit your PR.

Anyway, I regard this feature as just a temporal trick. I'm waiting for a more robust and standard way color-contrast().