Fargekontrast: tekst som alle kan lese

Fargekontrast er forskjellen i lyshet mellom tekst og fargen bak den, og den avgjør om folk i det hele tatt kan lese ordene dine. Retningslinjene for tilgjengelig webinnhold (WCAG) måler den som et forhold fra 1:1, der de to fargene er like, til 21:1, svart på hvitt. På nivå AA trenger vanlig tekst minst 4,5:1 og stor tekst minst 3:1. Alt annet i denne guiden handler om å nå disse tallene uten å gjøre designet ditt forsagt.

Kontrast betyr noe for alle, ikke bare for folk med nedsatt syn. Mobiler i sollys, svake prosjektorer, billige skjermer og slitne øyne krymper alle forskjellen mellom farger. Design med nok kontrast blir rett og slett lest mer.

WCAGs kontrastforhold i klartekst

Tre regler i WCAG 2 dekker nesten alle designbeslutninger. De kommer fra W3Cs suksesskriterier, og de er det de fleste tilgjengelighetsrevisjoner og forskrifter viser til.

To detaljer tar folk på senga. For det første handler «stor» om størrelsen slik den gjengis, så en overskrift på 24 px på en mobil som skalerer den ned, teller kanskje ikke lenger som stor. For det andre er en deaktivert knapp unntatt, men en lysegrå plassholder folk må forstå, er det ikke.

Slik regnes kontrastforholdet ut

Forholdet sammenligner den relative luminansen til de to fargene: hvor mye lys hver av dem gir fra seg, vektet slik øyet ser. Grønt bidrar mest, rødt mindre og blått svært lite, og derfor kan et mettet blått være overraskende mørkt og et gult overraskende lyst. Formelen er (L1 + 0.05) / (L2 + 0.05), der L1 er den lyseste fargen.

// 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 trenger ikke regne den ut for hånd. WebAIMs kontrastsjekker tar to hex-koder og forteller hvilke nivåer som består, og fargevelgeren i utviklerverktøyene i Chrome viser forholdet for all tekst du inspiserer.

Fargepar som består og feiler

Merkevarefarger havner ofte i det kinkige midtpartiet, for mørke til mørk tekst og for lyse til hvit tekst. Middels grønne, oransje, rosa og lyseblå farger er de vanlige syndebukkene. Dette er vanlige kombinasjoner, med de faktiske forholdene.

Hvorfor gradienter gjør kontrast vanskeligere

En flat bakgrunn har ett kontrastforhold. En gradient har et ulikt ett i hvert punkt. Hvit tekst som lett består over den mørke enden av en blanding, kan feile helt i den lyse enden, og en overskrift som strekker seg over gradienten, både består og feiler på samme linje.

Regelen er enkel: test det lyseste punktet bak lys tekst, eller det mørkeste punktet bak mørk tekst. Hvis det verste punktet består, består hele linjen. Gjennomsnittsfarger og pipetteprøver fra midten vil lure deg.

Slik retter du kontrasten på en gradient

1. 1

   Flytt ordene til den rolige enden

   Plasser tekst over den mørkeste eller lyseste delen av gradienten, og la den lyse overgangen skje et annet sted.

2. 2

   Snevre inn spennet bak teksten

   Hold den delen av gradienten som ligger bak ord, innenfor et lite lyshetsområde. Resten av lerretet kan være så dristig du vil.

3. 3

   Legg til et mykt slør

   En mild mørk eller lys tone bak teksten, som en gradient fra gjennomsiktig til 30 % svart, løfter kontrasten uten en synlig boks.

4. 4

   Gå større og tyngre

   Stor tekst trenger bare 3:1. Et tyngre snitt og en større størrelse kan gjøre en linje som feiler, til en som består.

5. 5

   Test på en ekte mobil

   Sjekk designet på full lysstyrke og på lav, utendørs om du kan. Forholdstall er gulvet, ikke 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;
}

Dette er tanken bak lesbarheten i Gradiently: en Mark vet hvor ordene dine er, flytter sin roligste region med best kontrast bak dem og velger lyst eller mørkt blekk per linje fra sin egen palett. For flere teknikker som fungerer overalt, les tekst på gradient og lesbar tekst over foto. For mørke grensesnitt spesielt, se design for mørk modus.