Before deciding on color choices, it's essential to examine the colors used by our competitors and differentiate ourselves by selecting a unique color. This chosen color should then be consistently applied across all elements as a common theme.
When choosing colors, opt for appropriate shades that are not only visually appealing but also stand out from the rest of the content while remaining readable. Pay special attention to the use of font color on selected backgrounds. Ensure there is sufficient contrast between the font and the background color to maintain readability. For example, try using yellow font on both white and black backgrounds. Despite its vibrancy, yellow can quickly lose visibility on a white background. It is somewhat better on a black background but still needs careful consideration for readability.
Similar to fonts, it's crucial to avoid using too many different colors for other elements as this can make the page look flashy and cluttered. While using multiple colors is not forbidden, careful consideration is required for a well-balanced design.
Mind the contrast: text should have a contrast ratio of at least 4.5 : 1 against its background (WCAG 2.1 AA), which the European Accessibility Act indirectly requires of businesses within its scope; check it with a contrast-checking tool. Color must not be the only carrier of information (for example, an error shown only in red).
Frequently asked questions
Colors trigger emotional responses - blue builds trust (banks, LinkedIn), red creates urgency (sales, alerts), green associates with nature and health, yellow with optimism. The color of the CTA button can directly affect the click-through rate.
Start with one primary color that reflects the brand's values. Add one or two complementary colors and neutral shades for backgrounds. We recommend Adobe Color or Coolors tool for finding harmonious color combinations.
We recommend the 60-30-10 rule: 60% primary (usually white/light), 30% secondary (brand color), 10% accent (CTA button color). Too many colors create visual chaos that disorients the buyer.
With sufficient contrast between text and background (the WCAG 2.1 AA criterion requires a ratio of at least 4.5:1 for normal text; the European Accessibility Act indirectly requires it of businesses within its scope). The Contrast Checker tool verifies compliance. Color-blind visitors should not be excluded.
The button color can affect clicks, but there is no universally best color. What matters is that the button stands out from its surroundings, has enough contrast with the background and is clearly visible. The best approach is to test the color with an A/B test on your own site.
My name is Anže, I am a certified Magento solution expert and the maker of several award-winning online stores. I am the architect of all Degriz projects.
Write to me →
Reading