Färgkontrast: läsbar text för alla

Färgkontrast är skillnaden i ljushet mellan text och färgen bakom, och den avgör om folk över huvud taget kan läsa dina ord. Riktlinjerna Web Content Accessibility Guidelines (WCAG) mäter den som ett förhållande från 1:1, där de två färgerna är identiska, till 21:1, svart på vitt. För nivå AA behöver vanlig text minst 4,5:1 och stor text minst 3:1. Allt annat i den här guiden handlar om att nå de siffrorna utan att göra din design försagd.

Kontrast spelar roll för alla, inte bara för personer med nedsatt syn. Telefoner i solljus, dunkla projektorer, billiga skärmar och trötta ögon krymper alla skillnaden mellan färger. Designer med tillräcklig kontrast blir helt enkelt mer lästa.

WCAG:s kontrastkvoter på klarspråk

Tre regler i WCAG 2 täcker nästan varje designbeslut. De kommer från W3C:s framgångskriterier, och det är dem som de flesta tillgänglighetsgranskningar och regelverk hänvisar till.

Två detaljer överraskar. För det första handlar ”stor” om den renderade storleken, så en rubrik på 24 px på en telefon som skalar ner den kanske inte längre räknas som stor. För det andra är en inaktiverad knapp undantagen, men en ljusgrå platshållare som folk behöver förstå är det inte.

Så beräknas kontrastkvoten

Kvoten jämför den relativa luminansen hos de två färgerna: hur mycket ljus var och en avger, viktat så som ögat ser. Grönt bidrar mest, rött mindre och blått mycket lite, vilket är varför ett mättat blått kan vara förvånansvärt mörkt och ett gult förvånansvärt ljust. Formeln är (L1 + 0.05) / (L2 + 0.05), där L1 är den ljusare färgen.

// WCAG 2 contrast ratio between two hex colours
const channel = (c) => {
  c /= 255
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}
const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((i) => channel(parseInt(hex.slice(i, i + 2), 16)))
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#767676', '#ffffff') // 4.54, passes for body text
contrast('#777777', '#ffffff') // 4.48, fails

Du behöver inte räkna för hand. WebAIM:s kontrastkontroll tar två hexkoder och talar om vilka nivåer som klaras, och färgväljaren i Chromes utvecklarverktyg visar kvoten för all text du inspekterar.

Färgpar som klarar och inte klarar kraven

Varumärkesfärger hamnar ofta i det besvärliga mellanläget, för mörka för mörk text och för ljusa för vit text. Mellangröna, orange, rosa och ljusblå färger är de vanliga bovarna. Här är vanliga kombinationer med sina verkliga kvoter.

Därför gör gradienter kontrasten svårare

En enfärgad bakgrund har en kontrastkvot. En gradient har en ny i varje punkt. Vit text som lätt klarar kraven över den mörka änden av en blandning kan helt misslyckas i den ljusa änden, och en rubrik som sträcker sig över gradienten klarar och misslyckas på samma rad.

Regeln är enkel: testa den ljusaste punkten bakom ljus text, eller den mörkaste punkten bakom mörk text. Om den sämsta punkten klarar det gör hela raden det. Medelfärger och pipettprov från mitten leder dig vilse.

Så rättar du kontrasten på en gradient

1. 1

   Flytta orden till den lugna änden

   Lägg texten över den mörkaste eller ljusaste delen av gradienten och låt den ljusa övergången ske långt ifrån.

2. 2

   Smalna av spannet bakom texten

   Håll den del av gradienten som ligger bakom orden inom ett litet ljushetsspann. Resten av ytan kan vara så djärv du vill.

3. 3

   Lägg till en mjuk skugga

   En mild mörk eller ljus tonad bakgrund bakom texten, som en gradient från genomskinligt till 30 % svart, höjer kontrasten utan en synlig ruta.

4. 4

   Gör den större och fetare

   Stor text behöver bara 3:1. En kraftigare vikt och en större storlek kan göra en rad som inte klarar kraven till en som gör det.

5. 5

   Testa på en riktig telefon

   Kontrollera designen på full ljusstyrka och på låg, utomhus om du kan. Kvoter är golvet, inte målet.

.card {
  background: linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%);
  color: #ffffff;
}
/* A soft scrim keeps white text above 4.5:1 across the pink end */
.card .text {
  background: linear-gradient(90deg, transparent 0%, rgb(31 11 58 / 0.55) 60%);
  padding: 1rem 1.25rem;
}

Det här är tanken bakom Gradiently och läsbarheten: en Mark vet var dina ord finns, flyttar sitt lugnaste område med bäst kontrast bakom dem och väljer ljust eller mörkt bläck per rad ur sin egen palett. För fler tekniker som fungerar var som helst, läs text på en gradient och läsbar text över foton. För mörka gränssnitt särskilt, se att designa för mörkt läge.