Over the past few weeks, you may have noticed that we have been working on a rebrand. We have been sneaking bits and pieces of the new brand styles and graphics into our social media, and recently relaunched our website with the new design.
Deciding to Rebrand
When we decided that we were going to make WP Accessibility Day an official nonprofit organization, we thought it might be time to create a more formal logo and brand.
Last year’s logo and website were a basic recolor of the original 2020 logo and site. That logo included a grid of 9 random patterns and a serif font.
None of us were really sure what the square meant or how it represented us. We also weren’t in love with the purple and teal color scheme or serif font.
Rebranding and building a new website is no small feat, though, so we asked the organizing team what they thought about doing a rebrand. Was it worth the effort, and did we have people willing to volunteer to help with design and development efforts?
There was resounding agreement that we needed to create a more intentional and energetic brand for WordPress Accessibility Day, and we were lucky to have a dedicated team of volunteers willing to make that happen, so we embarked on the process in early spring.
New Logo & Brand Styles
We owe our brand aesthetic to organizer Ryan Bracey and the team at Second Melody. Second Melody is a branding studio specializing in identity development, customer engagement, website design, and user experience. Ryan, Jay Zawislak, Kevin Greene, and Mike Lanzafame from Second Melody volunteered to design the logo, website, and this year’s t-shirt.
After an initial discovery call, Ryan, Jay, and Kevin created several logo concepts. Over two or three rounds of ideas and Slack conversations, we arrived at our new logo, colors, and font.
The logomark, based on a clock, consists of 12 colored rectangles that make up a ring around a central figure, which is the icon for universal access ( a person with their arms and legs outstretched in a star shape). This icon is frequently used to represent web accessibility.
Beyond communicating the all-day nature of our event with a clock, we liked that the ring around the person represents unity, while the multiple colors represent the diversity and the wide range of topics that are discussed during WordPress Accessibility Day.
Our logo can be shown with and without the year, depending on how it is being used.
The logotype is set in the “Fieldwork” font, a geometric sans serif font.
On the website, the primary typeface is “Sora,” an open-source font. Sora was chosen because of its distinguishing letterforms, which make it highly legible.
We looked at quite a few fonts when selecting the font for the website. We were specifically looking for something easy to read for people with dyslexia, low vision, or other disabilities. We selected Sora because of its unique characteristics for commonly confused letters like capital I and lowercase l.
We gave the Second Melody team the incredibly vague challenge of “making the brand colors more energetic and passing Web Content Accessibility Guidelines AAA color contrast.” Aside from knowing we didn’t want purple or teal, we didn’t give any other direction, and we couldn’t be happier with how the colors turned out.
The bright colors feel fun and vibrant, and we are able to utilize them in both “light mode” and “dark mode” while passing AAA color contrast.
About Our New Website
After designing the logo, the Second Melody team created designs for the major pages on the site in Sketch.
The designs utilize icon patterns to provide interest so we don’t need to rely on stock photos, and included both light and dark mode styles.
The website was coded by Joe Dolson and Nick Croft, with help from Danielle Zarcaro and me. Alex Stine and Raghavendra Satish Peri tested the site with screen readers to ensure it stayed accessible during the rebuild.
New Support for Color Modes
You may have noticed that the new website has a color mode toggle in the header. With this new site, we wanted to showcase how websites can be more accessible by providing multiple color modes for users.
Nick led the development of this feature which includes:
- Stylesheets that recognize the operating system color preferences and serve the dark or light version of the site accordingly.
- A toggle that allows users to change the color mode manually.
- A third “high contrast” stylesheet will be served to users with an operating system or browser set to high contrast.
Creating stylesheets that respond to the user’s color preferences in their operating system is relatively easy with CSS media queries. If you want to learn more about how to do this, watch Nick’s talk from WordPress Accessibility Meetup, “Dark, Light, and Inverted: A Developer’s Guide to Color Modes.”
Inputs Now Have Autocomplete
Another accessibility improvement we added this year was related to our web forms. We use Gravity Forms for all of our website forms. Not too long ago, Gravity Forms added the ability to set an autocomplete attribute on form fields. Autocomplete attributes make it easier for users to fill in personal information in email, address, phone, and other fields without having to type it.
Danielle went through all of our forms and added the autocomplete attribute where necessary to improve their accessibility.
Still a Hybrid Theme
While we use the block editor for creating our posts and pages, the WordPress Accessibility Day website is still very much a hybrid theme. We’re not using Full Site Editing for headers and footers and are utilizing the Classic Widgets plugin. This is partially because many of the volunteers on our team are most familiar with the “old school” way of developing WordPress sites and partially because we want to keep the back end of our website as accessible as possible.
We actually ended up switching our custom post types back to the classic editor to make it easier for screen reader users on the organizing team to edit speakers, sessions, and sponsor posts.
We’re not using any third-party block libraries to build the site – everything is built with core blocks, with styles controlled largely by the theme, not in the editor.
What do you think?
We’re continuing to tweak and do small bits of cleanup here and there, but the site is nearly done – or at least done enough for me to tell you about it. We’d love to get your feedback and hear what you think!
If you see a bug, we would very much appreciate hearing about it. You can open an issue on our GitHub repo or contact us via our support form. GitHub is also the place to go if you want to check out the code for our theme or our conference schedule plugin, forked from the WP Conference Schedule plugin originally coded by my team.
If you have other thoughts, tag us on social media. We’re @WPA11yDay on Twitter, Facebook, and LinkedIn.