One of the more difficult tasks a colorblind person can encounter is naming color paired with making color combinations. Twitter requires such a thing.

twitter-color-picker-thumb

Twitter Color Picker

One of the more difficult tasks a colorblind person can encounter is naming color paired with making color combinations. Twitter requires such a thing.

A color picker is used on the profile design page of your twitter account. You can change the background and link colors with a classic (often used on the web) color picker that features the entire color spectrum.

Picking the color is very functional at the core: select a color you like and as long there is enough contrast between the back- and foreground (the visitor of your profile page is able to read your tweets and see the links in your tweets) you’re good.

But there’s also a other side to it: design. You can change your link and background image or color to reflect who you are. It serves as a way of shaping your online identity, and that’s where difficulties arise.

Naming color

There is no way of reliably telling the name of a color you picked or are about to pick. You can have a good idea of the category of the color (‘blue/purple/gray’, ‘red/orange/brown’) but knowing for sure can prove very difficult.

It’s even more difficult because the picker gives access to the full color spectrum. The vertical bar controls the general color (red, green, yellow, etc), the square on the left fine tunes the color. While this makes it possible to pick the exact color you want it does make it more difficult to choose, at least for the colorblind.

There’s simply too much color in a area that is too small. It’s just a blur of very similar looking colors that blend into each other. Information overload paired with uncertainty never quite results in a enjoyable experience.

Making a fitting combination

As I wrote before, making color combinations in terms of style is not something the colorblind are very good at. Buying clothing is rather difficult as you have to both name color and make a good looking combinations.
The same problem exists with the color picker implementation twitter uses.

Picking orange when you wanted red changes the way people experience your profile page. Picking pink when you wanted red could even be embarrassing. Picking pink links to go with an orange background will result in something that could have been found on a myspace account of a 14 year old.

Fixing the color picker

Overall, there’s worse the colorblind can encounter. But it results in a portion of the twitter uses feeling uneasy and uncertain about their color choices, and that should not be necessary.

msword-color-picker-onhover

Fixing the color picker would require to solve the naming and making combination problems. I would suggest providing a set of default colors with their names available.

Microsoft Word does a great job at this. When hovering over one of the predefined standard and theme colors you’ll get the name of that color. It’s still possible to pick a different color using a color picker like the one twitter uses, but this picker is hidden behind the ‘more colors’ option.

The Twitter profile design page already uses this pattern for the background selection. A set of default suggested backgrounds and the option to upload your own. These backgrounds could even be paired with suggested colors.

As with most fixes that benefit the colorblind this also benefits non colorblind users. After all, not everyone is a master at making color combinations.

*

Comments

  1. Drew Arman

    This is very helpful, but in the fifth paragraph on the fourth line, there should be a comma after “want” and before “it”. And in the sixth paragraph on the last line it should be “an” instead of “a” before enjoyable.

  2. gogocolor

    would the colorspectrum in a circle help you to pick the right color (more color in a area, compare complimentary colors)?

    -> http://gogocolor.com

    • Jonathan Keller

      I am not sure for other people, but it doesn’t really help for me, at least not from the images on your homepage. All I can see is large area of Blue, large area of Yellow, and muddy colours in between. As the author said in the article the best way seems to put labels on the colours.

      I would love to have a colour picker that described the colour algorithmically while trying to pick the right colour. “deep blue, 5%red, 1% yellow” or “Light blue, 0% red, 0% yellow” or “Red (almost orange), 30% Yellow, 5% Blue.

      Describing what can be seen, not what the colour is made up of. I.e If I want light Blue I might use B:255 R:200 G:200 (understanding that equal parts R & G make the blue light), you can’t see red or green in the colour, so the description should not suggest red or green (e.g. Blue, 78% white).

      Sorry if it’s hard to understand, it’s hard to explain.