What Color Should You Add to Gray and Yellow? How to Choose an Accent Color for Presentations

If a presentation already uses gray and yellow, deep teal is a useful candidate for a third color. You can assign gray to ordinary information, yellow to short notes that deserve attention, and teal to the main finding or an important data point. Using all three across equally large areas, however, can make a slide difficult to scan. This example uses a monthly performance presentation to show how to choose an accent and control where it appears.

Add deep teal as the third color and give yellow a separate role

Try muted gray ■#66727B for standard data, pale yellow ■#FFF1BB for notes, and deep teal ■#1F6071 for the result you want to emphasize. Yellow is a bright, warm hue while the teal is darker and cooler, so giving them different jobs creates contrast without requiring a large number of vivid colors. The best addition depends on the presentation and any existing brand palette; deep teal is a practical example rather than a universal rule.

HEX is a way to specify a screen color using a hash sign followed by six hexadecimal digits. On white ■#FFFFFF, deep teal ■#1F6071 text has a contrast ratio of about 7.07:1. A contrast ratio describes the difference in relative brightness between two colors. Charcoal ■#303841 lettering against white has a ratio of about 11.88:1, making it a good choice for the main body of the presentation.

Pale yellow ■#FFF1BB differs from white ■#FFFFFF by only about 1.13:1. Instead of making it the sole visual cue for a crucial chart bar, use yellow behind a labeled takeaway. Give the highlighted data point to deep teal ■#1F6071, which contrasts with white at about 7.07:1.

Using the three colors in a monthly report deck

Imagine a presentation on the results of a fictional website-improvement project. Use the same meanings for the colors on the title slide, results comparison, and next-steps slide, rather than changing their roles on every page.

• Title and summary: Keep the background white ■#FFFFFF with a charcoal ■#303841 title. Use dark gray ■#535E69 for the date and supporting information; it has about 6.62:1 contrast against white. Place one sentence summarizing the result on a pale yellow ■#FFF1BB strip with charcoal ■#303841 text. The text contrasts with the yellow at about 10.49:1.
• Comparison chart: Use white ■#FFFFFF behind the chart, gray ■#66727B for ordinary bars, and deep teal ■#1F6071 for the specific result that matters most. The bars contrast against white at about 4.93:1 and 7.07:1 respectively. Add data values and category names directly to the chart so people can tell the series apart without relying on color alone.
• Issues and next steps: Collect the issue description on a pale yellow ■#FFF1BB panel, written in charcoal ■#303841. For the main conclusion, use a deep teal ■#1F6071 panel with white ■#FFFFFF lettering; this pair has about 7.07:1 contrast. Avoid repeating equally prominent yellow and teal headers throughout the entire deck.

Keeping these roles consistent—gray for standard information, yellow for explanatory emphasis, and teal for priority data and conclusions—helps people follow the presentation from one slide to the next. There is no fixed percentage that every deck must follow. Leave enough white space for charts and labels, and reserve teal for relatively few places.

Check pale yellow boundaries and the clarity of charts

White ■#FFFFFF and pale yellow ■#FFF1BB have a contrast ratio of only about 1.13:1. If a yellow note box becomes difficult to recognize, add a gray ■#66727B outline. The border contrasts with the yellow at about 4.36:1. Label it “Key point” or “Needs review” rather than using color alone to explain its purpose.

For materials viewed on screens or published on the web, WCAG (Web Content Accessibility Guidelines) 2.2 Level AA provides useful reference targets: at least 4.5:1 for normal text in general, and at least 3:1 against adjacent colors for graphic elements needed to understand the information. The rules apply to their defined web-content scope; for projected slides, also check actual legibility, chart labels, and line thickness in the presentation environment.

HueRoll lets you adjust HEX values, explore palette suggestions, and compare a selected color with white or black. It cannot calculate contrast between any two custom colors or automatically determine WCAG compliance. Check the exact adjacent color pairs separately when combining gray, yellow, and teal.