Japanese-Style Color Schemes with Bengara Red and Gofun White: Pairing Headings and Backgrounds

Bengara red and gofun white are two Japanese traditional color names that suggest a deep reddish brown and an almost-white shade. Using gofun white as a large background with bengara headings creates a different emphasis from placing gofun-colored lettering on a bengara background. This article uses a website for an exhibition of Japanese hand-bound books to show how the two colors can work in headings, body text, information cards, and registration buttons.

Why use bengara for headings and gofun white for backgrounds?

Bengara-iro is a muted reddish-brown color named after bengara, a red pigment made mainly from iron oxide. Our reference swatch is bengara red ■#8F2D12. Gofun-iro refers to an off-white color with a faint yellow cast, associated with gofun, the white pigment made from shells such as oyster shells. We use gofun white ■#FFFFFC. Neither traditional color name is tied to a single universal digital value. HEX is a six-character hexadecimal code for specifying colors on the web; sharing it alongside the name prevents ambiguity.

The contrast ratio between the selected bengara red ■#8F2D12 and gofun white ■#FFFFFC is approximately 8.21:1. A contrast ratio measures the difference in relative brightness between adjacent colors. That number is the same whichever one serves as the background and whichever serves as the text. But changing which color occupies the larger area can shift the visual emphasis and affect how surrounding photographs appear.

Swap headings and backgrounds on a Japanese book exhibition page

Example 1: Use gofun white as the main background. Set the overall exhibition page on gofun white ■#FFFFFC, with a heading such as “An Exhibition of Hand-Bound Books” in bengara red ■#8F2D12. The contrast ratio is about 8.21:1. For explanations about the venue and the exhibits, use a dark ink-brown ■#302B29, which contrasts approximately 13.94:1 with the gofun background.

Place the dates and address in a pale paper-colored ■#F4EEE4 information card with the same ink-brown ■#302B29 text, giving about 12.11:1. For a “Reserve a Visit” button on the gofun white ■#FFFFFC section, use a bengara red ■#8F2D12 fill with gofun white ■#FFFFFC lettering. Both the lettering-to-button ratio and the button-to-surrounding-background ratio are about 8.21:1. The pale background remains dominant, while the reddish brown draws attention to the heading and the action.

Example 2: Use bengara red for the opening banner. On the same exhibition page, make a wide banner at the top bengara red ■#8F2D12, with a heading and short introduction in gofun white ■#FFFFFC. The text-to-background contrast is approximately 8.21:1. Inside that banner, a “Browse the Exhibits” button can use gofun white ■#FFFFFC as its fill and bengara red ■#8F2D12 for its lettering. The contrast is about 8.21:1 for the lettering against the button and for the button against the surrounding banner. Below it, return to a gofun white ■#FFFFFC page background, bengara red ■#8F2D12 section headings, and ink-brown ■#302B29 body text.

Check subtle card boundaries and smaller text

Gofun white ■#FFFFFC and the pale paper color ■#F4EEE4 have a contrast ratio of only about 1.15:1. If the information card needs a clear outline, add a muted gray-brown ■#7C6E62 border. The border contrasts about 4.92:1 against gofun white ■#FFFFFC and 4.27:1 against the paper background ■#F4EEE4. Very thin lines may still appear faint on real screens, so also consider a border around 2px thick and adequate spacing.

Under Level AA of WCAG 2.2 (the Web Content Accessibility Guidelines), normal text generally requires a contrast ratio of at least 4.5:1, while qualifying large text requires at least 3:1. Essential non-text cues, such as boundaries that identify interactive controls, may also need 3:1 against adjacent colors. Do not distinguish exhibition dates or booking states through color alone; make the meaning clear in the labels too.

HueRoll lets you enter and adjust HEX colors and check a selected color’s contrast against white or black. It cannot compare any two arbitrary colors or automatically determine AA compliance. Check the actual combinations of text, backgrounds, buttons, and borders separately before publishing.