APCA contrast

[tobi-or-not-tobi]

I'm using color.js to get the color contrast for black text on a solid background color. If the contrast is not good enough (4,5:1), I'd use white instead. I'm using these 2 lines:

const sourceColor = new Color(color); // e.g. color(display-p3 0.718 0.925 0.991)
const contrast = sourceColor.contrastAPCA('black'); // e.g.  89.44591845137951

I'm unsure how I should compare the return number should be compared to the minimum of 4,5:1 provided by APCA. What am I missing?

[lloydk]

The 4.5:1 contrast ratio is specified by WCAG not by APCA.

If you change the second line to the code below you'll get the contrast ratio you're looking for.

const contrast = sourceColor.contrastWCAG21('black'); // 16.315049658050576

[tobi-or-not-tobi]

Thanks @lloydk I got myself confused 🤦 What output of APCA is considered enough contrast? Or isn't there such thing? I can imagine it depends, but I was hoping to have some reference for typical use cases.

[lloydk]

If you click on the APCA Guidelines: Bronze Level link on the APCA contrast calculator it will give you a summary of the appropriate levels for various use cases.

For a more details you can read APCA Use Cases and Conformance Research.

And I would also recommend trying out the maximum contrast guidelines for dark mode.

And here's some more links about APCA.