When editing a line, you are able to adjust the foreground and background colours. These inputs accept hex 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:
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:
Using this tool you can determine the best foreground and background combination to use.