Pantone colour swatches with some that can't be differentiated for those with colour blindness

Accessibility is important for any website’s design. It allows the most possible people to access your business online. A key part of that is ensuring everything in your web design is clearly visible. Along with contrast and size, you also need to consider colour blindness for accessiblility in web design. If a web design doesn’t consider different levels of colour vision, certain elements of the site will become indistinguishable or even invisible. That creates a frustrating experience, and users will leave. We’ll explain why colour blindness matters for web design and some of the best practices for ensuring an accessible contrast on your website.

The Kinds of Colour Blindness or Colour Vision Deficiency

Colour blindness is often used as the general term for all colour vision deficiencies, but there are different kinds. The most common type that affects 8% of all males is “red-green” colour blindness. This is usually either from deuteranomaly or protanomaly and refers to their inability to see reds and greens as vividly. However, there are other less common types of colour blindness to also consider in your web design. There is blue-yellow colour vision deficiency, where blue and yellow are less visible. The other is monochromacy, where someone sees no colour at all and instead views the world in grayscale (black, grey, and white). An ideal web design should be accessible to all of types of colour blindness. 

How Colour Blindness Affects Sight or Visual Acuity

Skipping over the details of the biology, when someone has red-green colour blindness, they see greens and reds less strongly than those with normal colour vision. Most can still tell the difference between a red object and a green one, but each colour will be less vibrant. The difficulty comes in colours that have red and green in them. That is why someone with red-green colour blindness has difficulty differentiating purples from blues. They see less of the purple’s red, turning it blue. This is also something to consider in your web design. For example, if your design includes orange and neon green items next to each other, it will be difficult for someone with red-green colour vision deficiency to differentiate them. This is because they see the yellow in each colour more than the red and green. Depending on the strength of the deficiency, even something yellow will be difficult to pick out from the other two.

How to Accommodate Colour Blindness in Web Design

To be sure that everyone can see everything on your website, you need to be sure that even someone who can’t see colours can still differentiate text, images, or buttons. There are various techniques for colour accessibility, but here are some of the most essential for web design:

Don’t Rely Exclusively on Colour 

One of the staple practices in accessible visual design is to not use colour as the only differentiator. Those with colour deficiencies can still see shapes and other visual markers. For example, hyperlinked text shouldn’t just be blue or another colour. It should also be underlined to be recognizable to any level of colour vision. Bars in a graph with patterns inside along with colours are always distinguishable. This is the same design choice behind coloured tiles in a board game also having certain shapes.

High Contrast Colours 

Use colours that have high contrast to keep them distinguishable. For example, Rosewood’s web design primarily uses white and blue. No matter the kind of colour blindness, these can’t be confused. You can run a basic contrast test between two colours with a tool provided by Web Accessibility in Mind. The plug-in tota11y will check your entire website for various visual accessibility concerns, including contrast.

Keep it Bright 

Colour vision deficiencies have a harder time differentiating darker colours. Using brighter colours will help them stay visually distinguishable. 

Not All Complementary Colours Contrast Equally

Choosing two colours on the opposites of the colour spectrum, such as black and white, can typically provide good contrast. However, that isn’t true for all kinds of vision. Blue and yellow are complementary colours with a high contrast value, but they are less distinguishable to those with blue-yellow colour blindness. That is why blue and orange are often used instead. The red in the orange helps it stand out from the blue.

Using Greyscale 

Designing a site in greyscale (grey, white, and black) will ensure its visible to all colour vision deficiencies. However, your branding may include pops of colour. In this case, various web tools and screen filters built into MacOS and Windows will allow you to look at your site in greyscale. This simulates an extreme monochromatic experience and can help you see whether some colours in your web design might be confusing.

Web Design Everyone Can See

If you have full colour vision, it can be easy to forget not everyone sees the rainbow as vibrant as you. However, accessibility is a critical part of web design used to create a website that accommodates everyone’s abilities. An accessible website creates a welcoming digital space. If you make sure every part of your web design stands out, your business will too. If you want to be sure your web design accommodates different colour vision deficiencies, contact Rosewood’s web design team. They’ll make sure your colours shine.

Woman with gray hair having a personalized customer experience on her computer thanks to help from AI

We’re continuing to see the many powerful applications for AI. Along with potentially useful creative tools, AI excels at data collection and parsing. Now, we’re seeing that algorithmic power combine with marketing expertise to create a personalized and relevant customer experiences for small businesses. Rosewood will explain what personalization and relevance in marketing are, and how AI is a powerful tool for a marketing team to create personally relevant marketing for any customer or client experiences.

