Create a color contrast checker with HTML, CSS, and JavaScript
In this tutorial, we’ll create a color contrast tool that lets you check the accessibility and readability of text, by comparing the ratio between background and foreground colors.
In this tutorial, we’ll create a color contrast tool that lets you check the accessibility and readability of text, by comparing the ratio between background and foreground colors.
To be honest, I was a smidge skeptical. I know what a design token is. It’s a variable of a color or font-family or something. I pretty much only work on websites, so that exposes itself as a –custom-property and I already know that using those to abstract common usage of colors and fonts is smart and helpful. Done. I get that people managing a whole fleet of sites (and apps running in who-knows-what…
CSS has evolved from a purely presentational language into one with growing logical powers — thanks to features like container queries, relational pseudo-classes, and the if() function. Is it still just for styling, or is it becoming something more? Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the challenges it addresses, whether it is becoming too complex, and how developers are reacting to this shift.
In the spirit of 12 Factor Apps. The source for this project is public at https://github.com/humanlayer/12-factor-agents, and I welcome your feedback and contributions. Let’s figure this out together!
“These questions feel really personal”; ”This is going to be too controversial”; “You should stick to programming surveys”.
Chrome 137 shipped the if() CSS function, so it’s totally possible we’ll see other browsers implement it, though it’s tough to know exactly when. Whatever the case, if() enables us to use values conditionally, which we can already do with queries and other functions (e.g., media queries and the light-dark() function), so I’m sure you’re wondering: What exactly does if() do?
This single property gives you full control over where your background image appears inside an element — which is crucial for responsive design, hero sections, custom banners, and more.
After 6 months of hard work, we’re launching Flowbite Design System v3.0! – fully integrated native tokens and variables – refreshed all UI components with modern 2025 design – massively improved performance and memory usage – improved usage documentation and more.
This post shows the full process – start to finish – by actually designing a tiny app while we go. No designer in the loop, just vibes, taste, and a few rounds with an LLM.
We recently got the new shape() function for clip-path which is a game changer for creating CSS shape. Another cool feature is on the way and will soon be available: corner-shape.