💡Have you ever wondered why the WCAG colour contrast ratio doesn't always seem to work?💡 Well it actually has to do with how we calculate colour contrast and is super interesting. Hold on to your butts, this is a 🧵

Why are some typefaces harder to read than others at the same font-size? Well, it has a lot to do with x-height but of course it's a bit more complicated than that: ↓

Why is making a dark mode greyscale so hard to get right? Well, of course it has to do with the weird way humans perceive colour and contrast. 👇

Ever heard of a shader but too afraid to ask what it even means at this point? Lets fuck around and find out 👇

If you are used to Figma, there's a quirk of Framer components that might catch you out. In Figma, variants can have completely separate layers. But in Framer, each variant contains all the layers from all other variants hidden inside of it. Let me explain.

Did you know these are called Boolean Operations? That's because they use booleans to determine which part of the shapes should be visible. Let me explain 👇

Do you just click different blending modes until it sort of looks right? Well, that probably won't change after you read this but at least you probably won't use Lighten or Darken again. (you should bookmark this thread and use it as a reference)

I've always wanted to know why some colours "vibrate" next to each other. I did some digging and it's actually the same reason good camera lenses are so expensive. 👇

Why can't you just draw a few black lines on a barcode and spoof the scanner? Well, the last digit in a barcode is actually there to do some clever error checking.

Ever wondered how a QR code works? No, me neither but it's low-key fascinating. (Warning, there is some extremely nerdy shit here.👇 )