accessiBeSystem
Jul 26 2021

Making websites accessible doesn’t have to be complex. There are some steps you can take to improve your website for those with limited or low vision. Making your text, colors, and other visuals as accessible as possible is a great place to start.

Making these changes not only makes your website more accessible to everyone who might want to use it, but it’s also good design practice too. Typically, a website that adheres to these guidelines will be easier to read and navigate for everyone who visits.

What Are WCAG Color Contrast Guidelines?

The Web Content Accessibility Guidelines (WCAG) state that text — and images of text — must have a contrast ratio of at least 4.5:1.

  • It’s recommended that normal body text has a ratio of 7:1.
  • Large text (defined as 14 pt and larger in bold, or 18 pt and larger) must have a contrast ratio of 3:1.
  • Text that serves as pure decoration does not need to meet these requirements — this includes brand logos.
  • This is a baseline for accessible design on your website. By following the WCAG color contrast guidelines, you’ll provide a better browsing experience for those with limited vision.

Using a Color Checker

A screenshot from aCe showing a website with good contrast ratios

Suppose you want to check whether your website is compliant. In that case, you’ll need to use an accessibility/contrast checker — we have our aCe accessibility tool, which will check for contrast issues and everything else connected to accessibility.

When building a new website, it’s important to check your brand, and page colors are compliant. Doing this early on will save you the trouble of having to change colors further down the line.

A color checker can also be used on an existing website, allowing you to make accessibility updates, even if a website has been live for a while. Doing this is often one of the first steps towards an accessible experience and a website that a diverse range of people can use.

A chart of contrast options that pass or fail WCAG

Why a WCAG Compliant Color Palette is Great for Your Brand

Thinking about a brand’s color palette is another way to ensure you meet these contrast ratios. For website text, you’ll get maximum contrast from black writing on a white background but, sometimes, you’ll want to show a little more artistic flair. Whether you’re using simple colored headers or have smart graphics that include text, you must remain compliant. It’s also worth noting that certain visual impairments can be affected by black on white or white on black, so consider tempering your color choices just a little while checking they remain within guidelines. Again, a color checker can help you get the best ratio for your users.

The great news is that if you choose a high-contrast color palette for your logo and wider website design, you’ll also end up creating something attractive and easy to use for everyone. For example, bold color on a light background will usually look better than a bold color on an equally bright background. The lack of contrast between the two wouldn’t only fall outside of WCAG color contrast guidelines, but the design also runs the risk of looking unprofessional.

It might be tempting to choose a color palette that gives you a lot of options, but you’d be surprised just how effective a small range of high-contrast colors can be. This makes for a striking, modern design that will please all users.

Make the Changes Now

If you’re in the early stages of developing a brand, now is the time to make sure your color palette has the potential to meet these guidelines once your site is live. If you don’t think about this until later, you could be restricted in the way you can apply your branding to the design of your website. Regardless of where your website is in its journey, now’s a great time to update the look and feel by incorporating a more compliant color palette — use a WCAG color contrast checker to see how your designs stack up.

Even if a full overhaul of your website color scheme isn’t possible right now, the accessiBe accessibility interface allows you to address various accessibility requirements. This includes enabling different color profiles to help those with low or limited vision access the colors that suit them best. Our easy-to-use plug-in allows the user to adjust the color scheme in real-time to suit their needs better.

Is this mandatory, and why do many people look for ADA color contrast requirements?

While the ADA doesn’t specifically mention websites (as it was created in 1990), there are several reasons why you should comply with certain standards. First off, websites are increasingly being recognized as “a place of public accommodation,” which is outlined in the ADA. These places must meet accessibility standards.

There have also been a number of lawsuits filed under the ADA, with approximately 200 pertaining to website accessibility in 2019 alone, and each year increasing. Making your website accessible shouldn’t be a legal issue, though; it’s a human one. To serve your visitors in the best way possible, it’s important to consider accessibility needs. This shows a desire to be inclusive, but it’ll make the entire user journey a more positive experience.

A compliance color checker is a great place to start if you’re looking for quick wins regarding website accessibility. However, if you want to be a leader in your space, automation is key to a seamless user experience that’s suitable for people with disabilities. Not only will this help you avoid web accessibility lawsuits, but it’ll help you identify areas that need improving. These changes will make your website — and brand — more welcoming as a whole.

Other Steps to Take

As well as using text and color to convey meaning, look for other ways to get the point across. The use of icons and images can also help users browse your website. Looking at your website from the point of view of a person with low or limited vision can help you make the changes needed to improve their experience. This starts with ADA compliance but goes into useability and user experience, too.

Reasons to make your website more accessible:

  • You’ll be able to serve a wider range of users with a WCAG compliant website
  • You’ll avoid legal issues
  • Your website will look more attractive as a whole
  • The useability of your site will increase
  • People with low or limited vision will have an improved browsing experience

If you’re just starting your website accessibility journey, starting with a compliance color checker is a great step. When you’re ready to take things to the next level and make additional accessibility improvements to your site, accessiBe’s tools can help by using a clever mix of automation and AI.

AUDIT YOUR WEBSITE FOR FREE

Find out now if your website is ADA  & WCAG  Compliant