Japanese-Style Banners with Akane Red and Kinari Off-White: Color Proportions and Text Placement

Akane-iro is a red associated with dye made from the roots of the madder plant. Kinari-iro is a slightly warm off-white reminiscent of unbleached fabric. When creating a Japanese-style banner with these colors, dividing the design into equal halves is not necessarily the best choice. This article uses akane red ■#B7282E and kinari off-white ■#FBFAF5 to explain how to balance the area covered by each color and where to position the text. HEX is a six-digit code of numbers and letters used to specify web colors. Traditional color names do not always correspond to one identical swatch, so these examples consistently use the stated values.

Decide how much space each color gets based on the text

Akane red ■#B7282E is a deep, conspicuous red. If it fills much of the banner, it becomes the main visual element. Kinari off-white ■#FBFAF5 is very light and low in saturation, which makes it a useful background for multiple details such as dates and locations. Start by deciding whether readers should notice the event title or practical details first.

For an information-heavy banner, one possible starting point is approximately 80% kinari off-white and 20% akane red, using the red mainly for a narrow band or action area. For a short, emphatic announcement, another option is roughly 40% akane red across the top and 60% kinari off-white below. These are examples, not fixed design rules. Adjust the proportions for the amount of text and the presence of photography.

Two layouts for a Japanese washi-paper exhibition banner

Option A: A wide banner led by kinari off-white. Make approximately 80% of the background kinari off-white ■#FBFAF5. On the left, arrange the headline “Washi and Handmade Crafts Exhibition,” followed by the date, venue, and a short description. Use dark charcoal ■#2D2926 for both headline and details. It has an approximately 13.79:1 contrast ratio against kinari off-white. A contrast ratio measures the difference in relative brightness between neighboring colors such as text and its background.

Make the remaining 20% a vertical akane-red ■#B7282E band along the right edge. Leave breathing room in the band instead of filling it with small text. If the banner needs a “View Details” button, place an akane-red ■#B7282E button on the kinari area and give it kinari off-white ■#FBFAF5 lettering. The text against the button and the button against its surroundings each have approximately 5.99:1 contrast.

Option B: A prominent red heading area. Fill roughly the top 40% with akane red ■#B7282E, and put only the large exhibition title in kinari off-white ■#FBFAF5, centered within the red section. The text-to-background contrast ratio is approximately 5.99:1. Use kinari off-white ■#FBFAF5 for the lower 60% and place the date, venue, and “Explore the Exhibition” details there in dark charcoal ■#2D2926. The lower text has approximately 13.79:1 contrast.

Avoid positioning letters across the border between the two background colors. Keep each heading and group of details entirely within its own solid-colored area. This approach changes not just the area of each color but also the roles of the sections: a short message above and information to read below.

Check text placement and narrow dividing lines

Dark charcoal ■#2D2926 on akane red ■#B7282E has a contrast ratio of only about 2.30:1, which is insufficient for ordinary-size text. On red, switch to kinari off-white ■#FBFAF5 lettering instead. Conversely, white ■#FFFFFF against kinari off-white ■#FBFAF5 differs by only about 1.05:1, so white text on the pale area is nearly indistinguishable.

WCAG 2.2, the Web Content Accessibility Guidelines, requires at least 4.5:1 contrast for normal-size text and 3:1 for large text at Level AA. If a dividing line is needed to distinguish information on a kinari off-white ■#FBFAF5 background, a muted gray-brown ■#74695F line contrasts at approximately 5.12:1. A purely decorative line, however, does not automatically have to meet the 3:1 non-text requirement. On a phone, where a vertical strip may become too narrow, move the strip above or below the content instead of squeezing words into it.

HueRoll lets you enter HEX codes and check a selected color’s contrast against white and black. It does not automatically compare any two arbitrary colors or decide AA compliance, so verify each actual text, button, and background combination separately.