Personalization, Relevancy, and AI in Marketing

Personalization has been a major tool in marketing for over a decade. It emphasizes marketing that communicates personally to the individual members of your audience over broader, more general marketing campaigns that lack a specific target. While this might include one-off custom communications or exchanges, it can also be automated. For example, emails or messages can automatically address receivers by their first names. 

Overall, customers have come to expect personalized experiences that respect their individuality and interests. At least 71% of customers expect a personalized experience, and a greater 76% are frustrated when they don’t have one. Personalization has also demonstrated an average 10-15% revenue lift, which increases to 25% for direct to consumer businesses. These individualized experiences create stronger personal connections, which lead to more customers and clients returning for more purchases and services. This is where small businesses can excel over larger companies that typically provide more generalized customer experiences.

Thanks to AI, more complex and valuable data can be gathered from users to create even more personalized marketing that is relevant to customers’ interests and experiences. This is why relevancy has become an essential marketing criterion alongside personalization. These algorithms and AI automations can consider browsing history, page time, social media data, and more. Marketers can then use this information and tell these programs how to generate product recommendations, personalized notifications, curated packages, communications, and more. These AI help your business understand the true, individual interests of each of your customers so that any marketing that reaches them is relevant.  

Where AI Can Help with Personalization and Relevancy

As we’ve covered before, AI is a general term. It’s recently become the common title for various programs which can learn from data to accomplish more complex tasks. For personalized and relevant marketing, these AI can sift through an overwhelming amount of user information that would take far more time for a human. That’s why AI is a powerful tool for small businesses who usually won’t be able to dedicate a person to poring through this information. Instead, AI is a valuable tool for your marketing team to build effective strategies for relevant marketing campaigns. We’ll go over some of the most effective uses of AI in personalized marketing.

E-Commerce Tracking

When customers are on your website or digital store, AI software can track what they browse and for how long. It will also track any purchases, wishlisting, shares, etc. This tracking isn’t especially new, but more developments in machine learning allow AI to start grouping and interpreting the data. All that behavioral information from many customers, allows an AI to develop customer groups and profiles according to their interests and various other demographics like age and area. These can then be used for a plethora of personalized and relevant marketing strategies.

Relevant Email Marketing

With this detailed profile generation, AI can then begin to automatically message subscribed customers about product recommendations or send communications that are more relevant to their interests. This will still require a human to create and design the message and templates. However, the AI can take over the busy work of adding appropriate products and sending the emails off. 

Your marketing team can also use these AI-generated profiles to analyze your audience and segment your email recipients to start creating emails more relevant to each group’s interests. This will lead to more opens and clicks, since they will better grab your audience’s attention. Again, AI can’t quite handle the creation process itself. Human expertise is still necessary for effective personalized marketing.

Personalized Website Customer Experiences

By tracking their ecommerce behavior, AI incorporated into your site can start to tailor customers’ website experience to be more relevant. Products listed on the front page or recommended to them at other browsing stages can be specified to their personal interests. This keeps them in your store and more likely to purchase, since they will continue to see what is relevant to their interests in your business.

Personalized Chatbots

Customer service is an important part of your daily, individualized marketing, and instant messaging through your website, social media, and SMS has become a fundamental customer service tool. Those messages can also be overwhelming and chatbots can help manage the flood. However, they are also often robotic and simple. Current advances in AI famously happening with Chat-GPT and Google Bard are allowing chat bots to accomplish more complex tasks and communications. They can address the customer by name, and even potentially pull up their profile’s information. They aren’t quite at the level of replacing a human’s social finesse or able to handle more complex inquiries. However, they have made great strides where simple interactions can be accomplished entirely automatically for a pleasant and personalized customer experience.

Don’t Forget About Human Expertise

AI technology is currently surging in its development and it’s still hard to see where it will end up in the coming months and years. It’s already showing it’s a powerful tool for personalized marketing, but don’t let it completely override the human touch of your business either. Ultimately, personalized connections are human ones, and customers want that human connection with your business. Similarly, AI is still limited in its abilities. Analyzing information, writing messages, creating visual content, and more still require human ingenuity and expertise. If you want to talk more about how you can strategize and incorporate AI into your digital marketingecommerce, or web design, be sure to contact Rosewood Marketing.

Woman designing a website for accessibility

When designing or redesigning your business’ website, you should be trying to make it accessible. Having an accessible website is of practical interest to your business since it allows users with a range of hearing, movement, visual, and cognitive abilities to access your website and become potential customers or clients. It’s also a legal requirement to have an accessible website since January 2021 according to the Accessibility for Ontarians with Disabilities Act (AODA) if your business has over 50 employees. Since website accessibility is so critical, we’ll highlight some of the best practices and tools to help you ensure your business’ website has maximum inclusivity.

