Skip to main content

WEB DESIGN & BRANDING · September 2026 · ~11 min read

Choosing colors and typography without a design background

Pick one neutral for backgrounds, one dark tone for text, and exactly one bright color reserved for things people click. Pick two typefaces at most, one for headings and one for everything else. Check that your text passes contrast on a phone in daylight. That is the whole system, and it is a process rather than a talent.

On this page

Owners stall here for months. They open a color tool, get forty options, pick something, hate it a week later, and start again. The problem is not taste. It is that nobody gave them constraints, and design without constraints is infinite.

So here are the constraints. They are boring on purpose, and boring is what stays legible on a five-inch screen in a parking lot.

01

How do I choose colors without guessing?

Work in roles, not in shades. Every color on your site should have a job.

Background. Almost always white or a very light neutral. Not because it is exciting, because text sits on it all day and anything else fights the reading.

Text. A dark tone, near black. Grey text on white is the most common self-inflicted wound in small business design. It looks refined on a designer's calibrated monitor and it is unreadable outdoors.

Action. One color, used only for buttons and links. If your accent color also appears in headings, borders, and a background stripe, it stops meaning "click this." Restraint here does more for conversion than any other visual choice.

Support. One or two muted tones for section backgrounds and dividers. Optional.

That is four roles. If a color cannot claim a role, it does not go on the site.

Where do you get the actual values? Your existing materials. Your sign, your truck, your packaging. Pull the colors that already exist in the physical business, because customers have already learned them. Inventing a palette that contradicts your storefront is a way of throwing away recognition you already paid for.

02

What is the actual number my text has to hit?

There is one, and it is published. The World Wide Web Consortium sets the AA threshold in success criterion 1.4.3 of WCAG 2.2 at a contrast ratio of 4.5 to 1 for normal text and 3 to 1 for large text. That is a measurement, not an opinion, which makes it the rare design decision you can settle without a meeting.

Run the common greys against a white background and the picture is stark. Hex 999999 measures 2.85 to 1 and fails. Hex 767676 measures 4.54 to 1 and scrapes past. Hex 595959 measures 7 to 1. Hex 333333 measures 12.63 to 1. Every free contrast checker computes those from the same formula in the standard, so you can verify each one in under a minute.

The reason this matters more than it sounds is that the failing value is the default. Template body copy ships grey because grey photographs well in a portfolio shot. It is a decision made for the designer's screenshot, not for your customer's phone in a car park.

03

Which typefaces should I actually use?

Two. One for headlines, one for body text, and the body one is the important choice.

Body text should be a face designed for reading at small sizes on screens. The system fonts on phones and the standard open-source families are boring and they are correct. A distinctive body face is a distinctive way to make people stop reading.

Headlines can carry personality, and this is the right place to spend it. If your brand is a Korean barbecue restaurant with private rooms, the headline face can say something. The paragraph about parking should not.

Three practical rules matter more than the font choice itself. Set body text large, larger than looks right on your desktop, because most of your visitors are on a phone. Keep line length short enough that the eye does not lose its place. And give lines generous spacing, because dense text gets skipped.

If a visitor has to zoom, the typography failed, no matter how good it looks in the mockup.

04

Do fonts have a cost beyond how they look?

Yes, and it is the part nobody mentions in a design review. Every custom typeface is a file the visitor has to download before they can read anything, and while it loads the browser either shows nothing or shows a fallback and then swaps.

Google's own Core Web Vitals thresholds put that swap in scope. Cumulative Layout Shift is rated good at 0.1 or below, measured at the 75th percentile of visits, and text reflowing when a webfont arrives is one of the ordinary ways a page fails it. Largest Contentful Paint is rated good at 2.5 seconds or below, and on a text-led page the largest element is frequently a headline set in the font that has not arrived yet.

The size of the effect is worth respecting. Google, Deloitte Digital and Fifty-Five measured 37 brands across roughly 30 million user sessions over four weeks in late 2019 and found that a 0.1 second improvement in mobile load time was associated with retail conversions 8.4% higher and lead-generation bounce rate 8.3% better. State the baseline whenever you quote that, because the whole finding is one tenth of a second against the site's own starting speed, not against some universal average. And date it. That is 2019 data.

Two typefaces at two weights each is a small download. Four typefaces at six weights each is a slow page dressed as a design decision.

05

How do I know if it is working?

Two checks, both of which take minutes and neither of which requires an opinion.

First, contrast, against the 4.5 to 1 number above. This is not an aesthetic preference, it is whether a customer over fifty can read your hours. It also happens to be the single easiest accessibility improvement available, and the accessibility basics that also improve conversion start almost entirely with contrast and text size.

Second, the parking lot test. Load the site on your phone, walk outside, and read it in sunlight. Every design decision that fails does so here, and it fails obviously. Screen glare is the real judge of your grey text.

