DEV Community: Joe Bou Khalil

Building an Advanced Color Contrast Checker for Accessibility (WCAG Guide + Auto-Fix)

Joe Bou Khalil — Sun, 12 Apr 2026 16:02:49 +0000

There are a lot of colors, but not all colors go together.

How to choose between colors? Which colors go with each? And even how color-blind people see colors?

All of these problems are solved in this code.

What it does?

You choose 2 colors you want.
It tells you if they go together.
You can make the app choose a color that matches.
And even you can choose between different color-blind disorders. And see how the colors are seen.

Code

`<!DOCTYPE html>

Advanced Contrast Checker body { font-family: Arial; background: #0f172a; color: white; text-align: center; padding: 20px; } .container { max-width: 600px; margin: auto; background: #1e293b; padding: 20px; border-radius: 15px; } input, select { margin: 10px; padding: 10px; border-radius: 10px; } .preview { margin-top: 20px; padding: 40px; border-radius: 10px; font-size: 22px; } button { padding: 10px; border-radius: 10px; margin: 5px; cursor: pointer; } .good {color: #22c55e;} .medium {color: #facc15;} .bad {color: #ef4444;}

🎨 Advanced Contrast Checker

<br>





    Normal Text

    Large Text





Check

Auto Fix



Accessible Text



<p id="result"></p>

<p id="details"></p>



<h3>Color Blind Simulation</h3>



    None

    Protanopia

    Deuteranopia

    Tritanopia

function hexToRgb(hex){

let bigint=parseInt(hex.slice(1),16);

return {r:(bigint&gt;&gt;16)&amp;255,g:(bigint&gt;&gt;8)&amp;255,b:bigint&amp;255};

}

function luminance(r,g,b){

let a=[r,g,b].map(v=&gt;{

    v/=255;

    return v&lt;=0.03928?v/12.92:Math.pow((v+0.055)/1.055,2.4);

});

return 0.2126*a[0]+0.7152*a[1]+0.0722*a[2];

}

function contrast(c1,c2){

let L1=luminance(c1.r,c1.g,c1.b);

let L2=luminance(c2.r,c2.g,c2.b);

return (Math.max(L1,L2)+0.05)/(Math.min(L1,L2)+0.05);

}

function check(){

let bg=document.getElementById("bg").value;

let text=document.getElementById("text").value;



let c1=hexToRgb(bg);

let c2=hexToRgb(text);



let ratio=contrast(c1,c2).toFixed(2);



let mode=document.getElementById("mode").value;

let pass = mode==="large" ? 3 : 4.5;



let result="";

let cls="";



if(ratio&gt;=7){ result="AAA"; cls="good";}

else if(ratio&gt;=pass){ result="AA"; cls="medium";}

else { result="Poor"; cls="bad"; }



document.getElementById("preview").style.background=bg;

document.getElementById("preview").style.color=text;



document.getElementById("result").innerHTML =

    `Contrast: ${ratio} - &lt;span class="${cls}"&gt;${result}&lt;/span&gt;`;



document.getElementById("details").innerHTML =

    `BG: ${bg} | TEXT: ${text}`;



speak(result);

}

function autoFix(){

let bg=document.getElementById("bg").value;

let text="#ffffff";



let c1=hexToRgb(bg);



for(let i=0;i&lt;=255;i++){

    let test=`rgb(${i},${i},${i})`;

    let c2={r:i,g:i,b:i};

    if(contrast(c1,c2)&gt;=4.5){

        document.getElementById("text").value=rgbToHex(i,i,i);

        break;

    }

}

check();

}

function rgbToHex(r,g,b){

return "#" + r,g,b].map(x=&gt;x.toString(16).padStart(2,"0")).join("");

}

function speak(text){

let msg=new SpeechSynthesisUtterance("Contrast is " + text);

speechSynthesis.speak(msg);

}

function simulate(type){

let preview=document.getElementById("preview");



if(type==="protanopia"){

    preview.style.filter="grayscale(50%)";

} else if(type==="deuteranopia"){

    preview.style.filter="sepia(60%)";

} else if(type==="tritanopia"){

    preview.style.filter="invert(20%)";

} else {

    preview.style.filter="none";

}

}

check();

What does the code do?

Color Conversion (Hex → RGB)

`function hexToRgb(hex){

let bigint = parseInt(hex.slice(1),16);

return {

    r:(bigint>>16)&255,

    g:(bigint>>8)&255,

    b:bigint&255

};

Converts colors like #ffffff into numbers:
Red, green, and blue values (0–255)

Luminance Calculation (VERY IMPORTANT)

`function luminance(r,g,b){

let a=[r,g,b].map(v=>{

    v/=255;

    return v<=0.03928 ? v/12.92 : Math.pow((v+0.055)/1.055,2.4);

});

return 0.2126*a[0]+0.7152*a[1]+0.0722*a[2];

Measures how bright a color actually is
Not just visually—mathematically accurate (WCAG standard)

Example:

White → high luminance
Black → low luminance

Contrast Ratio Formula (THE CORE)

`function contrast(c1,c2){

let L1=luminance(c1.r,c1.g,c1.b);

let L2=luminance(c2.r,c2.g,c2.b);

return (Math.max(L1,L2)+0.05)/(Math.min(L1,L2)+0.05);

Calculates the contrast ratio between two colors
This determines accessibility.

Output examples:

21 → perfect contrast
4.5+ → good
<4.5 → bad

And here's even a demo if you want to try it yourself.

Who can use it?

People who work in design.
People who want to see colors and are colorblind.
People in web development.

Conclusion

This project has been built on the view of helping people. And everything can be built with some work and mindset.

From Taps to Beats: Building a Browser-Based Music Maker with JavaScript

Joe Bou Khalil — Sun, 29 Mar 2026 09:24:21 +0000

Introduction

Creating music is very beautiful, especially with some tools that help.

This tool is a technique to build or combine beats to make sounds. Very easy and very helpful.

What does it do?

You can record sounds.
Stop it when you finish.
Play it.
And then download it.

What it's used for

Make sounds.
Try different beats.
Try mixing your own sounds.

Code

Audio Engine (creates sound)

let audioCtx = new (window.AudioContext || window.webkitAudioContext)();

This is the core. Without it no sound plays.

Sound Generator (oscillator)

`let osc = audioCtx.createOscillator();

osc.frequency.value = 200;

osc.start();

osc.stop(audioCtx.currentTime + 0.1);`

This is what actually produces the beep sound.

You change:

frequency → pitch
type → sound style

Recording Timing (rhythm `capture)

let now = Date.now();

taps.push(now - lastTap);

lastTap = now;`

This records the time between taps.
That’s how your app understands rhythm.

Playback Loop (beat repetition)

`function loop() {

playSound();

setTimeout(() => {

loop();

}, taps[i]);

} `

This repeats the pattern → turning taps into a looping beat

Pad Interaction + Sequence Storage

`sequence.push({

delay: now - lastTime,

sound: type

});`

This is what makes your 6-button beat pad work.

Stores which sound
Stores when it was played

Demo if you want to try it yourself.

Conclusion

This tool is a representation of what coding can do and achieve.

It's becoming more possible and possible to achieve big deals using AI today.

Building a simulator using AI for children to learn

Joe Bou Khalil — Thu, 27 Nov 2025 09:33:38 +0000

Building with ai has become easier and is becoming easier every day. You can do almost anything using AI. And the best thing to do is help people to learn.

This is why I created Flower Growth Simulator Interactive Plant Learning.

It's easy; it shows you how the plant grows when you modify the water, soil health, and sun.

Easy but effective if you want to see how a plant grows over time.

For kids it's of great importance; it could teach them about plants. It could teach them the importance of taking care of a flower. Using only a simulator.

Try it here: demo

Fireworks from lines

Joe Bou Khalil — Sun, 23 Nov 2025 12:47:42 +0000

A simple 2 lines collision to form fireworks.

Check out this Pen I made!

Audio & Voice Separator in Python (Built with AI Assistance)

Joe Bou Khalil — Fri, 22 Aug 2025 15:21:09 +0000

I’m excited to share one of my latest projects. an audio separator that can separate the components of music into vocals, drums, and instruments. Not just that, I also built a voice separator that focuses only on human speech.

This project was created in Python, and I built it with the help of AI for guidance and troubleshooting. In other words, to facilitate the work. Which AI never fails to do.

What is the project?

The goal of this project is simple:

Take an audio file (a song, a podcast, or any recording).

Strip it into individual components like vocals, drums, guitar, etc.

Or extract only the human voice, filtering out background sounds. This is simple, no fancy equipment, nothing, just some Python codes.

This is useful for:

Musicians who want instrumentals for practice.
Podcasters who need cleaner speech. without background noises or sounds that could make the audio unclear.
And even developers who are experimenting with audio processing can benefit from it.

So as you see, it's not just one field tool. It's for all.

How it works

The project uses Python with libraries, which include:

Spleeter: for splitting music into parts (vocals, drums, bass, etc.).
Librosa: for analyzing and processing audio. It's like the mind of the code.
Sound device & sound file: for recording audio and then saving it.
Scipy: for signal filtering.
NumPy: for efficient mathematical operations.

Example: Music Separation

Feed in a song, then get separate audio files for vocals, drums, bass, and more.

Example: voice separation

Record speech if you don't have it ready or load an audio file. Extract only the spoken voice, and ignore the background sounds.

License

This project is licensed under the MIT License, so you are free to use and modify it as you wish without any backlash.

AI's role

This project was built with the help of AI assistance for:

Writing separation scripts.
Debugging dependency issues. Or make it more powerful, in other words.
Structuring the repository and documentation. to make it easier to scan.

It was an exciting way to collaborate with AI to build this project.

Final Thoughts

Working on this project showed me how powerful open-source tools and AI collaboration can be with the right mindset and the willingness to help. If you’re interested in audio, Python, or machine learning, I’d love for you to check it out and share feedback!

GitHub Repository: Audio Splitter Voice Music Separator

Building a Communication Tool for People with Disabilities Using JavaScript and AI

Joe Bou Khalil — Fri, 08 Aug 2025 09:05:53 +0000

Communication is one of the basics of human needs, but for many people with disabilities, speaking can be a huge challenge. I wanted to create a simple tool that anyone can use and lets people communicate using just one finger, tapping directions (arrows) to form Morse code, then combining letters to make them into words spoken aloud.

The best part. I built this entirely with basic web technologies (HTML, CSS, and JavaScript), with no fancy installs or complicated setups. With the help of AI, I was able to translate my Python-based idea into a mobile-friendly web app that works on phones and laptops alike.

Why Build This?

This project is proof that anyone, even without deep coding expertise, can create helpful tools using freely available resources. It’s about giving people who struggle to communicate a way of expressing themselves.

How It Works

The page uses 4 directions: left, right, up, and down, just like on a keyboard’s arrow keys:

Left arrow = Dot (.)
Right arrow = Dash (-)
Up arrow = End Letter (tap once)
Down arrow = Speak the phrase aloud

You can input Morse code by tapping or pressing left/right arrows, end letters and words with up arrows, and speak your word with the down arrow. There's also a Delete button to erase the last dot or dash before completing a letter.

The Code

Here’s a breakdown of the foundational parts of the HTML/JS code powering the app:

Morse Code Dictionary

Using simple object to map dot/dash sequences to letters and numbers:

const morseDict = { ".-": "A", "-...": "B", "-.-.": "C", /* ... */, "----.": "9" };

Variables to Track State

Keeping track of:

currentMorse: the dots and dashes for the current letter

currentWord: the letters forming the current word

phrase: the full phrase composed so far

lastUpTime: to detect single vs double tap on the up arrow

Updating the Display

Updating the UI to show the current Morse code, word, and phrase:

function updateDisplay() { morseCodeEl.textContent = currentMorse; currentWordEl.textContent = currentWord; fullPhraseEl.textContent = phrase; }

Handling Input (Keyboard & Buttons)

The app listens for arrow key presses and button clicks, translating them into Morse code signals:

window.addEventListener("keydown", (event) => { switch(event.key) { case "ArrowLeft": currentMorse += "."; break; case "ArrowRight": currentMorse += "-"; break; // ... handle Up, Down, Space keys } updateDisplay(); });

And for mobile or users who prefer tapping, the UI provides big buttons for each control with the same logic.

Speaking the Phrase

Using the browser's built-in SpeechSynthesis API, the app reads out the phrase aloud:

function speak(text) { if (!text) return; const utterance = new SpeechSynthesisUtterance(text); window.speechSynthesis.speak(utterance); }

Try It Yourself!

You can use this tool directly in any modern browser, no downloads required. It works on laptops, desktops, tablets, and smartphones.

Here's the page if you are interested in seeing it live.

Why This Matters

We need tools like this because these tools help facilitate communication for people who have difficulty speaking or typing. By combining the two together (simple directional inputs with Morse code), users can form words, which then, in turn, the app could say out loud.

Thanks to AI, I was able to build this web app, proving that technology can work to empower everyone.

Here's the page if you are interested in seeing it live.

Why You Should Learn Python Today

Joe Bou Khalil — Fri, 01 Aug 2025 01:41:33 +0000

In a world increasingly run by technology, learning to code is no longer just for specific people. It's a valuable skill for anyone who wants to better understand the world we live in. And if you're thinking of diving in, there's no better time to start especially with Python.

Here’s why.

Python Is Beginner-Friendly

Python is often described from my point of view as "the father of programming”, and for good reason. It's one of the most approachable programming languages, especially for those new to coding.

Take a look:

`age = 18

if age >= 18:

print("You can vote!")

else:

print("Sorry, you're too young.")`

Nothing over the edge. Just simple logic.

With just a few key concepts, anyone can start building programs.

Python Powers AI, the Tech of the Future

Artificial Intelligence (AI) is rapidly transforming everything around us, from healthcare and education to transportation and finance. Behind many of these fields? Python.

Libraries like:

Tensor
Flow
PyTorch
Scikit-learn
OpenCV

Are written in Python and widely used by AI researchers. If you're curious about machine learning or natural language processing, learning Python is your way to see the potentials in these fields.

You Can Build Almost Anything with Python

Python isn't just for AI; its potential makes it the go-to for programmers wanting to learn programming. With it, you can build:

Robots: using platforms like Raspberry Pi or Arduino (with PyFirmata)
Web apps: with frameworks like Django or Flask
Mobile apps: with tools like Kivy or BeeWare
Games: with Pygame
Automation scripts: to simplify daily tasks
APIs & bots: for social media, messaging, and more

Everything Has Code Behind It

Every technology, from smartphones and laptops to smartwatches and even your smart fridge, every digital device is powered by code. By learning how to code, you unlock the ability to influence the technologies shaping our world.

Python helps bridge that gap by being a high-level language that connects real-world applications to beginner-friendly syntax.

Coding isn't just for techies—it's for makers and problem-solvers.

Core Python Concepts to Get You Started

When learning Python, you'll encounter essential building blocks like

if, else, and elif: for decision-making
for and while loops: for repeating tasks
def: to create your own functions
Import: to use powerful libraries
class: for building reusable components (OOP)

These aren't just random keywords; they're the tools you'll use.

Final Thoughts: Python Opens Doors

Whether you're a student, a professional, or just someone curious about technology, learning Python can benefit both you and the community.

It's more than just a language. It’s a way to create and solve.

So if you've ever wanted to build something or understand how modern tech works, start with Python.