PermalinkDispelling a belief
Ever wonder why Skittles encourages us to taste the rainbow? To savor the beautiful colors the world has to offer. Unfortunately, about 2.2 billion people are unable to have this experience when navigating the internet due to color-blindness. Sad right? Curious on how to go about solving this problem? Well take your color picker and join me on my journey to turning open-source project's background colors into a feast for everyone's eyes.
PermalinkThe Problem
I was scavenging Leonardo Montini’s open-source project(a really awesome where you can post your open source contributions to your resume/CV) for some issues, but I could not find anything. So, I decided to do two accessibility tests on the webpage, and found these results:
- The website's background colors scored low on the WEB AIM color contrast checker.
- There is an empty form label
From there, I thought “this could use some improvement” and decided to get to work.
PermalinkLevel 1: Change the color
At first, I was going to make the change in the project’s global.css
file. Then, I found the tailwind.config file and realized that the change needed to be made there, but there was just one tiny problem…I had no idea how to work with Tailwind. So, I went to the copilot section in Tublian(it’s a site where you can find open source projects, apply for jobs, find people to collaborate with, etc), and typed some questions on how to add new colors in Tailwind. Unfortunately, it did not answer provide an answer like I’d hope, so I went to the next best things…Chrome DevTools and documentation. After clicking on the Inspect button, I clicked on the section that the HTML code for the website’s header, placed a link to the original website in another tab, reread the accessibility test’s suggestion, changed the primany-color’s hex code from #3b82f6
to #2d63bc
in Chrome DevTools tab, ran another accessibility test, and got these results:
From there, I pushed my code into my PR’s branch. Here it is:
"light",
{
"custom-dark": {
primary: "#2d63bc",
secondary: "#a78bfa",
accent: "#1FB2A5",
neutral: "#191D24",
"base-100": "#2A303C",
info: "#3ABFF8",
success: "#36D399",
warning: "#FBBD23",
error: "#F87272",
},
Now before I could break out the vanilla ice cream and celebrate, I remembered that there was another part of the challenge that needs solving.
PermalinkLevel 2: Putting a label on it
The next thing I had to is add a label
attribute that’s in the dropdown menu since it’s enclosed in a <form>
element. At first, I was not sure what class name to give it. I wanted use dropdown
but it was already used. After doing some brainstorming, I decided to keep it simple and go with themeToogle
since that’s the button’s feature(no pun intended). Here it is:
<div className="dropdown dropdown-bottom dropdown-end">
<label
for="themeToggle"
tabIndex={0}
className="btn btn-circle btn-ghost m-1"
data-testid="themeSelectorButton"
>
{buttonIcon}
</label>
<ul
tabIndex={0}
className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mt-3"
>
When I tested this code for accessibility, I got these results:
PermalinkLessons Learned
If I had to pick two lessons from this experience, it would be the following:
Devtools are your friend: It’s a great tool to use if you want to do before and after shots of your code.
Read the docs: As prompt as tools like co-pilot are when it comes to giving coding solutions, it’s best to read the documentation of the code as it gives more insight on how to use the language effectively.
PermalinkNow it’s your turn
Overall, I enjoyed making this open source contribution and can’t wait to do more of them in the future. Speaking of open source projects, if you’re looking for a place to start your journey and gain knowledge about web accessibility, I highly recommend checking Accessibilityforall.
Subscribe to our newsletter
Read articles from Chrissy Codes directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Article Series
Musings of a Coder
The Power of Custom Merchandise: 4 Ways to Elevate Your Brand Identity
Importance of Brand identity When it comes to the role a company’s brand plays in its identity, Ashl…
Pieces: Your Ultimate Coding AI Best Friend
Time to be honest I have a confession to make. I struggle with describing the code snippets I use in…
Accessible Colors: How I Brought Rainbows to Everyone
Dispelling a belief Ever wonder why Skittles encourages us to taste the rainbow? To savor the beauti…
2023: A Year of Challenges, Triumphs, and The Future
Whoa! Since my mid-2023 reflection post, I’ve grown so much in my tech and open source journey. Ther…
3 Important Lessons I Learned From My First Paid Tech Writing Gig
Good News! Hey everyone! :) Before I share my story, I have good news! 🙂 This post is officially on…
Novice To Expert: My freeCodeCamp Writing Journey
An Unexpected Surprise I was doing my usual scrolling on GitHub when a ping from LinkedIn grabbed my…
Taming My First Pull Request to FreeCodeCamp
Welcome! Ever heard the old saying, "Sometimes the hardest thing is the simplest one?" Well, I'm her…
5 Lessons I’ve Learned as A Project Administrator in GirlScript Summer of Code
A Hard Question If I had to pick the highlight of my summer, it would be participating as a Project …
3 Easy Uncommon Accessibility Techniques You Need to Know For Coding
Note: This post originally comes from Showwcase Picture this You’re currently scrolling through the …
5 Important Lessons I Learned From Creating An Online Community
I Have a Question for You What does Esmeralda from Disney’s The Hunchback of Notre and Antiope from …
So Far, So Good – Reflections on my Tech Journey
Wow! If I had to pick a quote that best summarizes my tech journey in mid-2023, it would be “Time fl…
How to Create an AR Widget with No Code
A Trip Down Memory Lane Remember when we were kids and we thought we'd have flying cars and hologram…
Save Your Head and Your Data: 3 Do's and Don'ts for Backing Up Your Devices
Note: This post is originally from Women Who Code's blog and has been modified to suit this audience…
Survey Says...Let's Make A Form
Welcome! If there was a tech edition of Family Feud(it's a game show where people guess the answer t…
3 Lesson I've From Spotlighting Women in tech
This was originally posted on Dev.to for their WeCoded celebration. You know how they say "You learn…
From Amateur to Writing Boss: A 2Articles1Week Finisher's Confessions
What a Challenge! If I had to compare Hashnode's 2Articles1WeekChallenge to a snack, it’d be Lay’s p…
Blast Off! Unveiling the Tale of My Space Button
Where it all began I stumbled upon a cool mini-coding project on UIverse's website and decided to ta…
5th time's the charm: My journey with Hashnode's 2Articles1Week challenge
I have a confession… You know how they warn people who want tattoos about how they can get addicting…
Confessions of a Code Bug Hunter
My Epiphany After a few months of being a coder, I've come to an interesting realization...debugging…
Four Times the Fun: A Recap of my Latest 2Articles1Week Attempt
I'm Back!!! Well, I've just completed my fourth attempt at the Hashnode 2Articles1Week challenge, an…
Sunny with a Chance of Coding
My Confession After doing some reflecting, I just realized that there’s one thing I share with Storm…
My 2 Articles 1 Week Journey: Round Three and Still Standing
I'm Back! Ladies, Gentlemen, and those in between are you ready for a story filled with challenges, …
Finding My Tribe: My Adventures with Baddies in Tech and Women Who Code
It’s hard being the new kid Ladies and gentlefolk, let me tell you, being the new kid in coding spac…
Bounce Back: 5 Tips for Staying Motivated After a Job Loss
Let’s Go! What do Jason Todd from The Outlaws, Ursula from The Little Mermaid, and Loki from Thor ha…
Double the Fun: My 2nd Try at Hashnode's 2Articles1Week Challenge
I’m Back! If I had to pick a song lyric that encompasses the past week, it would be “When at first …
ChatGPT: My Digital Buddy, Warts & All
Disclaimer: I'm not a spokesperson for OpenAI or OpenChat. This post is about my experiences with Ch…
2in1 Writing Challenge: A Week of Words and Wins
What A Week If I had to pick a highlight of the previous week, it would be surviving Hashnode’s 2in1…
From Lone Wolf to Pack Member: My Journey from Solo Coding to Collaboration
Why Collaborate? What do wolf packs have in common with The Avengers and The Justice League fighting…
Dev Retro 2022: How I overcame imposter syndrome and found my way into coding
If I had to pick a quote that describes my coding journey, it would be the famous saying, “You won’t…