beeps Feb 26

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

Show threadbeeps 

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. 👀

Feb 26 at 8:22pmWeb
Show threadKinachiFeb 26
Out of curiosity, have you ever used the Material Design 3 theme builder? I’ve been using that for some palette generation and was wondering how well it performs for accessibility
Show threadbeeps Feb 26

@kinachi.lugiaberry.art I haven't used it directly, but it seems to provide colours specifically for use on top of other colours makes me think they are performing the same or similar contrast assessments.

Generating a random example and checking them manually seems that they at least meet the minimum contrast for any text at Level AA. It didn't meet minimum contrast for some UI elements unless I selected a higher contrast option.

Show threadElectric Keet, SN76489 enjoyerFeb 26

@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!