Bold Accessible Colors

Loving bold colors and contrasts certainly helps when going accessible. We chose bold colors that complement therapixbio.com‘s courageous approach in the treatment of underserved central nervous system disorders using cannabis.  The homepage is an eye catcher with its red, purple, green and blue image overlay that contrasts with the white text.

The colors carry through each section as page banners and are then softened into light background colors with black text for the body of the pages. All colors were tested to meet the AA  accessibility standard using Webaim’s color contrast checker.

Start off with an accessible theme

We created the therapixbio.com website using the Therapixbio responsive illustrationWordPress 2015 theme which comes bundled with WordPress. This theme is tagged “accessibility ready” by WordPress.org.  What this means for a web developer is that the theme includes many accessibility requirements such as keyboard navigation, skip links, proper headings, forms and more.

If you don’t recognize the relationship between the theme and our design, we are not surprised. There is a lot of custom css at play here.  We stretched the sidebar to meet the content area and removed the background white spaces. Additionally, the sidebar colors stand out while complementing the main content colors.

We chose this theme for its stated: “mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.”

Testing

We tested the site using NVDA and ChromeVox. Try it yourself, tab through the site to access links or for the full experience download NVDA or ChromeVox from the Google playstore, turn on your speakers and start testing the site.

 

0