Expression-based Contrast Ratio Calculator

[Filip Vandueren]

Short answer is that ^ as a power-function is not supported in expressions.
Either use Math.pow(x,2.4) or in the new javascript-Engine you can use x**2.4

Also, in the contrast-formula, the brightest color should always be the numerator, see below

In the new engine I’d re-write the whole thing like this:

function sRGBtoLinear(rgba) {
for (i=0; i<3; i++) {
u=rgba[i];
if (u<=0.04045) {
u = u/12.92;
} else {
u = 1.055*(u**(1/2.4)) - 0.055;
}
rgba[i]=u;
}
return rgba;
}
function rgb_to_y(rgba) {
return 0.2126*rgba[0] + 0.7152*rgba[1] + 0.0722*rgba[2];
}

txt1 = thisComp.layer("Color1NoTag").text.sourceText.value;
txt2 = thisComp.layer("Color2NoTag").text.sourceText.value;
rgb1 = hexToRgb(txt1);
rgb2 = hexToRgb(txt2);

l1=sRGBtoLinear(rgb1);
l2=sRGBtoLinear(rgb2);

y1=rgb_to_y(l1);
y2=rgb_to_y(l2);

((Math.max(y1,y2)+0.05)/(Math.min(y1,y2)+0.05)).toFixed(2) +":1"

[Chaz Chester]

This is so much better than what I had. I adjusted it slightly and now it’s doing exactly what I wanted. Adding the expression in case anybody else wants it. Thanks, Filip!

function sRGBtoLinear(rgba) {
for (i=0; i < 3; i++) {
u=rgba[i];
if (u <= 0.03928) {
u = u/12.92;
} else {
u = (u + 0.055)/1.055;
u = Math.pow(u,2.4);
}
rgba[i]=u;
}
return rgba;
}
function rgb_to_y(rgba) {
return 0.2126*rgba[0] + 0.7152*rgba[1] + 0.0722*rgba[2];
}

txt1 = thisComp.layer("Color1NoTag").text.sourceText.value;
txt2 = thisComp.layer("Color2NoTag").text.sourceText.value;
rgb1 = hexToRgb(txt1);
rgb2 = hexToRgb(txt2);

l1=sRGBtoLinear(rgb1);
l2=sRGBtoLinear(rgb2);

y1=rgb_to_y(l1);
y2=rgb_to_y(l2);

((Math.max(y1,y2)+0.05)/(Math.min(y1,y2)+0.05)).toFixed(2) +":1"

[Peter Denisimo]

This looks awesome and just like what I’m trying to do! I’m still a little confused though… how many layers did you have in your comp, just the two text layers? Also, can you specify where exactly you’re adding these expressions to? Finally, how do you see the actual contrast calculation? Sorry if these are dumb questions, I’m still relatively new to expressions… Thanks!

[Kevin Camp]

It looks like they have at least 3 text layers, 2 for the hex values and a 3rd for the output of the contrast ratio.

The expression above would go into the source text of the 3rd text layer.

[Peter Denisimo]

Thanks for the response, Kevin! Unfortunately I tried that and I’m getting an error that says “Bad argument” – I’ve attached a screenshot here of the expression i have and drew a red arrow to where the error message is indicating the error is.

Also, I should note that in Project Settings > Expressions, i have it set to “Legacy ExtendScript” – when I have it in JavaScript it still gives me a “Bad argument” error except this time at line 1.

As far as software/system, I’m using AE 2020 – v17.0.5. Also, I’m on PC using Windows 10.

Any idea what I’m doing wrong here? Was hoping to turn this into an Essential Graphics file that could be used in Premiere. Any help would be much appreciated, thanks!

[Chaz Chester]

Hi, Peter!

It looks like this was my setup. I think the issue is that your color layers say “Color1NoTag” and “Color2NoTag” instead of “000000” and “808080”, which should give you a contrast ratio of 5.32:1

[Peter Denisimo]

Ahhhh, oops! Thanks Chaz, it’s working now! I converted this into an Essential Graphics .mogrt file that can be used in Premiere with a color picker – works great! I’ve attached it here in case anyone wants to check it out. Thanks again!

Color-Contrast-Checker-1.0.zip 25 KB Zip - Click to view

• Copy Download Link