Choose website colors that keep text readable and controls identifiable. Check contrast, image backgrounds, links, and error messages before publishing.
Choose a palette that lets visitors read the content and recognize links, controls, and errors. Give brand colors a defined role within that palette. Claims that a particular hue produces trust or increases sales need evidence specific to the situation.
For pricing and opening hours, assess the text against its background. Start with the practical task of reading the explanation and using the page.
Contrast ratio compares relative luminance. WCAG 2.2 Level AA requires at least 4.5:1 for ordinary text and 3:1 for large text. Large text generally means 18 points, or 14 points when bold, with equivalent sizing considered for scripts such as Japanese. Exceptions include logo text and inactive controls. (W3C text contrast)
Light and dark areas of a photograph produce different contrast with the same lettering. A solid panel behind the heading or a separate text area can establish a consistent background. Check the mobile crop as well.
Record the background, text, link, and main-action styles. Use the same settings for the same purpose. Starting with three colors is a design exercise; include the states the interface actually needs.
| Purpose | What to define |
|---|---|
| Text and background | The actual color pair |
| Links | An additional distinction such as an underline |
| Main action | Background, label, and focus indicator |
| Input errors | The explanation and affected field |
A red field alone leaves the problem unspecified. A message requesting a correctly formatted email address communicates what to fix. WCAG requires an additional visual means when color communicates information or an action. (W3C use of color)
Test prices, supporting text, links, and buttons in their normal and focused states. Change pairs with insufficient contrast and add text or shape where color alone carries meaning. See Button labels and activation areas for the interaction design.
Photographs and copy length can change a template's appearance. Include a check using the content you will actually publish.
SpreadSite is a no-code website builder that lets you create, publish, and update a website from Google Sheets using ready-made templates.
To build a website while reviewing its palette and published content, give SpreadSite a try!
A: Three colors can be a starting point for assigning roles. Choose combinations that distinguish text, links, actions, and errors.
A: Assess ordinary text and button labels against their backgrounds, including brand colors. The logo-text exception does not extend to the rest of the page.
A: Assess recognition, wording, and completed inquiries. Color alone provides insufficient evidence for predicting an increase.
A: The image brightness and crop determine contrast. Measure the actual background and add a solid text area if needed.
