That was so worth it.

The old method to calculate contrasts (WCAG 2) was very hard to handle because 1. it produced flawed results and 2. values didn’t really seem to relate to one another. Attachment 1 for the palette I got with it, and attachment 3 for the values fitted to a curve (which didn’t really work because that’s just how weird contrast values are here).

APCA solves all of this. My palette now has contrast values that basically are 0, 10, 20, 30, 40, 50, … and the resulting colors all “grow” consistently. This makes working with palettes so much easier.
The first 3 grays are used for backgrounds so their contrasts are intentionally different from the rest. (Attachment 2)

It keeps getting better and better. For my SASS framework, I implemented easing functions because back then CSS gradients didn’t support them natively yet. Easing functions are cubic bezier curves and are better known for their usage in CSS transitions and animations.

Well guess what, I can use these fucking easing functions to create contrast values. I love when everything comes together so nicely.

@volpeon Me looks at code. What kind of black magic is this

Cool to hear though that stuff is coming together for you.

"So what is the point of using easing functions here?", you might ask. Well, let me show you some palettes where all I did was changing the easing function:

1. No easing function. Or in other words: linear
2. cubic-bezier(.3, .1, .7, .9)
3. ease-in-cubic
4. ease-in-out-expo

Essentially, I can control how smoothly the palette goes from light to dark, similar to how you can control how smoothly elements move in CSS transitions/animations using the very same easing functions.

@volpeon I love how ungodly OP CSS is these days.