We want to support you in making your Mighty Network visually accessible for all members. Color choices play a big role in readability, usability, and overall accessibility—especially when text or icons appear on top of your selected colors.
How to Set Your Network Colors
To customize your Mighty Network’s colors:
Profile photo > Admin > Network Branding > Colors
(You can learn more about Network branding options in this article.)
How to Set Colors for a Space
To customize colors for a Space:
Gear icon > Space Branding > Colors
(You can learn more about Space branding options in this article.)
How Mighty Handles Text and Icon Contrast
You have full control over your header, button, and brand colors. When text or icons appear on top of your chosen colors, Mighty automatically adjusts them to black or white based on contrast needs to keep things visually accessible.
If a selected color isn’t accessible, Mighty will recommend alternatives and offer suggestions—though you can always save any color you choose.
These accessibility adjustments are based on the Web Content Accessibility Guidelines (WCAG). To meet the WCAG AA standard (the baseline for accessible design), the contrast ratio between text/icons and their background must be at least 4.5:1.
Below are examples of how Mighty applies these standards across headers, buttons, and text links.
Header Colors
Header icons appear white on dark header colors.
They appear black on light header colors.
Automatically inverting icon colors ensures header text remains readable across a wide range of background colors.
Button Colors
Button text automatically switches to white or black depending on the button color.
Sometimes, a button color doesn’t provide enough contrast for either white or black text.
In this case:
Slightly darkening or lightening the button color will help meet WCAG AA contrast requirements.
Lightening the button too much can make its outline difficult to see or interact with, so it’s best to maintain enough contrast for both the text and the button shape.
Text Links and Action Icons
Text links and action icons typically appear on a white background, so the color you choose for these elements should be on the darker side to maintain accessible contrast.
Additional Resources
Need help choosing header or Event image sizes, where to place text, or what logo size to upload?
We created a handy cheat sheet to help you bring your brand to life across your Mighty Network.