Then look at behavior rather than opinion. If people arrive and do not inquire, something is losing them, and the answer is often legibility or an invisible button rather than anything strategic. Working out why traffic is fine but inquiries are not usually starts by watching what a visitor can actually see and tap.

06

Can I test which colors convert better?

Worked example

Almost certainly not, and this is the most useful thing in this article.

There is a real number here and it is not the one you have been quoted. The sample a test needs is set by the metric's variance and by the size of the effect you want to catch, which is how Kohavi, Deng, Longbotham and Xu put it in KDD 2014. At 95% confidence and 80% power the two-proportion calculation carries a constant of 2 × (1.96 + 0.84)², which is 15.68, call it 16. Divide 16 by the square of the relative lift you want and you have the conversions needed per variant. Run your own numbers against that.

Step one. Say your site takes 700 visits a month and converts at 3%. That is 21 inquiries a month.

Step two. Split the traffic in half and each variant gets about 10 inquiries a month (derived).

Step three. Decide what lift is worth finding. A 40% jump in inquiries would be a transformation, and 16 divided by 0.40 squared is 100 conversions per variant (derived), or about ten months per variant (derived). A believable 20% improvement needs 400 per variant (derived), which is over three years (derived).

Step four. In ten months your season changes, your ad spend changes, your offer changes, and a competitor opens. There is no clean comparison left to make.

So when you read that a particular button color lifted conversions by some percentage, understand what you are holding: a result from a site with the traffic to detect it, on their audience, with their offer. The most circulated example is Joshua Porter's "Red Beats Green" case study, and the KDD 2014 authors name it as their illustration of a finding that does not travel: "Since we do not see a lot of sites with red call-to-action buttons, we believe this is not a general result that replicates well."

The threshold deserves the same scepticism. The 10,000 monthly visitors figure is not research. It enters that paper as reference [29], resolving to Neil Patel, "11 Obvious A/B Tests You Should Try," QuickSprout, 14 January 2013, and the authors qualify it in the same sentence: "the guidance should be refined to the metrics of interest." A 2013 blog post, promoted to an industry standard by repetition.

Here is what to do instead. Stop treating color as a testable variable and treat it as a legibility variable. Contrast is pass or fail against a published threshold. One action color is a rule, not a preference. A button that is visibly a button is not an opinion. Those three decisions are settled by measurement and by restraint, and they capture nearly all of the available benefit without a test you cannot run.

Google's mobile research with SOASTA points the same way. Their model, published on Google's Think pages and updated in 2018, found that as the number of elements on a page rises from 400 to 6,000, the probability of conversion drops 95%. Fewer things, said more clearly, beats a better shade of blue.

07

Where does the logo fit into this?

It follows the colors, not the other way around, which is the opposite of how most projects run.

A logo that only works in its original two colors constrains everything downstream. A logo that works in one color, on dark, on light, and at the size of a phone icon gives you room. That is the practical test, and what actually matters about a logo for a local business is a much shorter list than the branding industry sells.

One more sequencing note. Colors, type, logo, and photography should be settled before a designer starts building pages, or you will be changing them while pages are being built and paying for both. What to prepare before a web project starts covers the rest of that list.

Your palette also has to work in places you do not control. Your listing photos, your review platform profiles, your printed menu. And if you ever move, everything with an address on it has to be updated, which is a bigger job than it sounds and one where moving locations without losing local rankings matters more than the design refresh you will be tempted to do at the same time.

08

What to do this week

Photograph your sign, your business card, your packaging, and your vehicle. Pull three colors out of those photos with any color picker. Those are your candidates, and they are already true to the business.

Assign the four roles. Background, text, action, support. Write the hex values down somewhere permanent, because you will need them for the site, the profile, and every future print job.

Run the contrast check on your body text and get to 4.5 to 1 or better. If you are at 999999, you are failing today.

Pick your body typeface and set it larger than feels natural. Pick one headline face that does not fight it. Stop at two, and count how many font files your site is currently downloading while you are in there.

Then take your phone outside and read your own homepage in the sun. Fix whatever you could not read, and stop there.

Be honest with yourself

When you do not need this

If your business has a working visual identity that customers recognize, do not rework it because a designer called it dated. Recognition is an asset and refreshes spend it.

If you are a solo operator whose work comes entirely by referral, this changes very little. Your customers already decided about you before they saw the site.

And if you are still working out what you sell and to whom, colors are the wrong problem. The visual system is downstream of the positioning, and choosing it first means choosing it twice.

Sources

Related reading

12

Questions about your colors and type?

Email me at eric@seod.com with a photo of your sign or your logo file. I will send back a working palette with the actual hex values, the four roles assigned, and a type pairing that will not fight it. It takes me about fifteen minutes and there is no meeting attached.

More on brand decisions in the web design and branding library.

Call Eric Email Eric