Soft launch of a lil tool I've been working on: You plug in a list of hex colours and it'll give you previews, the contrast ratios and WCAG scores for each possible combination of those colours.

https://colors.beeps.gay/?colors=FFFFFF,F5F5F5,0FF10F,0BC148,252134,302750,7C56FC

Please don't hug it to death. 🙏

Contrast ratio color grid

WCAG's contrast ratio calculations are flawed, in that they only compare lightness values and don't account for how different hues have different perceptual brightness.

The APCA calculation method is much better at accounting for that, but it remains a draft that isn't likely to be implemented into accessibility specs any time soon, so this remains the de jure (sometimes literally) way of calculating things. I might add APCA support at some point, though. 👀

@beeps Yeah, I keep looking at this chart and feeling that the #6493B4 and #FFFFFF combinations have much better contrast than the #6493B4 and #551669, but the numbers disagree.

(This is for a site I'm presently working on. Still not sure what light mode will look like, especially now that I see dire contrast numbers where I thought things would be okay.)

Great tool, though!