Dale Stubbart

Contrasting Colors

How to figure out the best contrasting colors for your website. How to create dimensional buttons.

I&';ve always been fascinated by colors. Still, they often elude me, especially when I&';m trying to tell the difference between Black and NavyBlue. I need more contrast between colors to tell them apart. And while I like Blue, I have some color-blindness in that shade.
Recently, I was trying to create dimensional buttons for my website. You know, buttons which looked like they had some depth to them. Normally, I use groove or ridge borders. However, those weren&';t giving me the results I wanted. I could have tried some CSS 3-D techniques. But, I was too lazy. So, I looked at the code that some online button generating tools gave me. They used box-shadow.
I don&';t care for shadows most of the time, so I&';ve never used box-shadow. However these button generators were not using the shadow as a shadow, they were using it as a border. That makes box-shadow much easier to code. The format of box-shadow is:
box-shadow:h-offset v-offset blur spread color
For a border, h-offest, v-offset, and blur are all 0. spread is the width of the border. color is the color.

For my dimensional buttons, I specified both a border and a box-shadow (2nd, outer border) on the object. border:2px solid DeepSkyBlue;font-weight:bold;border-radius:20%;box-shadow:0 0 0 1px MidnightBlue I made the outer border skinnier, but that just depends on how you want it to look. My method gives the borders depth as though you&';re looking at them straight on. If you want a different look and feel, that will be more work.

I made the borders different colors, because the same color would not have given the button any depth. In my Expressive Websites free-to-use Javascript library, I have my x_contrast_colors(color) function. That returns Black or White (or the color you&';ve set as Black or White). This is useful for contrasting text against a background. However, I wanted a contrasting color of the same shade. I was starting with the outer border of MidnightBlue. Now I needed a contrasting shade of blue for the inner border.
My x_contrast_colors function uses HSL color logic to determine if the color is dark or light. Then it returns White or Black. HSL is a particular color scheme. It doesn&';t make sense to me, but it came in handy for that function. I couldn&';t see an easy way to adapt it to this function.
Instead, I looked at Wikipedia&';s page on website shades. This lists all the HTML official blues, reds, purples, etc. from dark to light. So, I placed those in Javascript arrays to work with, one array per shade. I placed the Whites in one of the other array because except for White, they&';re really not White. Since Black was in the grays array, I placed White there also. The greens array was much longer than the others.
I consider seagreens, cyans, and aquas to all be sea greens. So I removed seagreens and aquamarines from the greens array and placed them in the cyan array. However, it&';s hard for me to know sometimes if one color is darker than another, so I used Electrobild&';s tool to sort colors for that.
I placed all this code on my closest colors webpage. So, if you&';re tired of reading, you can just go there and check it out.

Now to find that contrasting color. First, figure out which array the color is in. Then, find the color. Now, figure out how long the array is. You&';re contrasting color is half-way around the array. Since that may not be exactly the color you want, I also display the color before and after that half-way point. Using this method worked well, except for Oranges as there weren&';t enough colors in the array. So, I had to use the half-way point plus one.

If you want to check your contrasting color, you can use this tool from webAIM. Turns out that while MidnightBlue and DeepSkyBlue are contrasty enough for button borders, they could have more contrast for a background color and text. I would have had to use MidnightBlue and SkyBlue instead to meet all those standards. My webpages typically use AliceBlue for background and DarkBlue for text. That exceed the standards by 100%. So, I guess I won&';t need to change that part of my webpages.

Another method for making contrasting colors is to make one of them more transparent than the other. The easiest way to do that is to express them as rgba colors.