Haizakura and Sumi-iro Color Schemes: How to Pair Pale Backgrounds with Dark Text

Haizakura is a pale cherry-blossom pink with a grayish cast, while sumi-iro is a near-black shade reminiscent of Japanese ink. On a website, one practical approach is to use haizakura for the soft background and sumi-iro for headings and body text. Using a pottery studio’s website as an example, this article shows how to combine backgrounds, text, and buttons in a product introduction and a care guide. Color-name definitions can vary across references, so we consistently use haizakura ■#E8D3D1 and sumi-iro ■#2F2725 as example swatches. HEX is a six-digit code of letters and numbers used to specify colors on the web.

Why use haizakura as the background and sumi-iro for text?

Haizakura ■#E8D3D1 is light, with subdued reddish tones. It can fill a broad area while leaving plenty of visual separation for dark text. Sumi-iro ■#2F2725 is close to black but has a slight warm cast, making it a possible companion to this particular haizakura swatch. Sumi-iro text against haizakura has a contrast ratio of approximately 10.20:1. A contrast ratio measures the difference in relative luminance between adjacent colors.

There is no need to make the body text a faint gray just because the headings are dark. Start by using sumi-iro for both, then distinguish headings through type size, weight, and spacing. If you add white ■#FFFFFF cards to the pale background, remember that white contrasts with haizakura by only about 1.43:1. The change in background color alone may not make the edges of those cards obvious.

Two palettes for a pottery studio website

Example 1: Group product information on haizakura. Make the product-listing introduction area haizakura ■#E8D3D1. Display a heading such as “Handcrafted Pottery” and a short introduction in sumi-iro ■#2F2725. The text-to-background contrast is approximately 10.20:1. Put details such as price, size, and material on white ■#FFFFFF cards. With sumi-iro ■#2F2725 body text, those cards provide approximately 14.61:1 contrast.

If the cards need an identifiable outline, add a muted gray-brown ■#866D6B border. The border has approximately 3.32:1 contrast against the outer haizakura ■#E8D3D1 and 4.76:1 against the inner white ■#FFFFFF. This makes the boundary more distinct between two light surfaces. For a “View Product” button, use a sumi-iro ■#2F2725 background and white ■#FFFFFF lettering. The text contrasts with the button at approximately 14.61:1, while the button contrasts with the surrounding haizakura ■#E8D3D1 at approximately 10.20:1.

Example 2: Use haizakura sparingly in a longer guide. For a “Caring for Your Pottery” page, use white ■#FFFFFF as the overall background and sumi-iro ■#2F2725 for the longer instructions, with approximately 14.61:1 contrast. Between sections on washing and storage, introduce a haizakura ■#E8D3D1 note panel. Place a heading such as “Microwave Use Precautions” and its explanation in sumi-iro ■#2F2725. Inside the panel the contrast is approximately 10.20:1. Make the precaution explicit in words rather than communicating its importance through background color alone.

Watch out for white text and subtle card boundaries

White ■#FFFFFF lettering on a haizakura ■#E8D3D1 background has a contrast ratio of only approximately 1.43:1. Although the combination may look gentle, it does not make suitable readable text. The gray-brown ■#866D6B used for card borders also has just 3.32:1 contrast against haizakura. Do not reuse it for small, normal-size explanatory text there; use sumi-iro ■#2F2725 instead.

WCAG 2.2 (Web Content Accessibility Guidelines) requires at least 4.5:1 contrast for normal-size text and 3:1 for large text at Level AA. Non-text cues required to identify controls or their states, such as certain input borders, may need 3:1 against adjacent colors. That requirement does not automatically apply to every purely decorative border. Check the card and note-panel boundaries on a phone as well.

HueRoll lets you enter HEX colors and view the contrast of a selected color against white and black. It does not automatically compare any two arbitrary colors or assess AA compliance, so separately check the real combinations of backgrounds, text, borders, and buttons that appear in your design.