Our Brand Colours

The Webstudio Academy brand has its own special 'black' and 'white' colours. Mixing them in different proportions gives us our own 'grayscale' of appropriate neutral tones. You can also create tint and shade variations of our main brand colours by mixing them with our special 'brand white' and 'brand black' here — see section below for appropriately pre-mixed tints and shades.

Often, when applying colours to your design elements, you will want to ensure that there is sufficient contrast for text be legible, as well as for icons and logos to be clearly seen. This is specially important if targeting audiences that may have visual issues. The contrast ratio between 2 colours can be measured on a scale from 1 (no contrast at all) to 21 (maximum contrast between total white and total black).

For large heading text to be legible, and large visual elements to be identifiable, there must be a contrast ratio of at least 4.5. For normal body text and smaller design elements, a contrast ratio of at least 7 is required.

When you hover over the colour cards on this page, you will see a contrast ratio toggle appear on the top right corner of the card. Click on it to display the contrast ratios of the various colours displayed, against our black and white colours.

In all our materials, use our 'brand black' as the main choice for background colours. This also includes using our shades of black in gradients, textures and patterns where our dark tones should be the dominant colours. in order to always ensure maximum contrast and readability, our 'brand white' colour should also be the first choice for body text.

For call-to-action sections and sidebars, or where a visual break is needed use our shades of black, or dark shade variations of our brand colours. Our 'brand white', as well as our brand colours shown below — and their tint variations — can be used to style headings, links, form fields, buttons, and other interactive elements.