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.
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:
When using a black color, the contrast is much higher, and will lead to better readability.
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
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:
When using a black color, the contrast is much higher, and will lead to better readability.
I went online for a bit and I stumbled upon this blog post, which has the following code snippet:
Using this function in your code leads to more desirable color contrasts