Utility Websites and Color Contrast
More and more people are beginning to learn about Web Accessibility—what it means for them, what it means for their site visitors, and what they can do to build more thoughtful and responsible websites. While the Powerful team has always worked to curate designs and content for electric cooperatives, broadband providers and other utility organizations that are ADA-minded, we’ve also been hard at work building tools for your use so that you can be a part of the bigger picture.
One of our latest tools is a color contrast checker. It’s something you can use when testing out design for various mediums, but especially for web design and content.
Web Content Accessibility Guidelines (WCAG) conformance levels overview
If you’re familiar with the terms Web Accessibility and Americans with Disabilities Act (ADA) Compliance, you may be familiar with WCAG 2—or the most recently scheduled release, WCAG 2.2. This set of guidelines helps web designers, developers, content creators and more, create more accessible websites and web applications for people living with disabilities.
WCAG uses 3 levels of conformance to essentially “grade” your website’s level of accessibility. Level A is the lowest level of success criterion and is the minimum requirement for all websites and web apps. Level AA fulfills Level A and itself and is considered acceptable for most online services. Level AAA meets the criterion for all 3 levels. We strive to meet the AA standard in our design process for all electric cooperative and other utility organizations we build websites for.
Contrast Ratio for Foreground and Background Colors
If you’ve ever seen a web page or an image where the copy is difficult to read—no matter how hard you squint—because the colors are just too “similar,” then you likely can relate to how frustrating it is. For anyone who experiences impaired vision or color blindness, this frustration can be amplified significantly.
When speaking about color contrast or contrast ratio, it essentially means the visual difference between elements. A ratio of 1:1 would be white on white, and a ratio of 21:1 would be black on white. Noting this contrast can be helpful on images and other design elements, but it’s particularly important for text. We can’t easily read what we can’t easily see, and higher contrast allows for easier reading with lesser strain.
Minimum Contrast Requirements for WCAG
The minimum required contrast ratio for text lies in the WCAG Level AA Criteria. The minimum ratio for large text is 3:1, and the minimum for all other text is 4.5:1. Many of our sites come equipped with a text resizing tool, allowing visitors on all devices to either enlarge or shrink the text on the page. The tool will not allow the text on screen to shrink too small if it does not meet the correct AA ratio standards, so we’ve got you covered there. However, your project designer may need to adjust the saturation or brightness of your chosen colors to ensure your website is accessible.
To achieve Level AAA of WCAG for contrast, large text (including headers) must have a ratio of at least 4.5:1, and regular text must have a ratio of at least 7:1. Level AAA is like the cherry on top, but is something we like to balance with Level AA to ensure your website design isn’t lacking interest.
A Note About Hyperlinks
One thing that may be worth mentioning is that in order for text hyperlinks to pass contrast accessibility, they must have two differentiators from your website paragraph text—meaning that color alone won’t suffice. The most commonly used differentiators are color and underline. Though bold and italics can also be used, it isn’t recommended because that styling is also used often throughout body text to draw emphasis or to note titles.
Your Powerful Tools
Now that you’ve been briefed on WCAG color contrast ratio requirements, head over to our Color Contrast Checker to see if your current website complies with either a Level AA or Level AAA standard. The tool will respond in real-time as you make adjustments, and you’ll likely see why it’s so important to pay attention to contrast ratio.
