2

I'm working on a data product, and there is a requirement to categorise individual cells. This is currently achieved by changing the colour of the text within that cell, for example, black = real data, blue = estimate data (see image below).

Color coded data

I don't really like the aesthetics of this and also it wouldn't help users that are colour blind, so I have been looking at alternative options. One way I thought of achieving this is through a coloured dot next to the value, with a tooltip that shows on hover to help colour blind users (shown below). However the stakeholders didn't really like this option.

Can anyone help me to find a solution that is both accessible, but also aesthetically pleasing?

Coloured dot next to value

  • I'm assuming the real data should appear more prominent than the estimated data? – Janet Jan 26 '17 at 17:15
  • Not necessarily. The data should carry equal importance - also there are more data types other than real/estimate, these were just two examples. – Jeffrey Jan 26 '17 at 17:54
  • How many different categories would you expect to see in a given table? – Janet Jan 26 '17 at 19:00
  • At the minute there are just 4. There is the possibility that it could grow to more, but it wouldn't be many extra. – Jeffrey Jan 26 '17 at 21:54
1

Designing for colorblind users doesn't mean that you are not allowed to use colors. It rather means that the colors e.g. should have a big difference in their brightness:

enter image description here

Source: https://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/

Here is another example: Bad (pale, unsaturated colors) vs. Good (vivid colors) vs. Best (including different textures)

enter image description here

enter image description here

Source (with detailed explanations): http://jfly.iam.u-tokyo.ac.jp/color/

I would suggest that you use background-colors instead of font-colors. This way there is more space for the color, making it easier to compare the values (and I think it will look better), and making it easier to apply textures.

0

Use color to emphasise the meaning but don't rely only on it. For the solution try to start without color and then push color to help. This is your image in black and white (and greys):

enter image description here

You could take different approaches to make some elements stand over the others:

  • Font-weight
  • Field background (lightness first, then saturation)
  • Be explicit by either writing the word "Estimate", "E" or a symbol next to each field with a legend below. Similar to how required inputs have an asterisk in the label and below it says * Required.

This is an example without color:

enter image description here

As a side note I think it is better to align the text to the center in this case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.