I guess I'm doing this. A couple of months ago, I hopped back on learning to code after quitting at least twice.
My new year's resolution was to dedicate the next 2 years to learning to code and here I am, 6 months into the year, with my own web app.
I wanted to build small but meaningful—something that made use of what I was learning in JavaScript. That's how Syntrast, a color contrast checker, was born.
What Is Syntrast?
SYNTRAST is a color contrast checker to help developers, especially beginners like myself, select the right colors for their projects.
I’m not much of a designer (I love the logic part of coding—it looks cool... lol) so I struggle with colors.
I built this to help me with that.
You could argue that's already built into DevTools, but I wanted something to preview it before I even added it to my project.
Why Contrast Matters (and Why I Chose This Project)
When I first started brainstorming ideas for my JavaScript project, I wanted to build something that was both useful and realistic. That's when I was reminded of color contrast.
At first thought, I didn't pay much attention but after a deep dive:
- I realized it's more than making text look nice on a background.
- It's a big deal when it comes to accessibility.
- People with visual impairments rely heavily on contrast to read and navigate websites.
Web standards like Web Content Accessibility Guidelines (WCAG) have official minimum contrast ratios between text and background colors.
These guidelines help make the web more inclusive—and that clicked with me.
I wanted my first project to be not only functional but meaningful too.
Planning the Project
Once I decided to build the contrast checker, I didn't dive straight into coding it.
I took time to research what would make a Minimum Viable Product for a contrast checker.
I've learned (the hard way) that diving head-first into coding is a recipe for confusion and frustration.
So this time, I wanted to approach it differently: by thinking like a developer.
Understanding the project
Yes, I knew I wanted to build a contrast checker, but what features should it have?
So I asked myself (and ChatGPT):
"What does the program need to do and what should my application do in return?"
What I ended up with:
- The user should pick 2 colors.
- My program should read those colors.
- My program should convert them into something usable (I learned that would be RGB values).
- My program should calculate the contrast ratio between the colors.
- The program should tell the user if the contrast is excellent, acceptable, or poor.
This looked easy... until I began the project—especially step 3. More on that later.
UI Design
I already knew HTML & CSS, so I decided to make a minimalistic UI since most of my focus was on JS anyway.
What I did:
- Two color inputs – To give the user the ability to select colors
- Three buttons – A "Check Contrast" button, "Copy HEX", and "Swap Colors"
- A preview section – Instant feedback on the color selection
- A result section – To display the result
- A help button – To teach users how the program works
- Auto theming – Matches the system's dark/light mode
- A theme switcher – For manual toggling
Logic Breakdown
Here’s how the logic broke down for me:
- Get values from input fields
- Write a function to convert HEX to RGB
- Understand how to calculate luminance and contrast
- Use
ifstatements to return the right message - Display that message in the UI
Why Convert HEX to RGB?
It's simple: The contrast ratio formula from WCAG requires RGB values—not HEX.
HEX values are strings. RGB values are numeric, which makes them usable in math operations.
What I Knew Before Starting This Project
Before I built Syntrast, I was (and still am) not a JS expert.
What I knew:
- Declare variables using
letandconst - Write functions
- Use conditionals:
if...else,switch, ternary - Loops
What I didn’t know:
- DOM Manipulation
- Events
- How to calculate luminance or contrast ratio
- Array methods
- Web APIs
But I knew those were crucial to this project, so I decided to learn on the job—and I’m glad I did.
What I Learned While Building
One of the first problems I came across was getting the input from the HTML inputs.
That’s when I learned DOM Manipulation.
DOM (Document Object Model) is basically how JS "sees" and interacts with your HTML.
I learned to:
- Select elements using
document.getElementById();
document.querySelector();
- Access the user's input using .value
- Use
console.log()to check if I was getting the right data
It felt like magic when I checked the console and saw the HEX code pop up for the first time.
Converting HEX to RGB
With that challenge out of the way, the next hurdle was converting the HEX value to RGB.
Like I mentioned earlier, contrast calculations need RGB, not HEX.
HEX values are strings, while RGB values are numbers.
Here’s how I approached it:
- Break the HEX string into three parts: red, green, and blue.
-
Understand how HEX color codes work. A typical code like #aabbcc splits into:
aa → red bb → green cc → blueSometimes you’ll get short HEX like #fff.
I learned to expand those to #ffffff for consistency.
This meant diving into array methods like:
split() – to break the string into characters
map() – to repeat characters if needed
join() – to stitch everything back together
- Then I used:
parseInt(value, 16)
...to convert HEX pairs to numbers, and stored them in variables
let r,g,b;
Building the Core Logic
Now it was time to write the heart of the app: calculating contrast ratio.
This involved:
1. Calculating the relative luminance of both colors
2. Using the WCAG formula to get the contrast ratio
3. Categorizing the result (Excellent, Acceptable, Poor)
This is where the math kicked in — and weirdly enough, I loved it.
It reminded me of why I enjoyed math back in school.
I also learned:
- Why green is weighted more than red and blue (it affects brightness more)
- How the formula ensures readability and accessibility
When the numbers finally worked and gave the right feedback, it felt like magic again.
Making the App Interactive
Now that everything worked behind the scenes, it was time to bring it to life.
That’s when I discovered:
addEventListener()
– to listen for clicks
- Callback functions – to trigger the logic when needed
I wired up the Check Contrast button so that when the user clicks it, the app:
- Reads the colors
- Converts them
- Calculates the ratio
- Updates the UI with the result
That’s when it all came together — a real working web app.
Wrapping Up: From Blank Page to Working App
A few months ago, I was just a beginner trying to get back into coding after quitting twice. I made a promise to myself at the start of the year: “Give it two years. No matter what.” And now, halfway through the year, I have something real to show for it—a working web app I built from scratch.
Not copied. Not from a tutorial. Built. By. Me.
Syntrast might be a small tool, but for me, it’s huge. It’s a symbol of showing up, learning through doing, and realizing that even your first project can make a real difference. It doesn’t have to be perfect or groundbreaking—it just has to be yours.
Along the way, I:
- Faced bugs that had me doubting everything
- Googled like my life depended on it
- Asked ChatGPT more questions than I care to admit 😅
- And celebrated every “Aha!” moment like I won the lottery
Most importantly, I stopped waiting until I “knew enough” to start building.
Because here’s the truth: you learn the most when you’re in the middle of making something.
So if you’re just starting out too—don’t wait.
Pick a simple idea, something that solves your problem.
Then break it down, learn what you need, and start building.
It’ll be messy, confusing, and sometimes frustrating.
But it’ll also be rewarding, exciting, and confidence-boosting.
And who knows?
Maybe you’ll end up with something like Syntrast.
Or something even better.
👋 Thanks for Reading!
If you made it this far, thank you!
If you want to try out Syntrast, check it out here.
You can check out the repo as well.
Feel free to give feedback or even fork it and build your own version!
Let’s keep learning, building, and showing up.
Until next time,
Keep shipping. Keep learning. Keep coding. 🚀
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.