SofTeCode Blogs

One Place for all Tech News and Support

tips to make good color contrast in css

3 min read
web designing

image credit unsplash


Let’s say you’re building a site using perfect color contrast in css, and you’re working with a designer. they are available to you with some solid designs, and you’re able to go. You’re also a conscientious front developer and you wish to form sure the sites you build are accessible. The designs you’re performing from have somebody copy, but you notice that the links inside the body copy are missing underlines.

You are now within the Contrast Triangle.

In order for your text and links to be accessible, they both got to have sufficient contrast from the background, also as from one another. This creates a three-way design constraint.

I’ve found myself during this situation repeatedly over the years (some designers really don’t like underlines). I’ve also found it hard to articulate the difficulty of removing underlines. and each color contrast tool I’ve ever seen takes two inputs, but this example involves three.

So I built a three-way color contrast checker to assist with this example. Check it out!

Nerdy Bits

My motivation was really a classic “scratch your own itch” situation. Still, so as to try to to this, I knew there have been some pieces i used to be getting to got to find out.

Things I knew I wanted:

  • to form this a react app. We use react at work, and that i wanted to possess another opportunity to urge better at it.
    it might work supported query parameters in order that people could easily send links back and forth if they were having discussions around this
  • I wanted it to possess tons of tests
  • Later into the project, I converted to TypeScript
  • it had been getting to be pretty static, as i used to be getting to host on Netlify

Query parameters

I knew I wanted this thing to be driven by query parameters pretty early, with great care users would have useful URL’s. What I didn’t realize was that what i used to be doing apparently isn’t quite common.

Basically, i used to be saving state in query parameters. I wanted those parameters to be the source of truth. I knew I could escape with this because there have been really only three values the user would care about – the three colors required.

My thought was a user involves the location, enters in some colors, and that they instantly have a URL that they will share that shows their results.

Apparently, the entire state-in-query-parameters thing isn’t quite common. I only found one package within the react ecosystem that did what I wanted to try to and was fairly lightweight.
Calculating Contrast

The biggest unknown on behalf of me, at the outset of this project, was how one calculates contrast. I knew that the opposite color contrast checkers did … something, but I wasn’t sure what.

This clothed to not be that tough. Basically, you identify luminance for the colors you’re comparing and derive the ratio of 1 luminance against the opposite. you’ll determine luminance pretty easily if you’ve got RGB values.
Translating Colors

This was the part that clothed to be tons more complicated. I knew I wanted to support almost every color format:

  • RGB and rgba
  • hex 6, hex 3, hex 4 & hex 8
  • named colors
  • HSL and hsla

But so as to calculate luminance, I had to require all of these colors and convert them to RGB. So, I had to work out:

the way to determine which color format
affect alpha channels, if present
Convert to RGB

It was this a part of the project where tests really came in handy. within the course of writing some tests, I discovered edge cases and false assumptions that needed to be accounted for.
React and make React App

This is a reasonably straightforward create react app, uh, app. I didn’t really do anything consider to the bottom project. I feel I only added packages for Sass, typescript, and testing.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Give your views

This site uses Akismet to reduce spam. Learn how your comment data is processed.