Color Selector for the Color Blind

It has been a bit embarrassing, at times, to ask a client to provide a color swatch when they ask for the current color to be "a twitch more red" or "a bit lighter". With a swatch image, I could get the color numbers with a color picker.

Until recently, I was unable to give a color more red or make it a bit lighter and be certain the resulting color did not clash with the original.

I might have added more purple instead of only more red. Lightening it up, I might have ended up with an orange-ish color. And I would have been totally unable to tell that I had messed up.

You see, I am color blind.

It's a reason why my work includes very little website design. Programming, yes (software dances for me). But minimal visual design.

According to statistics found at the Color Blind Awareness website, about 80 out of 1000 men and about 5 out of 1000 women have a color vision deficiency. I am one of them.

There are various degrees and types of color blindness. The above link talks about them. Mine is more in the red-green area and not very severe. Still, it is something to always be cognizant of when I deal with color.

It never occurred to me that color blindness could be solved. So I didn't look for it.

One day, recently, I realized I had been rubbing shoulders with the basics of a solution, off and on, for years and years.

The solution is not a cure. It does not affect the physical color blindness at all. Instead, it helps a person work with it.

The Color Selector for the Color Blind software was made to make things easier for me. Its selections are HSL based (hue, saturation, and luminosity, defined further below).

One of the bothers with my color deficiency is that often I'm unable to accurately distinguish something's color unless it is next to a different color. For an example, dark red may look dark brown until the two colors are right up against each other.

To compare colors better, the software has 4 custom swatches next to each other.

Another bother, as mentioned, is that slightly changing a color may introduce a bit of another color I didn't intend to introduce — and I am unable to discern that I did, in fact, introduce it.

With the Color Selector for the Color Blind software, I can leave the hue as is, not change it at all, and adjust both the saturation and luminosity to my heart's content — and be virtually certain that none of the resulting colors clash with each other in the sight of people with full color ability.

The software is made available in this article. There is provision for you to publish it on your website, too (includes WordPress instructions).

It allows color blind people to be more certain about the colors they generate.

(People with full color sight are likely to find it useful, too.)

The major boon for the color blind, in addition to adjusting saturation and luminosity with impunity, is the previously mentioned four custom color swatches. The swatches are placed next to each other so colors can be visually compared with more certainty.

The color of each swatch is manipulated separately by tapping a color bar or manually specifying a number. If desired, a color swatch can be initialized by tapping a pre-defined color.

Below is the Color Selector for the Color Blind. The code to put the color selector on your web page follows. Then, information about how to use the color selector (although much of it is likely to be intuitive).

The Code for Your Web Page

Below is the code for the color selector.

Paste the code into your web page where the color selector is to be inserted. (For WordPress dashboards with Gutenburg interface, use the Custom HTML block.)

Note: The web page with the code needs to be accessed with an http://... or https://... URL. It won't work by just loading the page into your browser from your hard drive.

<style type="text/css">
#color-selection-wide-container { display:table; }
#color-selection-narrow-container { display:none; }
@media screen and (max-width:450px) { 
   #color-selection-wide-container { display:none; }
   #color-selection-narrow-container { display:table; }
}
</style>
<div id="color-selector-4-color-blind"></div>
<script src="https://www.willmaster.com/library/external/ColorSelector4ColorBlind/ColorSelectorJS.php?id=color-selector-4-color-blind" type="text/javascript" async></script>

The widget is responsive to browser width. The max-width:450px is the width below which the CSS kicks in to publish the narrow screen version. The width may be changed by updating 450px to the width appropriate for your web page.

The CSS may be moved to your style sheet or left where it is. But the last two lines of the above code, the two lines below the style sheet, must stay on the web page where the color selector is to be inserted.

The above code does not include a border around the color selector. For a border that works for your website, create a bordered div to paste the above code into.

How to Use Color Selector for the Color Blind

Much of the color selector is intuitive. Read the below for functionality you might have missed.

Custom Swatches

The section with the Custom Swatches are where the result of your selections are presented. Each swatch has its current HSL color numbers presented next to it.

You can work with one swatch at a time. To select a swatch, tap on it. The currently selected swatch has a dark two-sided border for the current HSL color numbers.

Initializing a Swatch

A swatch is initialized when a color is specified. It can be done in any of these ways:

• By tapping on a named color. The named colors are in an area that opens up when you tap on the "(tap for colors)" link.

• By changing an HTML color code above the swatch area. The RGB, #hexadecimal, or HSL numbers can be changed for a different swatch color. Then tap "Update Swatch". (A color picker might be used to get the color code from an existing color.)

• By tapping on one of the color bars below the swatch area or by changing the number in a color bar's text field.

A swatch color can be changed by using any of the above swatch-initialization methods.

HTML Color Codes

The HTML color codes reflect the currently selected swatch. Change any, and the swatch color changes. When a swatch color is finalized, any of the HTML color codes can be copied to use on a web page.

The Hue, Saturation, and Luminosity Color Bars

The color bars can be tapped on to select a different hue, saturation, or luminosity. Let's define those three.

• Hue is a color number from a 360-degree color wheel. 360 colors are on that wheel.

  In the color selector, the 360 colors are presented as a bar. The hue number 0, all the way at the left of the bar and the hue number 360, all the way at the right edge, are both the same hue, red.

• Saturation is, in essence, how much of the hue color exists in what is seen. Let me explain with an analogy.

  Imagine a glass of water. Next to it is some red food coloring. Put a drop of the food coloring into the water. You see the water tinting red. The more red food coloring you put into the water, the more saturated it becomes with the color red and the redder it looks.

  Saturation is specified as a percentage from 0% to 100%. In the analogy, 0% would be all water, no food coloring. 100% would be all food coloring, no water.

• Luminosity is a percentage specifying the amount of light in the hue color. A luminosity of 0% is completely black. 100% is completely white. In between are various degrees of hue color brightness.

Various saturation and luminosity percentages can be applied to each of the 4 color swatches. With the swatches next to each other, it should be easier to make visual comparisons.

So long as the hue number stays the same, the color blind person can tweak the saturation and luminosity percentages without concern that they will inadvertently end up presenting a dissonant color.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager