accessible for all ~

accessible for all ~

I’m passionate about digital accessibility as a means toward creativity versus compliance. My work prioritizes content creation that is inclusive as much as strategic.

Color contrast

Complementing CCA’s brand with inclusivity

A solid field of navy in an arch shape.

Solution by design

CCA’s brand teal on cca.edu did not pass WCAG accessibility standards (AA and AAA). The web and design teams found a design solution that worked within our brand and better served our site visitors.

cca.edu homepage shows faculty critiquing work; headline reads: "Great applications take time" with subheading "Start your graduate application now for January 15 deadline."
cca.edu homepage in grayscale illustrates the lack of color contrast on teal elements. Image shows faculty critiquing work; headline reads: "Great applications take time" with subheading "Start your graduate application now for January 15 deadline."

A secondary color—navy—was added into cca.edu’s visual language. It passes all color contrast tests and is analogous to the brand teal. Across the site, we also implemented a consistent active state of purple.

A square color field of CCA's brand navy
A square color field of CCA's brand teal
A square color field of CCA's brand purple
Three rows of examples of new teal/purple solution on cca.edu's homepage, hero navigation, Academics page, and small CTA.
The accessible version of the YouVisit tour removes the visual experience of the original tour. It starts with text introducing the experience, primary buttons, and then dark blue anchor links to the tour stops.

An inclusive tour

The homescreen of CCA's tour on YouVisit shows the Montgomery Building with additional stops to the lefthand side; images and audio controls are below.

Before

~ No alternative text
~Separate interface for “accessible version”
~ Automatic video and audio play

The opening stop for CCA's tour shows an aerial image of the campus, short introductory text, and a media gallery of images and videos of campus.
The tour stop for the Advanced Architectural Design Studios shows a close-up of hands holding a sample of navy blue, 3D printed fabric.

After

~ Alt text on images and videos enabled
~ One aesthetic and inclusive experience for everyone
~ Designed and developed with WCAG Guidelines 2.0