Text på gradientbakgrund: så blir den läsbar varje gång

För att placera text på gradientbakgrund så att den alltid går att läsa lägger du orden över gradientens lugnaste sträcka, väljer ljus eller mörk textfärg efter ljusheten hos färgen direkt bakom dem, håller liten text borta från mellantoner och testar kontrasten på den sämsta punkten, inte på genomsnittet. Storlek och vikt gör resten: stor, robust text klarar en föränderlig bakgrund som tunn, liten text inte gör.

Därför är text på en gradient svårare än den ser ut

På en enfärgad yta är kontrasten mellan text och bakgrund ett enda tal. På en gradient ändras den längs övergången. Vit text kan vara skarp mot den mörka änden och nästan osynlig mot den ljusa, ibland inom ett enda ord. Gradienten nedan visar hur snabbt det går.

Tröskelvärdena kommer från WCAG:s riktlinjer för kontrast: 4.5:1 för normal text och 3:1 för stor text, ungefär 24 pixlar och uppåt, eller omkring 19 pixlar i fetstil. Färgkontrast förklarar reglerna med enkla ord.

Steg 1: hitta den lugna zonen

Varje gradient har sträckor där färgen ändras långsamt och sträckor där den ändras fort. Text hör hemma i den långsamma delen, eftersom kontrasten under den förblir nästan konstant. På en linjär gradient är det oftast ena änden; på en radiell gradient är det mitten eller ytterkanten; på en mesh eller aurora är det den pöl av färg som är störst och jämnast.

Om du styr gradienten bygger du in den lugna zonen: håll en färg längre genom att upprepa ett stopp, som det första exemplet gör. Om gradienten är given flyttar du texten i stället för att kämpa emot.

Steg 2: välj textfärg efter ljushet, inte nyans

Kontrast handlar om ljushet. Ett skarpt violett och ett skarpt orange kan se lika starka ut, men vitt läses bra mot violetten och dåligt mot orangen, eftersom orangen är mycket ljusare. När du väljer textfärg ignorerar du nyansen och frågar: är färgen bakom den här raden mörk eller ljus?

Tonade textfärger känns mer genomtänkta än ren vit och svart. Ta en mycket blek ton av gradientens ljusaste färg och en mycket djup ton av dess mörkaste; de för in paletten i texten och har oftast tillräcklig kontrast. Grumliga gradienter förklarar varför mellanblandningar överhuvudtaget tappar ljushetskontrast.

Steg 3: håll dig borta från mellantonsfällan

Titta på den magentafärgade raden i tabellen: 4.7:1 med vitt och 4.2:1 med nästan svart. Ingen av textfärgerna har mycket marginal. Färger med mellanljushet ligger mitt i de flesta gradienter, och det är precis där folk brukar centrera sin text. Liten text där blir marginell vilken färg du än väljer.

• Flytta texten mot den mörkare eller ljusare änden.
• Förskjut gradienten så att stoppet bakom texten blir mörkare eller ljusare.
• Gör texten stor och fet, så att den lägre gränsen 3:1 för stor text gäller.
• Spara mellantonerna till dekoration, former och luft, inte till ord.

.banner {
  /* The dark stop is held to 45%, so the headline on the left sits on one lightness. */
  background: linear-gradient(90deg, #1e1b4b 0%, #1e1b4b 45%, #7c3aed 70%, #ec4899 100%);
  color: #f5f3ff; /* a pale violet tint rather than pure white */
}

.banner h1 {
  max-width: 40%;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Steg 4: använd storlek och vikt

Tyngre, större bokstäver har mer yta och läses som former, så de tål en föränderlig bakgrund bättre. Hårfina och lätta vikter går sönder när färgen bakom dem skiftar. På en gradient sätter du brödtext i normal, medium eller fet vikt i stället för lätta, och håller rubrikerna generösa. Typsnitt för sociala medier listar robusta typsnitt som läses bra på mobilen.

Steg 5: testa i mobilstorlek och i gråskala

1. 1

   Mät det sämsta stället

   Ta prov på den ljusaste färgen bakom ljus text, eller den mörkaste bakom mörk text, och kontrollera förhållandet.

2. 2

   Titta på den i gråskala

   Gör en kopia av designen svartvit. När nyansen är borta syns svag ljushetskontrast tydligt.

3. 3

   Titta på den i mobilen

   På en armlängds avstånd, i dagsljus om du kan. Liten text på gradienter misslyckas där först.

4. 4

   Kisa

   Slut ögonen till hälften. Texten ska fortfarande skilja sig från bakgrunden som en form.

För bakgrunder som är stökigare än en gradient, som foton och strukturer, se text på stökiga bakgrunder. I Gradiently flyttar Marks sitt lugnaste område bakom orden, och automatisk textfärg väljer ljus eller mörk text för varje rad ur Markens egen palett, så metoden ovan sker medan du skriver.