Colors, typography and contrast: practical rules so your page reads well and feels like yours

The design of a links page is judged in a second and on a phone, often in sunlight or on a moving bus. That is why the rules that matter are not fashionable ones, but those that ensure the text is readable, the hierarchy is understood and the page feels like it belongs to someone in particular. This guide gathers practical decisions on color, typography and contrast that you can apply without being a designer.

Start with contrast

Contrast is the difference between the text color and the background color. It is the first thing that decides whether something can be read. Light gray text on a white background can look elegant on a design screen and be unreadable on a phone with low brightness. Web accessibility guidelines recommend a minimum contrast ratio (4.5 to 1 for normal text, per the WCAG guidelines) and free tools exist to measure it.

A quick test without tools: lower your phone's brightness to the minimum and open your page. If any text gets lost, the contrast is insufficient. Another: look at it from a meter away, squinting; what is still visible is what has enough contrast.

Pay special attention to:

• Button text on its background.
• Small text (descriptions, notes).
• Text over images or gradients, where contrast varies from point to point.

Choose a small palette

A page works better with few colors. A reasonable scheme:

• One background color (light or dark).
• One text color with good contrast on that background.
• One accent color for what you want to highlight (the main button, a link).
• One or two neutrals for secondary details.

More colors raise the risk of the page looking cluttered. The accent works because it is scarce: if everything is eye-catching, nothing is.

What colors communicate

Colors have no universal meaning, but they do have cultural associations. Some common examples, to be taken as a starting point, not a rule:

• Blues and greens usually convey calm and trust.
• Reds and oranges, energy and urgency.
• Blacks and dark colors, sobriety or elegance.
• Very saturated, bright colors, youth and enthusiasm.

What matters is that the palette is coherent with your brand and with what you offer: a psychologist and a rock band convey different things.

One or two typefaces

Typography adds personality and legibility. Simple rules:

• Use one or two families at most. One for headlines and another for text, or a single one with several weights.
• Prioritize legibility on a small screen. Very decorative typefaces can be beautiful in a title and unreadable in a paragraph.
• Mind the size. Text that is too small forces zooming.
• Do not overuse capitals. Long text in capitals is harder to read.
• Respect hierarchy. The name biggest, clear buttons, supporting text more discreet.

In Zona's panel you can adjust colors, buttons and typography starting from a theme, and see the result as you change. Custom colors are available on the Pro and Business plans; on the free plan you choose from a selection of themes. More information on the themes and design page.

Consistency with your other networks

A page that resembles your profile, your logo and your posts reinforces your identity. Take your accent color from there and, if you use a brand typeface, keep it when possible. You do not need to copy everything: a few repeated elements are enough for someone to recognize they are in the right place.

Light mode and dark mode

Many visitors use their phone's dark mode. If your theme is dark, check that light text does not dazzle and that images look good on the background. If it is light, verify that it is not too bright at night. Zona offers ready-made dark themes; choose the one you want to show.

Beware of text over images

A photographic background is attractive but dangerous: text can lose contrast in light areas of the photo. If you use a background image, prefer photos with calm areas where the text sits well, or a semi-transparent dark layer beneath. Always check each button, not only the first.

A five-step review

1. Open the page on your phone with low brightness: can everything be read?
2. Count the colors: are there more than four?
3. Count the typefaces: are there more than two?
4. Check that the accent is reserved for the most important thing.
5. Ask someone to look at it for three seconds and say what they remember.

If what they remember is your name and your main button, the design works. To try colors and themes, create your zone for free.

Common mistakes

• Light gray text on a white background.
• Using all your brand colors at once.
• Mixing three or four typefaces.
• Ignoring how it looks at night.
• Putting text over an image without checking contrast.

Frequently asked questions

Can I use my brand's exact colors?

With custom colors, yes. They are available on the Pro and Business plans.

What do I do if my logo has many colors?

Pick one as the accent and let the rest of the design be sober.

How do I know whether the contrast is enough?

With a contrast-measuring tool (there are several free ones) or with the test of lowering the phone brightness.

Does the color of the main button matter?

Yes: it must stand out clearly against the background and against the secondary buttons.