Gunjo Blue and Yamabuki Yellow Color Schemes: Tips for Choosing Which Color to Emphasize

When combining gunjo blue and yamabuki yellow in a banner, first decide which piece of information matters most. Giving both colors equal emphasis can make it unclear whether viewers should notice the headline, event date, or registration button first. A clearer approach is to use blue for the main background or heading and concentrate yellow in one important place. This article compares two layouts for an imaginary washi-paper printmaking workshop at a local gallery: one emphasizes registration and the other emphasizes the date.

Use gunjo blue as the base and give yamabuki yellow a specific role

Our reference swatch for gunjo-iro (gunjo blue) is ■#4C6CB3, while yamabuki-iro (yamabuki yellow) is ■#F8B500. Gunjo is a Japanese blue color name associated with mineral pigments used in traditional painting. Yamabuki yellow is a warm, slightly orange-yellow named for the flowers of the Japanese kerria shrub. Color-name references may use different swatches, so these are examples rather than universal values. HEX is a six-digit hexadecimal code used to specify colors on the web.

The contrast ratio between gunjo blue ■#4C6CB3 and yamabuki yellow ■#F8B500 is approximately 2.83:1. A contrast ratio measures the difference in relative brightness between adjacent colors. Although the hues are very different, yellow lettering directly on this blue does not reach even the 3:1 requirement for qualifying large text.

Instead, white ■#FFFFFF text on gunjo blue ■#4C6CB3 provides about 5.12:1 contrast, while deep navy ■#101C32 text on yamabuki yellow ■#F8B500 provides about 9.40:1. To highlight something in yellow, consider its background, border, and surrounding space rather than changing the lettering to yellow alone.

Choose whether the workshop registration or date gets the yellow accent

Option 1: Emphasize the registration button. Fill the banner with gunjo blue ■#4C6CB3 and display the heading “Washi Printmaking Workshop,” event date, and venue in white ■#FFFFFF. The text-to-background contrast ratio is about 5.12:1. Use yamabuki yellow ■#F8B500 only for the “Register for the Workshop” button, with deep navy ■#101C32 lettering at about 9.40:1.

The yellow button itself contrasts with the blue surroundings at only about 2.83:1. If the button needs a clearly distinguishable outline, give it a deep navy ■#101C32 border around 2px wide. That border contrasts about 3.32:1 against the outer gunjo blue ■#4C6CB3 and 9.40:1 against the yellow ■#F8B500 fill. By reserving yellow for registration, the headline and date do not compete for the same accent.

Option 2: Emphasize the event date. Switch the overall background to white ■#FFFFFF, use gunjo blue ■#4C6CB3 for the heading, and deep navy ■#101C32 for the description. Contrast against white is about 5.12:1 for the heading and 17.02:1 for the body text. Place “November Workshop” or the actual date in a small yamabuki yellow ■#F8B500 strip with deep navy ■#101C32 text, which has a ratio of about 9.40:1.

The yellow strip differs from the surrounding white ■#FFFFFF by only about 1.81:1. If its outline is needed to separate information, add a deep navy ■#101C32 border, which contrasts about 17.02:1 against white. Keep the registration button gunjo blue ■#4C6CB3 with white ■#FFFFFF lettering at about 5.12:1. This layout gives yellow to the date while leaving the action in blue.

Check text and button boundaries without relying on color alone

White ■#FFFFFF text on yamabuki yellow ■#F8B500 contrasts at only about 1.81:1. Yellow ■#F8B500 text on gunjo blue ■#4C6CB3 reaches only about 2.83:1. Avoid both for ordinary headings and body text. Likewise, do not rely on color alone to distinguish “Registration Open” from “Registration Closed”; include words and another visible cue.

At Level AA, WCAG 2.2 (the Web Content Accessibility Guidelines) generally calls for at least 4.5:1 contrast for normal text and 3:1 for qualifying large text. Essential non-text indicators, such as some control borders and state cues, may also need 3:1 against adjacent colors. Very thin borders can remain hard to see even when the numerical ratio passes, so inspect their width and real display.

HueRoll lets you enter HEX values, adjust colors, and check the selected color’s contrast against white or black. It cannot compare arbitrary color pairs or automatically determine AA or AAA compliance. Check the actual combination of background, text, button, and border colors separately before publishing.