Colour palette

Today it's very easy to check the contrast ratios of your colours; you can do it directly from your design software or from several different sites. Just remember: WCAG AA requires a ratio of 4.5:1 for body text and 3:1 for large text. Also check that information isn't conveyed solely through colour, which would cause problems for colour-blind people.

The primary colour is your brand's main colour; it will mainly be used for key interactive elements. The secondary colour complements the primary to highlight less important elements. Semantic colours, for their part, are functional and universally understandable: green, orange, red. The latter must stay consistent throughout the interface so as not to create confusion.

There's no strict rule. You generally try not to overload the design palette so that elements stay understandable, but nothing forces you to limit yourself. A functional palette will be a little stricter, since it relies on universal codes, but for your brand colours there's no particular rule. In general, the primary and secondary colours will have their shades (5/6 light values and 5/6 dark values).

You start from the main and secondary colours and generate light and dark shades. Generally 5/6 of each so you can work easily with them in your interface.