Lavender and Navy Combinations: Color Schemes for Backgrounds and Headings
Lavender and navy pair a pale purple with a dark blue, creating a noticeable difference in lightness. But choosing which one covers the background changes how prominent the heading feels and how the whole banner comes across. Using an announcement for an online book club as an example, we compare two layouts with reversed background and heading colors, including specific choices for body text and the registration button.
First decide whether the main background should be light or dark
Here, lavender means a light purple with a soft, muted appearance, while navy means a deep blue. Both names cover a range of shades, so we will use five fixed colors in the examples. HEX is a web color notation using a # sign followed by six hexadecimal digits or letters.
- Lavender: #E6DCF3 — for a pale background or a heading on a dark background
- Navy: #223153 — for headings, dark background bands, and buttons
- Off-white: #FAF9FC — for areas containing event details
- Deep blue-gray: #35415C — for paragraph text
- White: #FFFFFF — for text on dark buttons
When navy #223153 is used for the heading and lavender #E6DCF3 covers the larger background, the dark lettering stands out within a light composition. Reversing the placement makes the navy surface the dominant area and the lavender heading a lighter point of contrast. Neither arrangement has one fixed psychological effect: surrounding colors, space, and the amount of each color all influence the result. Start with the placement of the information readers need to notice.
Two banner examples with reversed backgrounds and headings
Option 1: Navy headings on a lavender background
- Overall banner background: lavender #E6DCF3
- “Weekend Online Book Club” headline: navy #223153
- Card containing the date and time: off-white #FAF9FC
- Schedule and explanatory text: deep blue-gray #35415C
- “Register to join” button: navy #223153 fill with white #FFFFFF lettering
This layout puts a large heading at the top, with the schedule and registration button underneath. Use navy text directly on lavender, then keep the card copy consistently dark. It suits a design where you want most of the announcement to stay light. However, lavender and off-white have similar brightness, so if the card must have a clearly visible edge, add a thin navy border or enough spacing to define its boundaries.
Option 2: Lavender headings on a navy background
- Upper heading band: navy #223153
- Title inside the dark band: lavender #E6DCF3
- Lower section for event details: off-white #FAF9FC
- Body text: deep blue-gray #35415C
- Registration button: lavender #E6DCF3 fill with a navy #223153 label and outline
The darker upper band carries the event name, while the brighter lower area holds the information people need to read. Repeating lavender in the headline and button helps connect the two sections without making everything the same color. Since a pale button can blend into an off-white background, use a visible navy outline so it is easier to identify as an interactive control.
Check text contrast and the boundaries between pale colors
A contrast ratio measures the difference in relative brightness between text and its background. Navy #223153 against lavender #E6DCF3 has a ratio of about 9.74:1; deep blue-gray #35415C against off-white #FAF9FC is about 9.71:1; and white #FFFFFF against navy #223153 is about 12.87:1. All exceed the 4.5:1 minimum for regular-size text under WCAG (Web Content Accessibility Guidelines) Level AA.
By contrast, lavender #E6DCF3 next to off-white #FAF9FC has a ratio of only about 1.26:1. Their color difference alone is too subtle to depend on for a meaningful boundary. The navy #223153 outline suggested for the button in Option 2 contrasts with the off-white #FAF9FC background by about 12.27:1, helping distinguish the control. The label, position, and space around the button should also make its purpose clear.
On a phone, the heading band may become taller and the button may move below the details. Check that the text remains legible and the action is easy to find in the narrow layout. HueRoll lets you adjust colors using HEX and check a selected color against white or black. It does not directly compare arbitrary pairs of colors or automatically judge WCAG AA or AAA compliance, so verify each actual text-and-background combination with a separate contrast calculator.