Two decisions shape how a page feels before anyone reads a word of it. Colour and type. They are also the two most likely to be settled by taste in a meeting and never examined again.
Colour in web design does more than decorate. It signals what is interactive, what is urgent, what belongs together and what can be ignored. Type does the same work through size, weight and spacing. Get both right and a page explains itself. Get them wrong, and people work harder than they should to find what they came for.
Colour in Web Design: Hierarchy, Type and Contrast Tips
1. Hierarchy is the actual job
Every page has a rank order, whether or not anyone designed one. The reader’s eye finds the biggest, boldest, most saturated element first and moves outward from there.
The practical test is to squint at a screen until the words blur. What still stands out? If the answer is a decorative banner rather than the thing you want people to do, the hierarchy is working against you.
Three levers do most of this work: size, weight and space. Colour is the fourth, and it is the one most often asked to do the job alone. It should not be, for reasons that become obvious the moment somebody cannot distinguish your two shades of green.
2 .Never let colour carry meaning by itself
If a required form field turns red and nothing else changes, a person with a colour vision difference has no idea which field failed. Around one in twelve men and one in two hundred women have some form of colour vision deficiency, so this is a common case rather than an edge one.
Pair colour with a second signal every time. An icon, a label, a border change, a position shift. The colour becomes reinforcement rather than the only channel.
3. Contrast has a number, not an opinion
WCAG 2.1 sets measurable thresholds. At WCAG 2.1 Level AA, body text needs a contrast ratio of at least 4.5:1 against its background, and large text needs 3:1. Interface components and meaningful graphics need 3:1.
Those numbers settle most arguments. Light grey text on white is a recurring casualty, and so is white text on a mid-tone brand colour that looked fine in the brand guidelines and fails on a phone in daylight.
Check the states as well as the resting colour. Hover, focus, and disabled styles all need to remain distinguishable, and focus indicators in particular are frequently designed away.
4. Typography techniques that carry weight
Set body text at a size people can read without leaning in. Around 16 to 18 pixels suits most screens, and line length is more important than most teams expect: somewhere near 60 to 75 characters keeps the eye from losing its place on the return sweep.
Line height does quiet work. Roughly 1.5 for body copy gives text room to breathe. Tighter than that and paragraphs turn into a block.
Limit yourself to two typefaces, or one with a range of weights. Every additional family is another font file to download, and each weight and style is a separate request.
5. Fonts have a delivery cost
This is where design and performance meet. A page that loads four custom font families in six weights is downloading a substantial amount of data before the first sentence appears, and reducing that supports both a faster experience and lower estimated digital carbon. Environmental figures remain modelled rather than directly measured, so treat the carbon side as a direction rather than a precise claim.
Practical steps: subset fonts to the characters you actually use, serve modern formats, and set a sensible fallback so text stays readable while a custom face loads. A system font stack costs nothing to download and is a legitimate choice rather than a compromise.
Our sustainable web design work treats these as the same decision rather than competing ones.
Building a palette that survives contact with a real site
Start with fewer colours than you think you need. A primary, a neutral range and one accent will build most interfaces. Add colours when a specific job requires one, not in advance.
Define semantic roles rather than shade names. “Danger” and “success” survive a rebrand; “the orange one” does not.
Test the palette in context before signing it off. Colour behaves differently at small sizes, in dark mode, against photography and on a poorly calibrated screen. A palette that only works on the designer’s monitor is not finished.