Notices by miunau (miunau@meow.social)

Figured out how to color text black or white depending on background lightness without breaking the components down to HSL in #css

Edit: this is now a blog post! https://miunau.com/posts/dynamic-text-contrast-in-css/

Assuming --bgColor contains your background color:

This will turn to black around #AAAAAA. adjust brightness lower if you want it to turn to black earlier. play around with contrast as well, using low and high values.

After playing around with this (thanks @mia), we noticed there's some fringes happening at certain color values right when it is about to switch from black to white, so this might work best with colors that you get to control to some degree.

But! Here is a version that has no fringing:

Add this somewhere in your markup- it can be anywhere as long as the id bwFilter can be referenced.

Then just reference it in your css:

tada! no fringing!

svg version here: https://codepen.io/miunau/pen/oNVaJoN?editors=1100

@GossiTheDog but who spelled it "producation"

@SuperDicq @loup yeah the ones i've used want you to load an external stylesheet which gives the font faces. they have overage fees and stuff

i use these for work, the designs call for specific typefaces

@SuperDicq @loup well it suits their wallet

@SuperDicq @loup most of the foundries price their stuff based on pageload. which suits single page apps i guess? i'd just prefer to give them a grand or something and have the fonts myself

@loup monotype's licensing sucks though. it's really unworkable for web

@loup 50% off!!!