Colour palette

By checking the contrast ratio between each text colour and the background it sits on. WCAG level AA requires 4.5:1 for body text and 3:1 for large text. These ratios can be checked directly from design tools or from online checkers. You also need to make sure that no information rests on colour alone, which would exclude colour-blind people.

The primary colour is the brand's main colour, used for the most important interactive elements, such as action buttons and links. The secondary complements it, for elements of lesser weight or for accents. Semantic colours carry a functional meaning: green for success, red for error, orange for warning, blue for information. These conventions must stay stable across the whole interface, otherwise they create confusion.

There's no strict rule, but a palette that is too rich becomes hard to hold together. A functional palette generally contains a primary colour with its shades, five or six light ones and as many dark ones, a range of neutrals from white to black, and four semantic colours. Secondary and accent colours are added according to the needs of the product.

By generating shades from the main colour, varying lightness and saturation, five or six values on each side. You then check that the intermediate values offer enough contrast with white and black, since those are the ones that will be used for text and backgrounds. Neutrals are chosen in harmony with the main colour rather than from a neutral grey.

No, not when it conflicts with the convention. A brand red that is very light or very saturated can make an error message unreadable or not alarming enough. Semantic colours answer expectations people already hold, and it is better to respect them, even if they depart from the brand guidelines. Brand consistency plays out elsewhere, on surfaces and interactive elements.