Color

Acorn uses a subset of Mozilla's brand color palette, however, Mozilla's full color palette may be referred to and used for Firefox in-product illustrations, such as onboarding illustrations. You can reference Mozilla's color palette in Protocol, Mozilla's marketing website design system.

While we draw from the same core palette, our color usage and guidelines vary across Desktop, iOS, and Android. Therefore, refer to their respective sections for guidelines on how to use them.

Themes

Acorn supports both light and dark modes. Desktop and mobile share some of the same light and dark mode colors, but apply them to different user interface elements.

Firefox's light and dark modes are also treated as themes and correspond to Firefox's light and dark themes. While users can freely choose between the light or dark theme, their devices default to the mode their operating system is set to.

Accessibility

Further WCAG resources:

• Understanding use of color
• How to meet use of color
• Reference materials and tools

Color contrast

Acorn strives for WCAG 2.1 minimum contrast guidelines.

Color blindness

There are different types of color blindness that makes people see colors differently. Color blindness also affects 1 in 12 people that were assigned male at birth.

High-contrast mode

Every operating system's high-contrast mode behaves differently. Some operating systems have default high-contrast mode color palettes, with some palettes being capable of user overrides. Other operating systems will increase the contrast on the existing interface colors.

You can learn how high-contrast mode themes work on Firefox for desktop in Firefox's source docs.

 

Changelog