508 Compliant - Designing for Compliant Web

Years ago, the design of a website was judged solely on a few select factors. While many of these factors are remain consistent today - such as animations, use of imagery and graphics, typography, and interactivity - very little consideration was given to compliance and accessibility. The web today is placing much more importance on these topics. While a website needs to be well-designed, it also needs to be easily used by visitors with visual or physical impairments. Many designers hear the popular phrase "508 Compliance" and cringe. The basis of their fear is the perception that all opportunities for creativity will be lost and their design will be left bland and flat. In reality, this is very far from the case. A designer can continue creating beautiful interfaces while keeping a few key points in mind to ensure compliance.

Color Combinations Visible to Everyone

One of the most critical aspects of compliancy is the use of color. 508 Compliance does not mean only render black text on a white background. Designers still have the freedom to leverage any color palette they want, but they do need to be diligent of text and background color combinations. About 2.7 million people in world suffer from some type of color blindness or color vision deficiency and for these individuals combinations of colors blend together, making the text on a site almost illegible. While it is often easy to forget color compliance with all the other layout and styling considerations, there are many resources available to designers for testing during theming. The Colour Contrast Analyser (CCA) is an application available for both Windows and macOS that allows for compliance testing of background and text hex colors. For existing websites, the Colorblind Web Page Filter can be used to emulate various types of colorblindness and interact with a website in real time.

Colour Contrast Analyser Screen

The Colour Contrast Analyser includes a color picker to select hex values from a web page or composition to determine compliance for both AA and AAA levels of accessibility.

Don't Rely Too Heavily on Color for Messaging

With both website messaging and design, we often see too much reliance on the color of an item. Instructions to a visitor of a website or application should avoid including wording that would require the visitor to see elements on the page a certain way. A statement such as "click the green button on the right to get started" might not translate well for all audiences. While implementing color change on an element's active or hover state is valuable to an interface, integrating other visual changes – like bolding or underlining text – goes a long way. Using colors alone to communicate errors, alerts or success should also be avoided unless they are accompanied by text communicating the message. Red and green, while denoting two very different messages, will appear the same for some visitors with colorblindness. Another example of this scenario can be seen with form validation. Simply highlighting incomplete required form fields in red is not enough to be compliant. A clear error message should be provided to the user as well.

The Colorblind Web Page Filter can show you side-by-side what is seen by both a colorblind visitor and a visitor without impaired vision. This helpful when determining if all primary actions are clearly discernable for any visitor.

HTML Code Standards & Syntax Matter

Color treatments have been the primary focus of this post, but there are many other compliance factors that require consideration. One of these factors involves HTML coding best practices. A clean code base and clear content structure will result in a page of content being clearly organized and digested by any user regardless of device or screen reader. The order of headers on the page – H1 through H6 – should be from most important to least important. Using too many headings can make a page difficult to navigate and confuse the user as to what areas to prioritize. Alternative text should be used for all images or image links and title text should be included for all links and buttons. These elements will be detected by screen readers used by visitors that are blind or have vision impairments.

Compliancy on the web is extremely important and will become a key focus of organizations embarking on a website redesign. Designers and developers spend hours testing a site on every possible device and platform – even if the test case includes a small percentage of web traffic. Shouldn't we also be taking the time to ensure that visitors with vision impairments can also use the site properly? Regardless of whether the requirement exists in a website build contract, I would strongly encourage leveraging tools and resources to test your team's design work throughout the design process to ensure accessibility.

Other Accessibility Links & Resources

  • Color Safe – generate color palettes that look great and are 100% accessible.
  • WebAIM – Additional information regarding compliance and link colors.
  • U.S. Department of Veterans Affairs – Detailed documentation and examples for color usage and 508 requirements.

Checkout another great post about 508 compliance or use the comments below for further conversation on this topic!