Choosing Colors to Pair with Cassis: Banner Background and Decoration Combinations

Cassis is a deep red-purple inspired by the blackcurrant fruit. The name does not correspond to one universally fixed HEX code, so this article uses cassis ■#5A2D46 as a specific design example. On a dark-colored banner, an equally dark heading or body text can get lost. Using a promotion for cassis-flavored baked goods, we’ll compare two ways to combine the background color with decorative accents. HEX is a six-digit code of numbers and letters used to specify colors on the web.

Choose companion colors by their role: background, text, or decoration

Cassis ■#5A2D46 is a dark red-purple. When it covers a large background, use lighter lettering; when you use it for text or a button, pair it with a light background. These three companion colors serve different purposes:

• Ivory ■#FAF5ED: Use it for a broad background or for text placed over dark cassis. Its pale, slightly warm tone creates a strong difference in lightness against the deep purple.
• Pale rose ■#EBCBD6: Use it for a small panel containing the dates or product details. It belongs to a related pink-purple family but is much lighter, allowing sections to be grouped without introducing an unrelated hue.
• Champagne-gold-inspired ochre ■#D8B77B: Reserve this warm yellow-brown for short decorative lines and small shapes. A flat color cannot reproduce real metallic shine, but it can add a warm accent against cassis.

Rather than allocating equal space to all the colors, give one color most of the background, choose text colors for sufficient light-dark contrast, and keep the decorations secondary to the information.

Two banner layouts for a cassis baked-goods promotion

Option A: Introduce the products on a light background. Set the overall banner to ivory ■#FAF5ED and write the headline “Cassis & Baked Goods Fair” in cassis ■#5A2D46. This pair has a contrast ratio of approximately 10.19:1. A contrast ratio expresses the difference in relative brightness between text and its background. Supplementary details such as the promotion dates can use dark plum ■#342632, which has approximately 13.17:1 contrast against ivory.

Add pale rose ■#EBCBD6 as a small, softly rounded decoration or panel. However, it contrasts with ivory by only about 1.38:1, so don’t rely on the change in color alone to separate important information; use spacing and headings as well. For the sign-up button, use cassis ■#5A2D46 as its background and ivory ■#FAF5ED for the lettering, providing approximately 10.19:1 contrast.

Option B: Make cassis the dominant background. Fill the banner with cassis ■#5A2D46 and place the headline in ivory ■#FAF5ED for a contrast ratio of approximately 10.19:1. Put the promotion dates in a pale rose ■#EBCBD6 panel with dark plum ■#342632 text, which provides approximately 9.56:1 contrast. The pale rose panel also stands apart from the surrounding cassis by approximately 7.40:1.

Use champagne-gold-inspired ochre ■#D8B77B for a short decorative line against the cassis ■#5A2D46 background. Those colors contrast at approximately 5.78:1, but keep the line away from dense text and avoid repeating it excessively. For the sign-up button, an ivory ■#FAF5ED background with cassis ■#5A2D46 lettering provides approximately 10.19:1 contrast. This approach gives the ornament and the actionable button distinct jobs, even on a dark background.

Don’t automatically reuse decorative colors for essential text

Ochre ■#D8B77B and ivory ■#FAF5ED have a contrast ratio of only approximately 1.76:1. Avoid using the ochre for small text or as the only visual line conveying an important distinction on a light background. Even when cassis ■#5A2D46 text on ivory ■#FAF5ED passes a contrast check, a photograph or gradient behind the lettering can change the actual ratio. Recheck the specific area immediately behind the text.

WCAG 2.2, the Web Content Accessibility Guidelines, requires contrast ratios of at least 4.5:1 for ordinary text and 3:1 for large text at Level AA. Visual information needed to identify interactive controls or meaningful graphics may also need at least 3:1 against adjacent colors. Decorative lines that carry no information should be distinguished from lines that communicate meaning when evaluating accessibility.

HueRoll lets you enter a HEX code, adjust the color, and see the selected color’s contrast against white and black. It does not automatically compare arbitrary pairs of colors or determine AA compliance, so separately check the colors that actually touch in your finished banner.