Are you in the process of creating a new website for your business? Trying to decide upon the best colour scheme to use?

Creative Market share 5 colour choices to avoid in this infographic.

Here’s what makes their list:

• Pure black
• Red and green
• Neon colours in UI elements
• Light colours on white backgrounds
• Bright colours with more bright colours

Check out the infographic for more detail.

 

When it comes to web design, colour is one of the most powerful tools at your disposal. It influences emotions, shapes user experience, and can even impact conversions. However, choosing the wrong colours can be just as impactful—just not in the way you’d like. Poor colour choices can make your website difficult to read, strain users’ eyes, or even drive visitors away.

In this guide, we’ll explore five colour choices that could ruin your website and discuss how to avoid these common pitfalls.

Using Pure Black for Text or Backgrounds

Black is a classic choice in design, but using pure black (#000000) for text or backgrounds can create readability and aesthetic issues. The reason? True black doesn’t exist in the natural world, and our eyes aren’t accustomed to processing it in digital formats.

Why Pure Black is a Problem

• Too harsh on the eyes – High contrast between pure black and pure white can cause visual strain.
• Difficult to blend with other colours – Unlike off-black shades, pure black lacks warmth and can feel artificial.
• Looks unnatural – In print design, black ink is often mixed with other colours for a softer effect. Digital screens benefit from the same principle.

The Solution

Instead of pure black (#000000), opt for a softer shade such as charcoal grey (#111111 or #222222). These variations still provide contrast but reduce eye strain and make your design more visually appealing.

Red and Green Without Proper Contrast

Red and green are both vibrant colours that hold strong psychological associations—red for urgency or passion, green for growth and balance. However, pairing them together without a neutral separator can be disastrous.

Why Red and Green Don’t Work Well Together

• Colour blindness concerns – About 8% of men and 0.5% of women suffer from red-green colour blindness (deuteranopia), making it difficult to distinguish between these colours.
• Opposites on the colour wheel – Being complementary colours, they can create visual tension when placed side by side.
• Overpowering contrast – Without enough spacing, red and green together can make a design look chaotic.

The Solution

If you must use red and green together, introduce a neutral separator such as white, grey, or black. This helps improve contrast and makes the colours more distinguishable, even for users with visual impairments.

Neon Colours in UI Elements

Neon colours are eye-catching, but that doesn’t mean they should dominate your website’s interface. Using neon pink, neon green, or bright yellow in UI elements can make your website feel overwhelming and difficult to navigate.

Why Neon Colours Hurt Web Design

• Overwhelming to the eyes – Neon shades are highly saturated, making them hard to look at for extended periods.
• Creates a cheap, unprofessional look – While neon colours can be fun for certain brands, excessive use can make a website appear unpolished.
• Poor readability – Neon text or buttons can blend into the background, making it difficult for users to interact with them.

The Solution

If you want to use neon colours, limit them to accents rather than primary UI elements. A pop of neon in call-to-action buttons or logos can work well, but avoid using them for backgrounds, text, or navigation menus.

Light Text on White or Detailed Backgrounds

Minimalist web design often favours light grey text on white backgrounds, but this trend can cause readability issues. If there isn’t enough contrast, users may struggle to read content, especially on smaller screens.

Why Light Colours on White Are Problematic

• Low contrast affects readability – Users may need to strain their eyes to read light text on a bright background.
• Becomes nearly invisible on mobile – Screens with lower brightness settings may make light grey text disappear.
• Affects accessibility – Websites need to meet WCAG (Web Content Accessibility Guidelines) standards, which require a minimum contrast ratio for text.

The Solution

Stick to a contrast ratio of at least 4.5:1 for body text and 3:1 for larger headings. Instead of light grey (#cccccc) on white, try a darker grey (#555555) to improve readability while maintaining a modern aesthetic. If using an image as a background, apply a darkening overlay to make the text stand out.

Bright Colours on Top of Other Bright Colours

Vibrant, bold colours can be exciting, but layering bright-on-bright can make your website difficult to read. For example, yellow text on a bright orange background or blue text on a red background creates poor contrast, leading to eye strain.

Why Bright-on-Bright Doesn’t Work

• Creates visual noise – When too many bright colours compete for attention, the user’s focus is lost.
• Reduces legibility – Without contrast, text can become unreadable.
• Causes visual fatigue – Users may leave your site if they struggle to process the colours.

The Solution

Use bright colours strategically. Pair bold colours with neutral backgrounds to allow important elements to stand out. For example, a bright yellow button on a navy blue background is far more effective than yellow on red.

Final Thoughts: Balancing Colour in Web Design

Colour plays a crucial role in shaping how users experience a website. While creativity is essential, sticking to readability, contrast, and accessibility ensures your design remains effective.

By making informed colour choices, you’ll create a website that’s visually appealing, user-friendly, and accessible to all visitors. Happy designing!