What Text Color Works on a Yamabuki Yellow Button? Comparing White and Black to Choose the Right Color

Should text on a Yamabuki yellow button be white or black? With a bright yellow like this, white lettering is too close to the background in brightness, while black provides a strong difference. However, readable button text does not automatically make the button itself easy to identify against a light page. This guide compares the exact contrast ratios for white, black, and dark brown text, then explains how to adjust the button’s surroundings.

Black works better than white on a Yamabuki yellow button

The Japanese color reference Wairo Daijiten lists ■#F8B500 as one example of Yamabuki yellow. A color name does not imply that every design uses exactly the same numeric value, so we will use this particular shade throughout the comparison. HEX is a web color notation using a hash sign and six hexadecimal digits.

Keeping Yamabuki yellow ■#F8B500 as the button fill, the following table compares three text colors. A contrast ratio measures the difference in relative brightness between the lettering and the background.

Black ■#000000 against Yamabuki yellow ■#F8B500 has a contrast ratio of about 11.60:1, much higher than white ■#FFFFFF at only 1.81:1. Dark brown ■#302817 is another option at about 8.05:1 if you want a slightly softer alternative to pure black. Making the white text larger or bolder still does not provide enough contrast for this particular pairing.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal-size text generally needs at least 4.5:1 contrast, while large text needs at least 3:1. For a button using this Yamabuki yellow, black and the tested dark brown are suitable choices for a normal-size label.

Adjust the button outline for light pages and dark header sections

Imagine a website for an autumn craft fair with a single “Reserve a visit” action. Keep the button itself Yamabuki yellow, and change its spacing or boundary depending on the surrounding area rather than automatically changing the text to white.

• On a white registration section: Use white ■#FFFFFF around the Yamabuki yellow ■#F8B500 button and black ■#000000 for the label. The label and fill contrast at about 11.60:1, but the yellow fill and the surrounding white differ by only about 1.81:1. If a distinct edge is needed, add a dark ochre ■#5D4100 border. It contrasts at about 9.45:1 with white and about 5.22:1 with the yellow.
• On a warm off-white information section: The background ■#FFF9EF differs from Yamabuki yellow ■#F8B500 by only about 1.73:1. Keep the black ■#000000 button lettering, and use the same dark ochre ■#5D4100 outline when a visible boundary is needed. This outline contrasts at about 9.02:1 with off-white. Dark brown ■#302817 explanatory text on the off-white section has about 13.91:1 contrast.
• Within a dark header section: Make the surrounding panel dark navy ■#1F2937 and place white ■#FFFFFF text in the header. That header pairing contrasts at about 14.68:1. The Yamabuki yellow ■#F8B500 button differs from the navy panel by about 8.11:1, and its label can remain black ■#000000. A dark surrounding area does not make white lettering appropriate inside the yellow button.

The same yellow button can look less distinct on white and much more distinct on navy. Always examine the text against the inside of the button and the button surface against its surroundings as separate pairs. The surrounding section alone should not determine the color of the label.

Review button boundaries and interaction states separately from text

Use an action label such as “Reserve a visit,” and leave enough padding around the lettering. If you add an outline, make sure it is visible at its rendered thickness. Under WCAG’s non-text contrast guidance, where a visual boundary is essential for recognizing a control, that necessary visual cue generally needs at least 3:1 contrast against adjacent colors. However, a 3:1 border is not automatically required for every labeled button when its text already identifies the control.

Hover and keyboard-focus states should also be recognizable without relying on a barely perceptible color change. On mobile, check the size of the button label, the spacing from nearby controls, and whether the full clickable area is clear.

HueRoll lets you enter and adjust the HEX code for Yamabuki yellow and compare a selected color against white or black. It does not compare arbitrary custom color pairs or automatically report WCAG compliance. The dark brown, ochre, and surrounding background combinations here were calculated separately.