How Should You Use Kikyo-iro in a Banner? Matching Text and Background Colors

Kikyo-iro, often called bellflower purple, is a blue-leaning shade of violet. The text color that works on a banner filled with this purple is not necessarily the one to use when purple appears only in a headline. Here are two practical ways to arrange the background, text, and action button for an exhibition announcement or a workshop promotion.

Decide whether Kikyo-iro belongs in the background or the headline

A commonly used color code for Kikyo-iro is ■#5654A2. Its name comes from the bellflower, but a traditional color name does not uniquely determine a screen color. We will use ■#5654A2 as the reference here. HEX means hexadecimal: it is a way to specify web colors with a hash sign followed by letters and numbers. The examples here use six-digit HEX codes.

If Kikyo-iro covers a large background area, choose light-colored lettering rather than dark text. If you instead use the purple for a headline on a light background, you can keep more of the banner bright while giving the title a distinct color. Decide where the purple will appear before choosing the body text and button colors.

Two text-and-background combinations for banners

Example 1: An exhibition announcement with a purple background

For a banner headed “Autumn Art Exhibition,” fill the background with Kikyo-iro ■#5654A2 and use warm off-white ■#F8F6F1 for both the headline and the date. Make the headline bolder than the smaller date so that the typography communicates their different importance. Fill the information button with off-white ■#F8F6F1 and set its lettering in dark gray ■#24263A. The pale button stands apart from the purple background, giving visitors a clear “View Details” action.

Example 2: A workshop banner with a light background

For a text-rich promotion such as “Color Basics for Beginners,” use warm off-white ■#F8F6F1 as the background, Kikyo-iro ■#5654A2 for the headline, and dark gray ■#24263A for the date, location, and notes. Fill the registration button with Kikyo-iro ■#5654A2 and use off-white ■#F8F6F1 for its label. Purple now connects the headline and action button while their roles remain distinct. Leave sufficient space around the supporting copy instead of outlining every section in purple.

Check text contrast and the background beneath it

A contrast ratio measures the difference in brightness between text and its background. Under the Web Content Accessibility Guidelines (WCAG) 2.2, Level AA requires at least 4.5:1 for normal-sized text and 3:1 for large text. The ratio between Kikyo-iro ■#5654A2 and off-white ■#F8F6F1 is about 6.10:1; dark gray ■#24263A and off-white ■#F8F6F1 reach about 13.76:1. Both combinations meet Level AA for normal-sized text.

But dark gray ■#24263A placed directly on Kikyo-iro ■#5654A2 has a ratio of only about 2.25:1. That falls short of Level AA for both normal and large text. Changing the text on off-white ■#F8F6F1 to a lighter gray ■#77768F drops its ratio to about 4.07:1, below the threshold for normal text. Check smaller details such as dates and notes, not just the main headline.

When text sits over a photograph or gradient, the background varies across the letters, so a ratio measured between two solid colors is not enough. One option is to place a solid-color panel behind the text and check the actual adjacent colors. HueRoll shows contrast between a selected color and white or black, but combinations of arbitrary colors, including Kikyo-iro and this off-white, need to be calculated separately.