When editing a Line, you are able to adjust the foreground and background colours. These inputs accept hex colours.


Screenshot from Passenger Cloud showing the input boxes for foreground and background colours


These colours are shown on websites and apps in varying ways, with the foreground colour controlling the text colour and the background colour controlling the background. Here are some examples:


Screenshot of the line on the web showing the background colour in use

Screenshot of a stop, indicating the lines that serve it, which use the background colour


It is therefore very important to ensure that these two colours are accessible.


If your foreground colour needs to only be black or white

This is the easiest method. As you type a colour into the input box, the preview on the left will automatically update. The # hex indicator will also automatically flip between black and white depending on what's the most accessible.


In the example above, #002663 is the background colour, the # icon to the left goes white, therefore we make the foreground colour white (#FFFFFF).


If your foreground colour is a custom colour

We'll need to ensure the two colours are accessible. You can use a tool such as the WebAIM Colour Checker to compare colours. For example:

Screenshot of the WebAIM Colour Checker

Using this tool you can determine the best foreground and background combination to use.