What Text Color Is Readable on a Yellow Background? How to Think About Color Schemes for Web Design

A yellow background can give a website an energetic, welcoming appearance. Yet white lettering on yellow may make event dates and instructions harder to read rather than more prominent. Because different yellows can have very different brightness levels, text colors should be chosen for the actual background, not by a fixed rule. This article uses a community craft workshop registration page to compare readable lettering, links, and buttons.

Start with dark text on bright yellow instead of assuming white will work

A contrast ratio expresses the difference in relative brightness between text and its background. Under WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for making web content accessible), Level AA, one level of accessibility conformance, normally requires at least 4.5:1 contrast for standard-size text and 3:1 for qualifying large text. Check these numbers separately from your impression of how colorful a pairing looks.

For example, white text ■#FFFFFF against bright yellow ■#FFE45C has approximately 1.27:1 contrast, not even enough for the large-text threshold. Switching to dark charcoal ■#27323A raises the ratio to approximately 10.29:1, above the normal-text requirement. Muted gray lettering ■#9E9069 on the same yellow reaches only about 2.48:1. Medium-bright text can be problematic, not just white.

There is an important exception to any blanket rule that yellow always needs black lettering. If the background is a considerably darker ochre ■#9A5D06, white text ■#FFFFFF achieves approximately 5.33:1 contrast. The result depends on how bright the particular yellow is. The color samples here are shown with six-digit HEX codes (hexadecimal values that describe color components).

Choose separate colors for workshop details, links, and actions

For the craft workshop’s main registration banner, use bright yellow ■#FFE45C and give both the workshop title and event date dark charcoal lettering ■#27323A. The ratio of approximately 10.29:1 means this pair exceeds the normal-text requirement, not just the large-heading minimum. The yellow can occupy the prominent banner without forcing the words themselves to be bright.

Place the materials list and meeting location on a pale-yellow information card ■#FFF4C2 with charcoal body text ■#27323A. Their contrast ratio is approximately 11.83:1. However, the card’s pale yellow ■#FFF4C2 differs from the surrounding off-white page background ■#FAF8F0 by only about 1.04:1. If its boundary is important for identifying the card, add a dark ochre border ■#806000. The border contrasts with the card’s pale background ■#FFF4C2 by approximately 5.28:1.

For an inline link such as “View the materials list,” choose deep blue ■#204B8A, which has approximately 6.78:1 contrast against the bright yellow ■#FFE45C. Keep an underline visible even before interaction so the link is not identified by color alone. A “Register for the Workshop” button could use a blue-gray background ■#284B63 with white text ■#FFFFFF; the label-to-button ratio is approximately 9.22:1. The blue-gray button ■#284B63 also contrasts with the surrounding yellow ■#FFE45C by about 7.25:1. Use a clear button shape and sufficient spacing as additional cues.

Check small text and changed background or interaction states

Do not communicate information such as “Registration Closing Soon” through yellow coloring alone: write the message explicitly. If text becomes smaller on mobile screens or the button changes color when pressed, check the text-background ratio in each state. Meaningful outlines of interactive controls also need to stand out from their adjacent colors. WCAG 2.2’s non-text contrast requirement generally calls for at least 3:1 contrast for visual information needed to identify applicable controls or their states.

How yellow appears also depends on screen brightness and nearby colors. Instead of choosing a pair that barely meets a numeric threshold, leave some margin and check thin lettering and smaller descriptions on the finished page. If white ■#FFFFFF is used with dark ochre ■#9A5D06, remember that this does not mean the same white lettering works on the brighter yellow ■#FFE45C.

HueRoll displays selected colors as HEX codes and can check their contrast against white or black. It does not compare arbitrary pairs of colors or automatically judge WCAG AA or AAA conformance. Calculate the yellow-and-dark-text combinations that will actually be adjacent on the page separately, and inspect the finished display too.