Category color-coding

Recommendation for online usage

Always double check with Design System Color Contrast Checker to see if your color combination is accessible (adhering to WCAG 2.2) and on-brand.

Use bold formatting instead of color for:

• Headings
• Text within category descriptions
• Microcopy (short pieces of text that provide instructions or guidance)
• Standard textual content within articles

Exceptions:

You can use contrasting text colors within blocks that have a colored background to improve readability.

In simpler terms, focus on bolding text for emphasis instead of relying on colors. This applies to headings, category descriptions, and most text within articles. However, feel free to use contrasting text colors to make things readable when the background itself has color.

Recommendation for print usage

For print, the Pantone reference is the most accurate and reliable way to define colors as the printed material type can significantly affect how CMYK colors appear. Print test (GMG) before full production is recommended to ensure precise calibration across different material types, maintaining consistent color accuracy and quality.

Color-coding umbrella

Product categories

Color definition

Primary color – the main visual identifier for a product category, the most prominent color used in marketing materials and online platforms to create a stronger category association (eg. headers in brochures, shelf highlighters, website banners, badges,..).

Light shade - a lighter variant of the primary color, used predominantly as a background color to ensure readability and create a clean, spacious look while maintaining category consistency.

Dark shade – a darker variant of the primary color, primarily used for text and other elements requiring high contrast against lighter backgrounds, ensuring legibility and a cohesive visual hierarchy

APCA Contrast Guidelines

Non-text elements

• Lc 15: Minimum contrast for non-semantic elements to be discernible. Avoid for important items.
• Examples: Dividers, thick focus outlines.

Spot text

• Lc 30: Minimum contrast for placeholder text, disabled elements, or non-content text.
• Examples: Placeholder text, disabled element text, copyright text, mostly-solid icons.

Headlines

• Lc 45: Minimum contrast for large, heavy text like headlines
• Examples: Headlines, small outlined icons, fine-detail pictograms

Content Text

• Lc 60: Minimum contrast for non-body content text.
• Examples: Text larger than 24px and or larger than 19px in bold.

Body text

• Lc 75: Minimum contrast for columns of body text.
• Examples: Body text and block text.

Fluent Text

• Lc 90: Preferred level for fluent text and large areas of color.
• Examples: Long-form text, blog articles.

Further reading: https://ruitina.com/apca-accessible-colour-contrast/

Beauty

Using any colour different than black for fluent or body text is not recommended.

Dermato-cosmetics

Using any colour different than black for fluent or body text is not recommended.

Perfumes

Using any colour different than black for fluent or body text is not recommended.

(Mother &) Baby

Using any colour different than black for fluent or body text is not recommended.

Healthy food (lifestyle)

Using any colour different than black for fluent or body text is not recommended.

Supplements (Vitamins & Minerals)

Using any colour different than black for fluent or body text is not recommended.

Medical devices

Using any colour different than black for fluent or body text is not recommended.

RX

In online communication the official Dr. Max Green is modified due contrast & accessibility. Instead of defined  HEX #78be20 (Pantone® 368c ), the #5DA20A  is used for digital communication, excl. logo Dr. Max keeping always #78be20

Using any colour different than black for fluent or body text is not recommended.