Web Color Schemes Using White and Lavender: How to Alternate Backgrounds

Should a website using white and lavender simply alternate the two background colors? Because both are light, changes between them can be subtle, and the purpose of each section may become unclear. Here we pair white ■#FFFFFF with pale lavender ■#ECE7FA and use a handmade-notebook shop as an example of where to change backgrounds and how to choose text and button colors. HEX is a six-digit hexadecimal color code used on the web.

Use white for detailed information and lavender for stories or actions

White ■#FFFFFF works well behind text-heavy information such as product dimensions, prices, and delivery conditions. Pale lavender ■#ECE7FA is an option for a different type of section, such as suggestions for using the notebooks or an invitation to buy. Rather than switching colors at every heading, change the background when the reader moves to a new group of related information.

Keep text colors consistent across both backgrounds. Use deep purple ■#51406C for headings and dark purplish gray ■#302940 for body text. The heading contrast ratio is approximately 9.13:1 on white and 7.56:1 on lavender. For body text, the corresponding ratios are about 13.84:1 and 11.46:1. A contrast ratio measures the difference in relative luminance between colors. Even when the text color stays the same, check it against each background.

Two ways to alternate backgrounds on a handmade-notebook shop

Option A: Lead with product photography. Put the opening product images and short introduction on white ■#FFFFFF, and use the same background for prices and specifications. Switch to pale lavender ■#ECE7FA for a section showing how the notebooks can be used. Return to white ■#FFFFFF for shipping and returns, then use lavender ■#ECE7FA once more for the final purchasing instructions. This separates detailed information from guidance and calls to action.

For a “View Products” button in the purchase section, use deep purple ■#51406C with white ■#FFFFFF lettering. Text against the button has a ratio of about 9.13:1, while the button against the lavender ■#ECE7FA background has about 7.56:1. If you move that button onto a white section, it still has approximately 9.13:1 contrast with its surroundings, allowing the action color to remain consistent.

Option B: Lead with products that are mostly white. Start with a lavender ■#ECE7FA area so white merchandise has a different color around it. A white ■#FFFFFF card for product photography has only about 1.21:1 contrast against lavender, so if its edge needs to be identifiable, add a muted-purple ■#756484 outline. The outline has approximately 5.37:1 contrast against the white card and 4.44:1 against the surrounding lavender. Place detailed specifications and ordering terms in a white section below.

In either layout, decide whether the section should highlight imagery or help people read details before deciding where to change the background.

Check subtle boundaries and text readability

White ■#FFFFFF and pale lavender ■#ECE7FA have a contrast ratio of only about 1.21:1. Do not depend solely on that difference to mark section boundaries. Use descriptive headings and enough vertical space to show which content belongs together. Likewise, avoid white ■#FFFFFF explanatory text on lavender ■#ECE7FA: at about 1.21:1, it has insufficient contrast.

WCAG 2.2, the Web Content Accessibility Guidelines, generally requires at least 4.5:1 contrast for normal-size text and 3:1 for large text at Level AA. Essential non-text indicators, such as input borders or selected states, may need 3:1 against adjacent colors. That rule does not mean every decorative transition between backgrounds must reach 3:1. Also check the length of each section and button placement on a phone.

HueRoll lets you enter HEX colors and check a selected color against white or black. It does not automatically compare any two arbitrary colors or report AA compliance. The ratios between the custom colors in this article were calculated separately.