APCA contrast #494
-
|
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.44591845137951I'm unsure how I should compare the return number should be compared to the minimum of |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments · 1 reply
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
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.