How to Combine Canary Yellow and Navy Blue: Color Scheme Examples for Buttons and Backgrounds
Canary yellow and navy blue combine a bright yellow with a deep blue. The two colors have strong light–dark contrast, but a page feels different depending on whether yellow fills the background or the button. Here are two practical combinations—an event page hero section and an announcement panel on a website—with specific guidance for text, backgrounds, and buttons.
Choose which color takes up more space before styling the button
Kanaria-iro (金糸雀色, canary yellow) is a Japanese color name associated with the canary, and Kon-iro (紺色) is a traditional deep blue comparable to navy. The Wairo Daijiten color reference lists canary yellow as #EBD842 and Kon-iro as #223A70. A HEX code is a hexadecimal way to specify a web color, helping you use the exact same shades throughout your design rather than relying on a name alone.
These two shades have a contrast ratio—a measurement of how far apart their relative lightness values are—of approximately 7.57:1. That creates options in both directions: a yellow button on a navy background or a navy button within a yellow panel. However, canary yellow #EBD842 and white #FFFFFF contrast at only about 1.45:1. Put dark navy lettering, not white lettering, on the yellow button.
Two color schemes with the background and button reversed
An event page: a yellow sign-up button on navy
For the hero section of an event page, use Kon-iro navy #223A70 across the large background and warm off-white #F8F7F2 for the headline. The headline-to-background contrast is about 10.27:1. Keep the date and venue in short supporting lines, then reserve canary yellow #EBD842 for the main sign-up button. Using yellow in this limited area helps the action remain distinct within the dark blue section.
Use navy #223A70 for the button lettering. Both the text-to-yellow-button contrast and the button-to-surrounding-navy contrast are about 7.57:1. Give the button some breathing room and use an action label such as “Sign up.” If yellow also appears on many decorative elements, those details can compete with the call to action, so consider reserving the yellow primarily for registration.
A service website: a navy button within a yellow announcement panel
Keep the ordinary page background off-white #F8F7F2 and body text dark gray #26343C, which contrast at about 11.95:1. Use canary yellow #EBD842 only for a horizontal panel announcing a limited-time offer or an important update. Set its headline and description in navy #223A70. The text has approximately 7.57:1 contrast against the yellow panel.
For a “Learn more” button, use navy #223A70 as the fill and white #FFFFFF as the lettering. Text on navy reaches about 11.01:1, while the button against the yellow panel reaches about 7.57:1. Yellow and the neighboring off-white page, however, contrast at only about 1.36:1. If the announcement needs a clearly identifiable boundary, add a navy outline, an explicit heading, or sufficient spacing rather than depending on those two pale surfaces alone.
Check text, button boundaries, and interaction states separately
Reversing a color scheme does not mean swapping every text and background color indiscriminately. Assess each pair: light text against navy and dark text against canary yellow. Do not communicate an active or selected state through color alone. Use a label or shape where needed, and ensure the keyboard focus indicator can be seen against the colors next to it.
Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text needs at least 4.5:1 contrast and large text at least 3:1. Visual information essential to identifying a user interface component can also need 3:1 against adjacent colors. HueRoll lets you enter HEX values, explore related palettes, and check the selected color against white or black. It cannot calculate arbitrary two-color contrast ratios or automatically determine AA or AAA compliance, so verify the actual combinations in the finished page with a separate contrast check.