We build a transit app, and want to use colors to denote train lines (that match with the train companies' descriptions: yellow line, blue line, etc). So we came up with the screenshot attached, very basic.

enter image description here

However, in some part of the world there are black line, white lines! We're kinda stuck here, any thoughts? Tks.

5 Answers 5


As @laurendankiewicz proposed, you can use outlined icon, like pictured:
enter image description here

But I think you also need to consider:

  1. You shouldn't use color code as the only mean to convey information for accessibility reasons. You could use tools like NoCoffee vision simulator to assess it
  2. If the color of the line is important information for a user, it's better to highlight it in a more prominent way. Colors of the lines looks understandable in the context (like subway map), while using only colored icon conveys the info not so prominent

For the white train, you can outline the circle with gray (the circle itself would have white filling) and then your train would be outlined in gray. This way, you get your white background and the train is still visible.

For black train lines, you can have the background circle black, with a white train.


There are significant accessibility concerns in just using colors as visual indicators for users as colorblind users might struggle to differentiate different colors from one another making the app useless to them. To quote the WCAG guidelines

Ensure that text and graphics are understandable when viewed without color.

If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information

For example, taking the screenshot you just provided, here is what a person with Deuteranope (red\green color blindness) would see

enter image description here

As you can see, he would struggle to find out the the green line was not actually the brown line (assuming you had one and so on).

My suggestion would be to also provide text along with the icon to inform the user what line it is, this would also help resolve your issue of relying on color alone as a visual indicator.

Google maps uses a singular color for its icons but uses shaded boxes with the color mentioned in them as visual indicators of what colors they refer to.

enter image description here

  • In the app he did have the name of the train (T1, T2, T4). Though mentioning the train line's color for colorblind users is great, I think it's less important in this case: When a colorblind person walk into the train station, he/she wouldn't recognize the line's color anyway. They would always look for the train's name. If in some part of the world color is the only way to differentiate between train lines, then the color becomes the train name itself.
    – d4rek
    Apr 20, 2015 at 17:02

for 'white line' why not use the same with black as a fill. And for the 'black line' go for black train with gray fill, a color like #efefef or #f0f0f0.

  • 1
    or for white; a grayish fill like #ccc Jan 19, 2015 at 5:06
  • tks for your suggestion, the train icon currently is white, the circle is the color line. To be consistent, if I use white train on black circle, that would mean black line. For white line, it should be white on white, oh well, nothing is visible then.
    – EyeQ Tech
    Jan 19, 2015 at 20:22

I guess if you make it white / black in relation with background and other tracks, you should be fine.

Plus even a white line would be denoted in some ways in other non-digital places, like billboards, information boards etc. You can take a cue from that data. The brick and mortar presence should be very similar to how the app depicts it. This is essential for relativity (and branding if applicable)

Only FFF does not make a white, if you have a blue/red/white then a very light color easily differentiated from rest of the tracks and background should be good enough to denote white color. Same for the black color too.

The HTML color roaster has many light colors which coupled with borders and strokes should make the trick.

A more radical thought would have a separate deployment based on country, and replace the train assets with a circle of W, G, B etc., but scratch that, it is a very last resort. I do not much like it myself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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