5

I am working on a system that outputs a PASS or a FAIL depending on what happened. There are other text being displayed so I would like to write the PASS or FAIL messages in colour as to easily distinguish between them.

I found that making the PASS green stands out and reads easily but making the FAIL red (on a black background) makes my eyes sore to read. Is there a better error/warning colour that is readable but also conveys "ERROR"?

  • 1
    For what it is worth, WebAim's color contrast checker (used to check if colors are WCAG 2.0 compliant and readable for the visually disabled), shows that red (#ff0000) passes on all but the strictest WCAG AAA standards. Lightening to #ff7c7c passes by all standards. – DasBeasto Jan 20 '16 at 13:13
  • 1
    But also note red/green colorblind is pretty common so they may not be the best indicators in the first place. – DasBeasto Jan 20 '16 at 13:14
  • @DasBeasto Thank you for the WebAim link. Looks like a really useful website. – Francois du Plessis Jan 20 '16 at 13:25
4

Red is the standard color for error, so I think you ought to stick with that. But there are a few things you could do to help readability.

  • Use the text background color if you have control of that. You could make the background red or green, and the text white (or another combination that works well). This has the advantage of highlighting the result even more than text color alone.
  • Alternatively, alter the shade of red to be less jarring. A lighter shade of red will likely be more readable while still conveying "error".

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In many applications, passing is standard, while a failure is something exceptional that needs attention. If so, I would highlight fail more than pass in some way. For example:

  • Alter the background of FAIL (as suggested above) but not PASS.
  • Make the FAIL text bolder (if possible).
  • Put extra characters around FAIL such as ** FAIL ** or [ FAIL! ].
1

The only color associated with failure is red. Since it is not displayed well, I recommend you to find other ways to make the pass/fail easy to distinguish. You may try the following :

  • Leave an empty line above and below the pass/fail. This will create whitespace and attract attention.

  • Use symbols and text. This duplication of information increases the possibility the user will notice. Also, symbols stand out in a page full of text. If your console does not allow graphics you can use characters like '#' or '!'. For example :

    !!!!! P A S S !!!!!

    .#### F A I L ####

1

You could switch to using a tick vs a cross - then of course you're helping out green / red colour blind people too.

enter image description here

(courtesy of slightly modified sweet alert)

Update: the other method for doing this is to only list the fails, either before or after the list.

F  Test 1       FAIL
   Test 11    
F  Test 111     FAIL
   Test 1111    
   Test 11111    
F  Test 121211  FAIL
   Test 145454    

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.