We want to support you in setting up your Mighty Network to be visually accessible for all your members. This is especially important when it comes to using color in your Mighty Network.
You can select colors to brand your Mighty Network by clicking on your profile picture in the top right corner > Admin > Network Branding > Colors. Check out your Network branding options in this article.
You can select colors to brand a Space inside your Mighty Network by going to the gear icon > Space Branding> Colors. Check out your Space branding options in this article.
While you have full control over the colors you choose for your header, buttons, and other visual elements, in instances where text or icons appear on top of these colors, the text and icons will automatically appear black or white depending on the background color, to ensure they are visually accessible.
In cases where you select a color that’s not at all visually accessible, we will advise you to select an alternative color and offer suggestions. However, we will always let you save any color you select.
To make these determinations about visual accessibility, we use a set of technical standards called the Web Content Accessibility Guidelines (WCAG). To achieve the WCAG AA rating (the minimum rating to be in compliance with guidelines), the contrast ratio between the text and icons in your Mighty Network and the background color they appear on should be at least 4.5.
To best understand this, here’s how color accessibility is perceived in three scenarios: headers, buttons, and text links/action icons.
For the Header
Icons on the header appear white when the header is a dark color and black when the header is a light color.
By inverting the icon colors from white to black, light colors can be used in the header while maintaining visual accessibility.
For Buttons
We adjust the text to be white or black depending on the background color of the button. However, sometimes a background color doesn’t provide enough contrast to meet the AA rating with either white or black text, as in the case below.
Darkening or lightening the button color can help achieve the required contrast ratio.
But lightening the color too much can make it hard to perceive the outline of the button and make it hard to interact with.
For Text Links & Action Icons
Text links and action icons like those below primarily appear on a white background. This means that the color selected should be dark in order to meet the AA rating.
Additional
Wondering what size to make your Article or Event headers? Want to know where to put the text? Not sure what size logo to upload?
We put together this cheat sheet to help you bring a little bit of your brand's flair to every corner of your Mighty Network!