How to Know if Your Website Design is Accessible

There are numerous potential concerns for building an accessible website, so how do you ensure your design is inclusive? For that, the World Wide Web Consortium has created a set of international guidelines: the Web Content Accessibility Guidelines (WCAG). These are continuously revised and are currently in version 2.1, with 2.2 to be finished in the coming couple of months. These provide both quick introductions and thorough overviews for inclusive website design and will help you start designing for accessibility and identify any potential concerns.

Best Practices for Building an Inclusive Website

There are many things to consider when building an accessible website design. Here are some of the best practices to build and design an inclusive website:

  1. Start with accessibility in mind. It will be much easier to design a website that meets accessibility standards from the start of a design rather than trying to accommodate these afterwards. 
  2. Make sure content is accessible to users in the ways they can perceive. People have varying levels of ability to perceive by sight and sound, so an inclusive website provides alternatives for accessing content.
    • Use a variety of media, including text, video, audio, and images to convey information. 
    • Audio should be captioned or transcribed for speech or include a description for non-verbal sounds such as music.Include descriptive audio which explains what is happening in a video.
    • Write detailed and descriptive alternative text (alt text) which describes the contents of an image or video in detail.
  3. Be sure to consider text and screen readers when writing any copy or content. Some might not be able to read the text on your website due to their visual or cognitive abilities.
    • For example, don’t include excessive emojis. Screen readers read each of these individually. So a string of 👏👏👏 will be read as “clapping hands emoji clapping hands emoji clapping hands emoji.”
  4. Write with simple language to make it more accessible and inclusive. Often, it’s recommended to write at a “10th-grade reading level.” If more complicated terminology is needed, create a glossary that explains these terms in more simple language.
  5. Make sure your website scales. A scalable website modifies its appearance depending on the screen and text size of the user. This accommodates both the user’s device and personal settings for an accessible experience.
  6. Use spacing, headings, columns, and lists on your pages and blogs. These visually organize your materials into appropriate topics, that allow users to quickly recognize subjects and a page’s organization. Screen readers also use headings to navigate a page, so they are essential for anyone using such tools.
  7. Use sufficient contrast between the background and foreground. Inclusive websites make content easily discernible, and contrast is a huge part of that. For example, black text contrasts more heavily on a white background than a gray font.
  8. Along with contrast, be mindful of colour choice. Visual colour deficiency (often called “color blindness”) is common. While less typical in females, 8% of males in Canada have some form of colour deficiency
    • Use high contrast colours or one colour with grayscale. If using multiple colours, ensure they are visually distinguishable for someone who sees those colours less prominently or not at all.
    • Never use colour as the sole way to convey information in a design. For example, in a bar graph, include numbers, text labels, or texture. Someone with red-green colour blindness will have a lot of difficulty differentiating between a red and green bar.

Tools for Designing an Inclusive Website

Since website accessibility is a major concern, there are many tools that help you evaluate its compliance. The World Wide Web Consortium has a list of evaluation tools that includes over 160! These various tools are designed to identify concerns and either suggest changes to improve accessibility or automatically provide them. Here are just a few of Rosewood’s favorites:

AccessiBE

We regularly use AcessiBe when building websites. This AI-powered software continuously scans a website for accessibility concerns and updates pages to be WCAG 2.1 compliant.

They also provide accessScan which will immediately determine if a website is compliant with accessibility standards.

WAVE

WAVE is developed by WebAIM at the University of Utah. They provide comprehensive tools for evaluating and reporting your website’s compliance with WCAG standards. WAVE itself tests one page at a time, but provides a more enterprise-level service through Pope Tech that’s priced according to the number of pages it needs to scan. 

tota11y

tota11y is a free accessibility tool that helps you visualize and understand how assistive technologies interact with your website. The tool was recently deprecated in May 2023 by Khan Academy, so its development has ceased. It won’t stay up to date with the latest accessibility standards and may eventually become dysfunctional on newer websites, but for now it’s still an easy and powerful tool to quickly determine your website’s inclusivity.

Start With Accessibility in Mind

With these tips and tools, you can create a website that both complies with legal standards and is accessible to as many potential customers or clients as possible. That will ensure your business’s website has its greatest reach. Our designers are experts in accessible designs and compliance, so if you want help ensuring your site’s accessibility or want an inclusive redesign, contact our web design team.