Branding By Lui Nobrega · Apr 1, 2026 · Updated Oct 26, 2026 · 5 min read

Picking Colors and Fonts That Fit Your Business

Colors and fonts do a lot of quiet work. They tell people what kind of business you are before anyone reads a single word. You do not need a design degree to choose well. You need a short list, a free contrast checker, and your phone.

Step 1: Start from what you already have

Most businesses already have colors, on a logo, a sign, a truck or a menu. People know them. Build from there instead of starting over.

  1. Write down three words for how you want customers to feel. Calm, quick and friendly lead to different choices than precise, serious and established.
  2. Gather the colors already on your logo, sign and printed pieces. See: What a Logo Really Does for Your Business
  3. Ask your designer or printer for the exact color codes. On the web they are written as hex codes, like #1F4E79. Keep them in one place.
  4. Look at two or three competitors in your town. Aim to fit your trade without looking like a copy of the shop down the street.

Step 2: Pick a few colors and stick to them

You need one main color, one accent color, and a couple of neutrals like gray and off white. That is enough. Sites with ten colors look messy and homemade. Using the same few colors over and over is what makes a site look professional.

  1. Main color: usually the strongest color in your logo. Use it for headings, the top bar or the footer.
  2. Accent color: one bright color for buttons and links only. If it shows up everywhere, nothing stands out.
  3. Neutrals: a dark gray or near black for body text, and a white or off white for backgrounds.
  4. Never use color as the only signal. A required form field marked only in red gives no signal to people who cannot see the color. Add the word "required" too. See: Understanding Success Criterion 1.4.1: Use of Color (opens in a new tab)

Step 3: Check that people can read it

Light gray text on a white background looks nice on your big monitor. Now try reading it outside on a phone. The accessibility standard WCAG sets a minimum contrast ratio of 4.5 to 1 between normal text and its background, and 3 to 1 for large text. Large means about 18 point, or 14 point bold. Text that is part of a logo, or purely decorative, has no contrast requirement. All text people need to read should pass.

  1. Open the WebAIM Contrast Checker. See: WebAIM: Contrast Checker (opens in a new tab)
  2. Enter your text color as the foreground and your background color as the background, using the hex codes from Step 1.
  3. Look at the results for Normal Text under WCAG AA. You want to see Pass. For big headings, check the Large Text line.
  4. Check every pair you plan to use: body text on the background, button text on the button color, and link color on the background.
  5. If a pair fails, darken the text or lighten the background until it passes. Use the Lightness slider on the same page to find a close shade that works.

Helpful links

Step 4: Choose two fonts

Use one font for headings and one for everything else. That is really all you need. Fancy script fonts are hard to read and they go out of style fast. Google Fonts is a good place to look. Google says all of its fonts are released under open source licenses and can be used in commercial projects.

  1. Open Google Fonts and type your business name into the preview box, so you see your own words instead of sample text. See: Google Fonts (opens in a new tab)
  2. Pick the body font first. Choose a plain, open font that is easy to read in long paragraphs. Paste in a real paragraph from your site to judge it.
  3. Pick a heading font that adds a little personality, or simply use the bold version of your body font. Both work.
  4. Use only the weights you need, such as regular and bold. Fewer files means less for a phone to download.
  5. Write down the exact font names and weights next to your color codes.

Helpful links

Step 5: Test it on a phone

A color and font choice is only finished when it works on a real phone in real light.

  1. Make a sample page, or ask your designer for one, with a heading, two paragraphs, a button and a link.
  2. Open it on your phone outside in daylight. Read a full paragraph at arm's length without zooming.
  3. Check that the button is the first thing your eye lands on.
  4. Ask someone over 60 to read it. If they reach for their glasses, make the text bigger or darker.
  5. Once the site is live, run a page through WAVE. WebAIM says it finds most text on the page that does not meet the contrast minimum. See: WAVE Web Accessibility Evaluation Tools (opens in a new tab)

Helpful links

Common questions

How many colors should a small business website use?

Usually four or five: one main color, one accent color for buttons and links, a dark neutral for text and one or two light neutrals for backgrounds. More than that tends to look busy. Use them the same way on every page.

How much contrast does text need?

The accessibility standard WCAG asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. You can check any pair of colors for free with the WebAIM Contrast Checker by entering the two hex codes.

Can I use Google Fonts for my business?

Yes. Google says all fonts on Google Fonts are released under open source licenses and can be used in commercial and non-commercial projects. Pick one for body text and one for headings.

Sources and further reading

The takeaway

A few colors used over and over, text that passes a contrast check, and two fonts. Write them down, test them on a phone, and use them the same way everywhere. That is what a professional look is made of.

← Previous What Is Managed Hosting (and Do You Need It)? Next → Making Manufacturing Websites That Win RFQs