Yellow: 50 shades, names and colour codes

The CSS keyword yellow means #FFFF00. White text on this saturated yellow reaches just 1.07:1 contrast; black reaches 19.56:1. Being conspicuous is not the same as being readable.

For a less vivid notice, the existing palette’s ink blue #26364A on ochre #C79832 gives 4.66:1. White on that ochre gives only 2.64:1. Set the text and background together:

.yellow-notice {
  background-color: #C79832;
  color: #26364A;
}

Write the message explicitly, such as “Check the delivery date”, rather than expecting yellow to mean warning. Add a descriptive heading or icon with an accompanying label when useful. Colour alone must not carry the instruction; see WCAG guidance on using colour.

The ink/ochre pair clears the 4.5:1 normal-text minimum, but with little margin: transparency or lighter text can change the result. Ratios are rounded from opaque sRGB calculations. For a button, also check its boundary against the surrounding page and preserve visible focus; a text-contrast pass does not certify the whole control.

Yellow often suggests light and warmth. Lemon yellow appears brighter than ochre, whose brown component softens its presence. Hue alone does not determine text readability.

Yellow may arrive as a bright spark or a softer glow; begin by choosing between lemon, soft yellow and ochre. A very light yellow can serve as a background; a saturated yellow readily becomes an accent. Its companion should give the composition structure rather than simply add another bright colour.

Yellow and deep blue: introduce a dark anchor

Deep blue can give ochre or light yellow a visual anchor, like a dark horizon beneath the last light. For a desk corner, try a blue background and an ochre lamp, or reverse the balance with light walls and a small blue cabinet. On a cover, give yellow a simple area and place the title on a surface with verified contrast.

Yellow and grey: avoid a flat combination

Against medium grey, bright yellow is easier to control as a small glint than as an equally important background. Add a lightness difference as well: charcoal, pearl grey and yellow need a different balance from two mid-tones. In a room, woven material or wood can add interest without introducing more colours.

Yellow and green: from lemon to olive

Straw yellow with olive has a quieter, more muted character than the sharper meeting of lemon and vivid green. The former can sit alongside linen and wood; the latter suits a more assertive graphic direction. If the colours visually merge, add a light or dark separation instead of increasing their saturation further.

A yellow block can carry dark lettering and become a useful orientation point. The reverse needs more care: pale-yellow letters on white may lack contrast. For a button, test its boundary against the page and its label against its own background separately. A noticeable element is not necessarily a readable one.

On a mainly ivory surface, use ink to establish structure and ochre to highlight one area. A starting balance of 70% ivory, 20% ink and 10% ochre makes the different roles easy to assess.

Before painting, place a sample beside the floor, curtains and a white surface. Observe it at different times and under the lamps you will actually use. Rather than picking the most appealing yellow in isolation, choose the one that works with the materials already there.