You’re probably here because you’re designing a landing page and were told your Section Header Color or Button/Link Color is too light to be legible on a white background or that it doesn’t meet WCAG standards. This article will walk you through what those standards mean, why they should be applied to your site and how to solve any roadblocks you’ve encountered with a non-compliant color selection.
Learn more here:
Understanding WCAG Standards
Detailed Success Criteria for Contrast Ratios
What does WCAG mean?
Web Content Accessibility Guidelines (WCAG) is a set of internationally shared standards for web content accessibility set forth by the World Wide Web Consortium (W3C). These standards explain how to make web content more accessible to people with disabilities, such as color-blindness, astigmatism or aging eyes, and help you ensure your users are able to read content within your site.
How does this apply to my VolunteerHub site?
You might be wondering why this affects your site when you can clearly read text with the desired color applied. In that case, those WCAG standards weren’t really written for you. They were written for all your volunteers that have visual impairment, which can actually include anyone whose vision is not 20/20. It’s been scientifically proven that age and various visual impairments reduce the ability to discern colors (and thus read text) with too small a contrast ratio. So, while your site may look great to you with the bright yellow or green you chose, it literally could be impossible to read for one or more of your volunteers.
According to the standards, each element used in web design to convey information (meaning, they’re not simply decorative) must have to a 3:1 contrast ratio against the element’s background color. This could be applied to anything from event names and Sign Up button text to the step names in the Event Registration wizard or Account Creation wizard. Both the Section Header Color and the Button/Link Color in each landing page is applied to text somewhere in your site. Therefore, in order for your organization to be compliant with the rules set forth by the W3C, you must choose a color with that minimum contrast ratio.
This could mean, however, that you’re choosing a color that doesn’t exactly match your organization’s primary branding colors. And that’s ok. When a company chooses branding colors, such as the colors for their logo, those colors don’t necessarily need to be compliant with the WCAG if they aren’t conveying meaning (so, for instance, you may have a logo that includes a decorative bright blue and yellow design, but the text within that logo conveying the name of your organization might be darker since that is the information that conveys meaning and therefore should be WCAG-compliant). There are typically secondary colors that complement the main logo colors that the design team approves for use throughout a website and other marketing materials.
How can I make my site’s color scheme compliant?
In many cases, your organization does have other acceptable colors for use in web, marketing and other materials. Ask your web design or graphics team for the full list of acceptable colors to use and replace the color that was too light with one of the darker secondary hues.
If you aren’t sure what your organization’s acceptable secondary colors might be (or there aren’t any), another solution would be to drag the color down slightly using the color-picker provided and try saving the landing page again until it accepts your color. True, this won’t be the exact color from your organization’s branding, but it will be so close and used so sparingly that people will probably never even notice it doesn’t exactly match your website.
Remember, simply darkening your preferred color will not cause your volunteers, partners, local groups or sponsors to decide against volunteering with your organization. It will, however, help ensure your volunteers are able to use your VolunteerHub site, which is always much more important than visual appeal!