Egg Yellow and Light Blue Color Combinations: How to Use Two Pale Colors Differently

Egg yellow and light blue are both bright, gentle colors, but placing large areas of them side by side can make the boundaries between pieces of information difficult to see. A useful approach is to choose one as the main background and use sufficiently dark colors for text and buttons. Using a parent-and-child craft workshop website, this article compares two layouts that give the pale colors different roles.

Give egg yellow and light blue different areas and purposes

In Japanese, tamago-iro (egg yellow) is a warm, slightly reddish yellow associated with egg yolks. We use egg yellow ■#FCD475 as one reference swatch. For light blue, we use the example shade ■#CAEAF2. Neither everyday color name has just one universal HEX code. HEX is a way to specify a web color with six hexadecimal characters.

Although one shade is yellow and the other is blue, their contrast ratio is only about 1.12:1. A contrast ratio expresses the difference in relative brightness between two colors. Simply alternating these pale backgrounds will not necessarily make card edges or actionable areas clear.

For a workshop announcement, egg yellow can fill the introductory section while light blue marks practical details such as the date and materials to bring. If light blue fills the top of the page instead, use egg yellow sparingly for a small notice reading “Advance booking required.” In either case, keeping headings and body text in the same deep navy ■#26394A avoids introducing more text colors when the backgrounds change.

Two layouts for a family craft workshop announcement

Example 1: Make egg yellow the main background. Use egg yellow ■#FCD475 behind the workshop name and a short description in navy ■#26394A. The text-to-background contrast ratio is about 8.39:1. Place the date and admission fee in a light blue ■#CAEAF2 card, retaining navy ■#26394A for its text. That pairing has a ratio of about 9.38:1.

To keep the card from blending into its egg-yellow surroundings, give it a blue-gray ■#657681 border. The border contrasts about 3.32:1 with the surrounding egg yellow ■#FCD475 and 3.71:1 with the card’s light blue ■#CAEAF2. Set the “Register” button on the egg-yellow section with a navy ■#26394A fill and white ■#FFFFFF lettering. The button text and fill contrast at about 11.89:1.

Example 2: Make light blue the main background. For a summer craft workshop, use light blue ■#CAEAF2 behind the title and introductory text in navy ■#26394A. Their contrast ratio is about 9.38:1. Reserve egg yellow ■#FCD475 for a narrow “Advance booking required” notice, with navy ■#26394A text at about 8.39:1. A blue-gray ■#657681 border helps separate the two pale colors. Put the registration button on the blue background, again using navy ■#26394A for the button and white ■#FFFFFF for its text.

Watch out for white text and faint boundaries

Egg yellow ■#FCD475 contrasts with white ■#FFFFFF at only about 1.42:1, while light blue ■#CAEAF2 contrasts with white ■#FFFFFF at approximately 1.27:1. Neither is suitable as a background for ordinary white text. Similarly, a white card on the light blue background differs by only about 1.27:1; where a clear boundary is needed, add spacing or a blue-gray ■#657681 border. That border contrasts about 4.71:1 with white ■#FFFFFF.

WCAG 2.2, the Web Content Accessibility Guidelines, generally requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for qualifying large text at Level AA. Essential visual boundaries of user interface components can also require 3:1 against adjacent colors. Do not communicate “registration open” versus “registration closed” through color alone; use explicit labels or another visual cue.

HueRoll lets you enter HEX values, adjust colors, and check a selected color’s contrast with white or black. It does not compare arbitrary color pairs or automatically determine AA compliance. Check the actual background, text, button, and border combinations separately before publishing.