Accessible Color

Objective

Combine two existing brand color palettes into one accessible, WCAG AA-compliant palette that retains brand identity and ensures inclusivity for users with vision disabilities while addressing legal requirements for accessibility.

Initial Challenges and Goals

As accessibility laws continue to evolve, with states like California and Colorado implementing web accessibility requirements. We focused on updating our color palette to comply with the Web Content Accessibility Guidelines (WCAG) AA standards. This compliance goes beyond just color contrast and includes aspects such as alt-text on images, keyboard accessibility, and ARIA labels. However, our immediate focus was on color contrast, specifically addressing accessibility for individuals with vision disabilities—both permanent and situational.

According to the CDC, 8% of Americans have some form of vision impairment. However, improving contrast not only benefits users with vision impairments but also improves readability in temporary situations, like reading in bright sunlight on a golf course. This proactive approach would enhance the usability of our website while mitigating potential legal risks.

DESIGN PROCESS

DESIGN PROCESS

Color Audit and Merging Brand Palettes

Our color audit revealed that only 2 of our 6 brand colors met the contrast requirements for white text. Despite this, white text was used across the site because it was considered "easier to read." The result was over 100+ contrast errors on key pages, such as the search page on GolfNow (GN) and the show page on GolfPass (GP). To address this, we are updating the colors solely for web/app use .

Original GolfPass/GolfNow Color Palette

We began exploring options to merge the GN and GP color palettes to create a unified, compliant system. After researching other blue/green brands, such as Holiday Inn, we noted how they shifted from bright greens and blues to accessible shades, like a compliant green for large text and a navy blue for primary use. Inspired by this, we sought to implement similar adjustments.

Challenges with Orange and Yellow:
While our new palette passed WCAG standards for most colors, yellow and orange presented significant challenges. These colors are particularly difficult to make compliant with white text, and as a result, we had to use black text on these colors. After multiple rounds of approval with stakeholders, we pushed this solution live.

Internal Feedback:
Months later, internal feedback indicated that black text on orange resembled a "Halloween" theme, prompting us to revisit our design.

Proposed Color Changes

Proposed Button Changes

Pivot & Redesign

Expert Consultation and Large Text Solution:

I consulted the Director of Accessibility for NBCUniversal and a UX Consultant at TPGi to find a way to make the orange buttons work with white text. The solution came from the WCAG guideline for large text, which allows for white text on orange if the font size is between 18px and 24px and is bold. This would require an increase in font size from 16px semi-bold to 18px bold, which added intensity to the buttons but ensured compliance without sacrificing the user experience.

Outcomes:

  • We updated our designs to use the larger text, and while the change was initially met with hesitation, it provided the right balance between accessibility and design aesthetics.

  • The new blue, green, and red colors passed contrast requirements for white text, while orange and yellow would continue using black text, except in cases of large, bold text.

  • The full rollout of these changes is expected by early 2025.

New Color Palette with Orange Text Update

New Buttons with Large Text Updates

Key Takeaways

Key Takeaways

  • Balancing Brand Identity and Accessibility:
    Merging two palettes required preserving each brand’s identity while ensuring accessibility, striking a balance between aesthetics and legal compliance.

  • Navigating Complex Colors:
    Yellow and orange posed challenges for white text compliance. Using the WCAG "large text" guidelines allowed us to meet standards while maintaining brand consistency.

  • Proactive Legal Compliance:
    By addressing contrast issues and complying with WCAG AA, we avoided potential lawsuits and reinforced our commitment to inclusivity.

Conclusion

Through expert collaboration and careful planning, we successfully unified the GN and GP palettes into a WCAG-compliant system. This project emphasized the value of proactive accessibility, ensuring our digital experience is inclusive and user-friendly. Full rollout is planned for 2025, improving readability and accessibility across all platforms.