How to update brand rules for accessibility and dark mode
In this guide, you'll learn the steps involved with creating brand rules for dark mode.
As is the case with most creative processes, there are many ways to accomplish the end result. These steps outlined below may be adapted according to your style, and/or your within the capability of your team's preferred software apps.
Why is it important?
If you haven't read this already, please do so:
Reasons Brands Need to Update Color Rules ASAP
Step 1. Gather or create the brand color rules
Most organizations and businesses have an existing brand guide/kit/book provided by the marketing department. Find it and there should be color names and codes included in the kit.
If there is no approved brand scheme, it'd be a good idea to create one. Start with the colors currently being used in the logo, website, and other digital presences. Again, the color codes are important. Naming the colors makes the rules easy to remember, but are not as critical.
Make a reference list of the colors being used, in text. If applicable, note the purpose of each color - for example, if marketing provides a set of approved "main / primary colors" and "accent colors," this information should be in your reference list.
2. Create a color combination chart
The next step is to create a chart that allows you to test all different possible combinations of colors. The horizontal row colors shall represent text colors. The vertical row colors shall represent background colors. See the graphic image below for an example.
On the top header row, list all the color codes. On the very first column on the left, list all the colors again. Add black and white as two additional most common colors.
If there is a set of approved colors that are specific to which can be used as background or text colors, list the color codes accordingly. Also, if there is a set of primary and accent colors, add a blank row to separate the two sets, and make sure it is clear which set is which.
There are a variety of tools one can use for this - Adobe or Canva, for example. Even Google Sheets would work well for this purpose, if you're familiar with creating custom color settings.
If there will is a team collaborating, consider using an app such as Miro for voting - which is what we used - see the.
3. Test color contrasts
At this point, you will need to determine whether Double A or Triple A is the goal - this may require conferring with legal counsel, grantors, or other advisors. One option is to move forward with the work, marking AA or AAA next to text colors and when assembling the final color schemes, stick to strictly Triple A or add to guidelines that Triple A is encouraged, but Double A is okay - this is considered WCAG compliant.
Once the standard is set, do this effort in two rounds. For the first round, test the regular colors. This will save a little time.
Use an online tool such as colourcontrast.cc to test all the possible combinations of colors, skipping the dark mode colors until round two. For 100% "fail" contrasts, put an X. For all others, list the font colors that have a Double or Triple A rating.
For round two, repeat the test using dark mode colors, skipping those that already failed during the first round of tests. For any that return a 100% "fail," add an X to the original color scheme.
4. Put together the color scheme(s)
Unless you are very lucky, not all the "wins" will create an appealing combination of colors when viewed in dark mode. It'll take a bit of effort at this step to hit an ideal combination that play nicely with one another in both dark and light modes.
Many people love dark mode - especially those with light sensitivity or are prone to migraines. People using dark mode would also appreciate an appealing aesthetic.
Note that the fewer colors there are, the less options and flexibility there will be. See the final chart below for how few colors made the cut. If the final results are too restrictive, it may be a good idea to go back to step 1 and add more colors that complement the existing brand colors.
To save time and make it easier to visually process what options there are, duplicate the chart and delete all the "fail" rows. Or, create a palette of squares for each color - the light and dark mode versions, for ease of rearranging.
This is likely when the team should get involved and collaborate, if applicable. Prepare a few different combinations of color schemes, then gather feedback, host a meeting and vote in real time using design thinking exercises, and/or get approval.
5. Finally, update or create a brand guide
Return to the original brand guide, if there is one, and update it. Otherwise, create a new one. There are many different ways of laying out the guide with approved color schemes, font variations and sizes. If unsure as to best practices and industry standards, there are plenty of resources available online that will provide guidance.
It is strongly recommended that the guideline include the dark mode colors so designers can get a feel for what would generate the best aesthetic in both modes on emails, websites, and third party apps: light or dark.
Eventida has two different color schemes. The rule is to not use the color schemes interchangeably but consistently -- for example, one color scheme is used on the website. Then the other color scheme may be used
Wrap-up
A few final notes:
Need help executing?
You may want to make this happen but not have time, headspace, or resources. We can definitely support you and/or your team, depending on availability. There are a few different approaches:
- Your team does most of the legwork with our mentorship and feedback.
- We do some of the work, hosting fun and interactive design thinking exercises. Just show up and participate!
- All of the work is done by us, presenting the final color schemes for your selection and approval.
Interested? Send an email to support@eventida.com
Feedback is encouraged
This is not a "perfect" guideline by any means. As a research and development lab studying inclusion in an ever-changing technical landscape, these standards will constantly evolve. Also, mistakes or assumptions may be made, new lessons learned, or some details are missing.
Please do not hesitate to ask questions, share feedback or corrections to flawed information shared above by sending a message to support@eventida.com. It will be very much appreciated. Thank you!
Support Eventida
If you found this guideline super helpful and want to show your appreciation, here are three ways:
- Follow Eventida at https://medium.com/eventida
- Share this guide on social media
- Send a contribution through Zelle or Paypal to support@eventida.com
Thank you!