This is a little tool that uses the excellent color.js to calculate the contrast between every color pair in a given palette using the Accessible Perceptual Contrast Algorithm. I built it to help streamline the process of figuring out how to use a new palette.
APCA was designed to quantify perceived differences in lightness between two colors. They call this “lightness contrast” and denote it with “Lc”. It ranges from zero to ±106 with the sign being negative when the text is lighter than the background (e.g. white on black) and positive when the text is darker than the background (e.g. black on white).
The tricky thing is that Lc needs to be interpreted within the context of how the colors are being used. A value of -65 might be perfectly fine for some situations but unacceptable for others.
Luckily the creators of APCA have put together a set of reference ranges. For example, it says that an Lc of 90 is the “preferred level for fluent text and columns of body text with a font no smaller than 14px/weight 400 (normal)”, while 60 is “the minimum level” for “text you want people to read”.
I encourage you to check out The Easy Intro to the APCA Method for a full introduction, and the APCA info page has a lot more if you want to dig in.
To use this, put a list of colors in this box. It’s looking for groups of six hex digits separated by stuff that isn’t a hex digit. If you have a list of colors in hex format, it’ll probably work. Probably maybe. It might work.
If you don’t have colors of your own, try one of these: