Please sign in to access this page
You do your style, we make it accessible.
Like, have you ever made your site look super aesthetic and then someone’s like “uhh, I can’t read this”? Same.
CM-Colors takes your color combos and makes just-enough tweaks so they still look good, but now it's easier on the eyes to read - aka passes accessibility contrast ratio :>
A mix of math x color science to make it happen ( Think gradient descent, binary search, oklch color space ) - Checkout the Technical README if interested
No followers yet
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Okayy here's the long time due story ( 70hrs schedule in my uni TT )
This was my first project kinda with js and I started trying to do all the math and color stuff, there was apparently a ready library which made me more motivated to work with it but nope i literally just can't get as comfortable as I am with python math, so scraped the whole formulation and code - it was just a vue web app to begin with, which takes in a pair of color to tell it's contrast
But atleast the algorithm is same, so implemented the whole thing in python again but guess what there was no single python library which had the functions I want, so had to go through loads of research paper, and implement evth from scratch and keep experimenting and run alot of ( 100's!! - so glad I chose python instead ) tests and kept improving the algorithm, in the meantime there was this devlog issue which took a week to fix and it messed up my time logged, it was finally fixed but all of my time went into a 50hr single devlog instead ( like excuse me ) and many with 0 time devlog, thanks to SoM helpers Fr, anyway so after the experimentation I found out my current brute force would take sm sm like exponential time to calculate stuff which is obviously bad, so again ran many experiments to finally come up with a gradient descent x binary search basically constrained optimisation stuff and now it's log n time!! Implementation of a formula called DeltaE2000 which in a nutshell just measures from human eye pov, how diff do a pair of colors look from ep
I had to look up so many research papers and built, scraped so many html css pages testing of the optimisation
I kinda finally became grateful I learned optimisation in my ml class ( I am a data science major and no I am still 18 dw got my age verified )
I saw this cool video on Bayesian search few months ago and considered it for the algorithm too, but it would be an overkill here and not really suitable
Bayesian search is usually used in algorithms that detect where a lost person could be in an ocean, statistics stuff yeah
Oh yeah and suddenly 2-3 contributors came in!! Within 2 weeks of release or so and got 100ish downloads from pip only ( queried through big query - again grateful to be a ds major )
Woah, so basically released 0.1v along with its documentation and stuff, user side documentation uses rst ( Readthedocs ) and contributor side uses md ( mkdocs ) format,,
Right so basically what the algorithm does is, the colors usually have 3 properties- lightness, chroma, hue and any change in hue changes the color the most and makes it look some other color
But we don't change hue at all, we first do a binary search in lightness space trying to see if we can fix contrast with lightness change alone, if not we go for both chroma and lightness to see how to achieve it ( constrained optimisation ) while keeping DeltaE<2 ( most people won't notice the color change )
Oh dude finally got the time to write down this stuff,, long time due for my midsems just got over
And it's donee people!! Finally stable version is up for release and now it takes any hex or rgb strings too!!
Uff finally functional stuff are done for v0.1.0 refactor
The core function tunecolors() takes 2 values - a text color, bg and basically sees if it's readable enough aka is the contrast high enough ?
If yes, just returns the original text color, isaccessible=True
else is where our magic comes in,
At first I was trying to brute force and search the color space of the text color, such that the tuned color isnt too different but just enough for it to be accessible
Now we use binary search x gradient descent
- First try to play with lightness of a color to see if it's enough
- If not, use gradient descent to maximise the contrast and minimise the color difference of tuned text color vs original text color ( measured by deltaE2000 - really cool, look it up )
The result is what you would see in the project's banner image
We already got 4 contributors, can you believe that? omg
Let's go and make the world more accessible!!
Gonna ship it yay!! Finally done
CM-Colors 🎨
Mathematically Rigorous Accessible Color Science Library
An open-source Python library for improving color accessibility while preserving brand identity. Built with research-grade mathematical precision and practical accessibility tools.
💙Sarvam shri krishna sankalpam💙