Color Schemes Using Yanagi Green as a Background: What Colors Should Text and Buttons Be?

When using Yanagi-iro, a soft Japanese willow green, as a website background, dark charcoal is a good starting point for text. For the main action button, try a deep green fill with white lettering. Because this yellow-green background is relatively light, white text or pale buttons alone may blend into it. The two examples below show how to choose text and button colors for a gardening workshop registration area and a plant guide heading.

Start with dark text on a Yanagi-green background

Yanagi-iro is a Japanese color name inspired by willow leaves and generally refers to a soft yellowish green. Wairo Daijiten lists ■#A8C97F as one example, while I-IRO gives ■#9EAC77. HEX is a web color notation consisting of a hash sign followed by six hexadecimal digits. Because a color name does not determine one universal code, the examples below use the Wairo Daijiten value ■#A8C97F as the reference background.

White ■#FFFFFF text against this Yanagi-green ■#A8C97F background has a contrast ratio of approximately 1.85:1. Dark charcoal ■#243029, by contrast, reaches about 7.40:1. A contrast ratio measures the difference in relative luminance between text and its background. Keeping both the heading and supporting text in a dark color makes their roles easier to organize.

Two palettes for a registration button and a secondary button

Example A: a gardening workshop registration panel.Fill the announcement area with Yanagi green ■#A8C97F and set the “Repotting Workshop” heading, event date, and participation details in charcoal ■#243029. Make the main “Register” button deep green ■#204C3D with white ■#FFFFFF lettering. Deep green differs from the Yanagi-green background by about 5.24:1, and white text on the deep-green button has about 9.71:1 contrast. This creates a clear difference for both the button surface and its label.

Example B: a category header in a plant guide.Place plant names and a short introduction in charcoal ■#243029 on a Yanagi-green ■#A8C97F heading strip. Make the secondary “Browse All Plants” button off-white ■#FCF9F3, with charcoal ■#243029 text and a charcoal outline. The off-white button fill and Yanagi-green background differ by only about 1.76:1, so the fill alone creates a weak edge. Adding the outline makes the boundary more distinct: charcoal against Yanagi green reaches about 7.40:1, and the charcoal button text against off-white reaches about 13.06:1. This marks the secondary action without giving it the same visual weight as the primary button.

Check white text, muted captions, and interaction states

A muted green ■#526D49 used for small explanatory text on Yanagi green ■#A8C97F has only about 3.11:1 contrast. That is not enough for ordinary-sized text, so dark charcoal ■#243029 is a safer choice for descriptions and notes as well. At Level AA, WCAG (Web Content Accessibility Guidelines) 2.2 generally requires at least 4.5:1 for normal-sized text and 3:1 for large text. Visual information necessary to identify a user interface component or its state generally requires at least 3:1 against adjacent colors.

On mobile screens, check that the button label does not wrap awkwardly. Make keyboard focus visible with an outline or another distinct cue, rather than relying on color alone. If several buttons appear together, give the main and secondary actions different treatments instead of making every button deep green.

HueRoll supports adjusting colors through HEX input and checking the selected color against white or black. It does not compare arbitrary pairs of colors or automatically report WCAG pass/fail results. Check the actual text, button, border, and background combinations separately in the finished layout.