BrandCraft Logo
Quality logic color logo
Hero-web-design-ql

About the Client

QualityLogic was founded in 1986 to help solve compatibility problems between print systems and software applications. As a result, they developed quality assurance test tools and test suites that quickly became the industry standard. For more than three decades, industry leaders have trusted QualityLogic to help them release higher-quality, accessibility-compliant software, websites, and mobile apps.

Project Overview

For this project, the goal was clear—design an accessible website that meets Web Content Accessibility Guidelines (WCAG 2.1 AA) and complies with the Americans with Disabilities Act (ADA). The challenge, the design also needed to be impactful and flexible. In the end, we have a compliant website that looks good and gives our clients the flexibility they were after.

Designing an Accessible Website

We had a giant list of rules and regulations we needed to understand and embrace for the design to be truly successful. The first step was research (and lots of it). We had to focus on contrast, using color blind safe colors, type size, line height, and letter and word spacing, just to name a few.

ql-contrast-test
example-ql-color-palette
awards-type-pass

Color Changing Design

Once we had a good understanding of all the rules, we had to make the design flexible. Our client needed to be able to change the design and layout and still meet accessibility standards.

The design includes multiple background colors our client can choose from. When you select the background color you want the design automatically adjusts the color of the content, icons and buttons. This ensures the contrast and color will pass the accessibility tests even when new pages and sections are built.

Custom Icon Library

The custom icon library includes over 80 different icons based on QualityLogic's service areas and industries. Each icon works on both a light and dark background and can be scaled to any size on the site without becoming fuzzy or pixelated. Even though they have a transparent background the file size is much smaller and loads quicker than a standard JPG or PNG file.

ql-icons-top
ql-icon-middle
ql-icon-bottom

Visit QualityLogic.com to explore the full design.

uabb-device-window
uabb-device-phone
final-footer-image