When you’re building a new website, color is often one of the most exciting parts of the design process. You choose colors that match your brand, complement your logo, and create the look and feel you want your business to convey. But there’s another important factor that should influence your website’s color palette: accessibility.
At Jus B Media, we don’t choose website colors simply because they “look good.” We also consider how those colors work together for visitors with different visual abilities. That’s why you may notice that some of the color combinations we recommend; or some of the changes we make to an existing brand’s colors, are intentional.
Our goal is to create websites that are not only beautiful and on-brand, but also easier for as many people as possible to use.
What is Website Accessibility?
Website accessibility means designing and developing a website so that people with disabilities can access, understand, navigate, and interact with its content.
Accessibility can involve many different parts of a website, including:
- Text size and readability
- Keyboard navigation
- Alternative text for images
- Video captions
- Form labels
- Page structure and headings
- Links and buttons
- Screen-reader compatibility
- Color contrast
Color is especially important because some visitors may have color vision deficiencies, low vision, or other visual limitations that make it difficult to distinguish certain colors from one another. A website that relies too heavily on color differences; or uses text that doesn’t have enough contrast against its background, can make important information difficult to read.
That’s where WCAG comes in.
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines. These guidelines provide recommendations for making web content more accessible to people with disabilities. WCAG is developed by the World Wide Web Consortium (W3C), the organization responsible for developing international standards for the web.
One of the areas WCAG addresses is color contrast. Contrast refers to the difference in brightness between two colors, such as the color of your text and the color behind it. For example, imagine putting light gray text on a white background. It might look clean and modern, but it can be surprisingly difficult to read, especially for someone with low vision.
Now imagine using dark text on a light background. The difference is much more noticeable, making the content easier to read. That is why our designers don’t look at color combinations only from an aesthetic perspective. We also consider whether there is enough contrast to support readability and accessibility.
Why Color Contrast Matters
Think about all the places color appears on your website. Your brand colors may be used for:
- Headlines
- Paragraph text
- Buttons
- Navigation
- Links
- Backgrounds
- Icons
- Forms
- Call-to-action sections
- Alerts or notifications
If the contrast between these elements isn’t sufficient, visitors may struggle to determine what they’re looking at or what action they are supposed to take.
For example, a button might technically be present on the page, but if the text and button background are too similar in color, the button may be difficult to see. The same is true for body copy. If your text is too light against its background, visitors may have to work harder to read your content, or may simply leave the page.
Good website design isn’t just about what looks good. It’s about what works.
How WCAG Uses Contrast Ratios
WCAG uses specific contrast ratios to help determine whether text and other important visual elements have sufficient contrast. For normal-sized text, WCAG 2.2 Level AA generally calls for minimum contrast ratio of 4.5:1. For large text, the minimum is generally 3:1.
There are additional requirements for other types of content and interactive elements. You don’t necessarily need to know what all of these numbers mean when you’re working with our team. That’s part of what we’re here for.
When we’re selecting colors for your website, we can evaluate how those colors interact and make adjustments when necessary. Sometimes that means choosing a slightly darker version of your brand color. Other times, it may mean changing the background, text color, button color, or combination of colors being used.
The end result can still look like your brand, just in a way that’s more accessible.
Does Accessibility Mean Your Website Has to be Borning?
Absolutely not. One of the biggest misconceptions about accessible web design is that following accessibility guidelines means sacrificing creativity. It doesn’t.
Accessibility doesn’t mean every website needs to be black, white and gray. It means being intentional about how colors are used. We can still incorporate your brand’s personality, create visual interest, use bold accent colors, and design eye-catching calls to action. The difference is that we’re thinking about how those choices function for real people, not just how they appear on a designer’s monitor.
For example, your bright band color may be perfect for a decorative graphic or background element but not many provide enough contrast when used as small text on a white background. That doesn’t mean we can’t use the color. It may simply mean we use it differently.
What About Your Existing Brand Colors?
This is something we encounter frequently when building websites for established businesses. You may already have a logo and carefully selected brand colors that you’ve been using for years. We’re not here to completely reinvent your brand.
Instead, we look for ways to use those colors effectively online. A color that works beautifully in print materials may not work the same way on a website. Digital screens, text sizes, backgrounds, buttons, and interactive elements all create different considerations.
Sometimes the solution is as simple as creating a secondary shade of an existing brand color that provides better contrast. This allows your website to remain recognizable while making it easier to navigate and read.
Accessibility Benefits Everyone
It’s important to remember that accessibility isn’t only about meeting a requirement. Accessible design creates a better user experience. Someone with a diagnosed visual impairment isn’t the only person who benefits from readable text and strong color contrast.
Thank about someone looking at their phone outside on a bright, sunny day. Or someone using a smaller screen. Or someone whose eyesight has changed over time. Or someone who simply finds low-contrast text difficult to read.
When websites are designed with accessibility in mind, more people can comfortably interact with the content. And that’s good for your business.
A website should make it easy for visitors to find information, understand what you offer, contact you, make a purchase, schedule an appointment, or take whatever step you’ve designed the site around. If someone can’t easily read your content or identify your buttons, you’re creating an unnecessary barrier.
ADA Compliance and Your Website
You may have heard the term ADA compliance used when discussing website accessibility.
The Americans with Disabilities Act (ADA) is a federal civil rights law that prohibits discrimination against people with disabilities. While website accessibility can involve a number of legal and technical considerations, it’s important to understand that simply running a website through an accessibility checker does not automatically make a website “ADA compliant.”
Accessibility is an ongoing process involving design, development, content, functionality, and user experience. That’s why we don’t approach accessibility as a checkbox. Instead, we build accessibility considerations into the website development process from the beginning. Color is just one piece of that process.
Why Jus B Media Pays Attention to Your Website Colors
When you work with Jus B Media, our job isn’t simply to make your website look pretty. It’s to create a website that represents your business, communicates your message, works across devices, supports your marketing goals, and provides a positive experience for your visitors. That’s why our color choices are intentional.
If we recommend changing a shade, adjusting the contrast, or using one of your brand colors differently than you expected, there’s uaully a reason behind it.
We’re considering things like:
- Is the text easy to read?
- Does the button stand out?
- Is there enough contrast between the foreground and background?
- Can important information be distinguished without relying solely on color?
- Does the design support a broad range of users?
These decisions may seems small, but they can make a meaningful difference in how someone experiences your website.
Accessibility is Good Design
A the end of the day, accessibility and good design aren’t competing goals. They work together.
A beautiful website that is difficult to read isn’t doing its job. A website with perfect branding but confusing navigation isn’t doing its job. And a website that looks great to one person but creates barriers for another has room for improvement. At Jus B Media, we believe the best websites balance brand, beauty, functionality, and accessibility.
So the next time you see us choose a slightly different shade of your brand color, don’t worry – we haven’t forgotten your branding. We’re thinking about your visitors, too. Your website should look good, it should work well, and whenever possible, it should work well for everyone.
Ready for a Website That Looks Good AND Works?
Your website is one of the most important pieces of your digital marketing strategy. Accessibility shouldn’t be something added as an afterthought. At Jus B Media, we consider accessibility throughout the website design and development process, including thoughtful color selection and contrast.
Do you have questions about your current website’s accessibility or getting started on a new website? Let’s talk. We’re a digital marketing Hive here to help you build a website that represents your business, and works for the people you’re trying to reach.
