How to Choose Website Footer Colors | A Color Scheme That Grounds the Page

A dark footer can give a website a clear visual ending, but making it almost black is not a complete design strategy. People who reach the bottom may still need opening hours, directions, contact details, privacy information, or terms of use. Those details must remain easy to find and read. This article uses a hypothetical cooking-class website that offers introductory lessons to show how to transition from a light content area to a calm, useful footer.

Choose footer colors by their purpose and the transition from the content

A footer is the shared information area at the end of a website. It often contains the organization’s location, contact options, and policies. A footer can use a light background if spacing and headings clearly separate it from the content. On a mostly light page, however, a deep blue-gray surface can make the end of the lessons and booking information more distinct. A dark footer is an option, not a universal rule: what matters is the distribution of light and dark surfaces across the page.

When the footer becomes dark, check the legibility of small opening-hour notes, copyright text, and policy links, not just the large headings. A contrast ratio measures the difference in relative luminance between two colors. Underline text links so they remain identifiable as actions without relying solely on color.

A footer also does not need to become a second oversized booking section. Keep the main introductory-lesson booking button with the lesson information, then use the footer for contact details and secondary routes. Separating these roles makes the end of the page easier to navigate.

Example palette for a cooking-class website and its footer

Imagine a site with lesson descriptions, prices, introductory bookings, travel information, contacts, and usage policies. HEX is a hexadecimal notation used for web colors. Start with the existing content palette, then choose coordinated surfaces, typography, and links for the footer.

• Reading background and text: Use warm off-white ■#FAF7F1 for the content area with charcoal ■#30363B lettering. The text-to-background contrast is about 11.44:1. Muted blue-gray headings ■#315866 have approximately 7.22:1 contrast against the same surface. Keep the overall saturation restrained so the footer still belongs to the same visual identity.
• Lesson description cards: On white ■#FFFFFF cards, charcoal ■#30363B text has about 12.23:1 contrast. Because white ■#FFFFFF and the surrounding off-white ■#FAF7F1 differ by only about 1.07:1, add a gray ■#788389 border where a clearer card boundary is needed. The border contrasts by about 3.88:1 against white ■#FFFFFF.
• Main introductory-lesson booking button: Place a deep terracotta ■#934832 button in the content with white ■#FFFFFF text. Text-to-button contrast is about 6.53:1, while the button surface differs from surrounding off-white ■#FAF7F1 by approximately 6.11:1. Avoid repeating the same large booking button throughout the footer.
• Information strip immediately above the footer: Use pale sage ■#E4ECE6 with dark gray-green ■#304244 text for a short message about what to bring or how to prepare for a class. Their contrast is about 8.77:1. The strip differs from the off-white page ■#FAF7F1 by only about 1.13:1, creating a modest transition before the solid dark footer.
• Footer background: Choose deep blue-gray ■#253D47 as the continuous surface at the bottom. It contrasts by about 10.69:1 with the off-white content ■#FAF7F1 and about 9.49:1 with the pale sage strip ■#E4ECE6. Group “Studio information,” “Contact,” and “Helpful links” through headings and spacing rather than surrounding every group with strong borders.
• Footer headings and main information: White ■#FFFFFF lettering against deep blue-gray ■#253D47 provides about 11.43:1 contrast. Use it for the class or studio name and key headings. Make the layout easy to scan through readable type sizes and consistent column spacing, not by making every piece of text bold.
• Directions, contact, and policy links: Use pale sand ■#F5DFB9 for links on the blue-gray footer ■#253D47. The ratio is about 8.78:1. Underline links labeled “Directions,” “Contact,” “Terms of use,” and “Privacy policy.” Keep an underline or another visible cue when a visitor hovers, and use meaningful destination labels instead of relying only on the color.
• Opening hours and copyright information: For supporting text that should be quieter than white, use light blue-gray ■#D2DEDD. Against the footer ■#253D47, it has a contrast ratio of about 8.29:1. Do not fade small copyright notices until they become difficult to read. Contact details and opening hours need the same care.
• Decorative footer divider: A slim blue-gray ■#68838B rule against the footer background ■#253D47 has about 2.83:1 contrast. Treat this as a purely decorative division above the copyright line, not as the only indicator separating important content or identifying a control. Section labels and spacing must still communicate the structure.
• Icons and keyboard focus: Pale sand ■#F5DFB9 can also be used for a contact icon and visible keyboard focus outlines on the footer ■#253D47, providing about 8.78:1 contrast. Accompany a contact icon with a label such as “Email the studio,” or give an icon-only link a suitable accessible name. Keyboard users need a clear way to identify their current link.

The design keeps its main content light, then places a single coherent dark surface at the end. Within the footer, white identifies headings, sand identifies links, and light blue-gray identifies secondary information. These distinct roles prevent every footer element from demanding equal attention.

Review small text, links, and mobile layout before publishing

On smaller screens, stack the footer’s three columns vertically and preserve spacing between headings and links. Check that long addresses and opening hours remain readable after wrapping. Keep link underlines visible, and do not remove keyboard focus indicators in favor of a mouse-only hover effect.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text generally requires at least 4.5:1 contrast against its background, and large text at least 3:1. Essential non-text information, including graphics or focus indicators required to identify controls, generally requires at least 3:1 against adjacent colors. That does not mean every divider with no informational purpose must meet the same requirement.

Finally, scan the entire page from the booking button to the footer’s contact links. Check that colors added near the bottom do not compete unnecessarily with the main content. HueRoll can compare a selected color against white or black, but it cannot compare arbitrary pairs of custom colors or automatically assess WCAG AA or AAA compliance. The custom-pair contrast ratios in this article were calculated separately.