Kleurcontrast: leesbare tekst voor iedereen

Kleurcontrast is het helderheidsverschil tussen tekst en de kleur erachter, en het bepaalt of mensen je woorden überhaupt kunnen lezen. De Web Content Accessibility Guidelines (WCAG) meten het als verhouding van 1:1, waar beide kleuren gelijk zijn, tot 21:1, zwart op wit. Voor niveau AA heeft gewone tekst minstens 4,5:1 nodig en grote tekst minstens 3:1. Al het andere in deze gids gaat over die getallen halen zonder je ontwerp bedeesd te maken.

Contrast doet ertoe voor iedereen, niet alleen voor mensen met een slecht gezichtsvermogen. Telefoons in zonlicht, doffe projectoren, goedkope monitoren en vermoeide ogen verkleinen allemaal het verschil tussen kleuren. Ontwerpen met genoeg contrast worden gewoon vaker gelezen.

De WCAG-contrastverhoudingen in gewone taal

Drie regels in WCAG 2 dekken bijna elke ontwerpbeslissing. Ze komen uit de succescriteria van het W3C en zijn waar de meeste toegankelijkheidsaudits en regelgeving naar verwijzen.

Twee details laten mensen struikelen. Ten eerste gaat “groot” over de weergegeven grootte, dus een kop van 24 px op een telefoon die hem verkleint telt misschien niet meer als groot. Ten tweede is een uitgeschakelde knop uitgezonderd, maar een lichtgrijze placeholder die mensen moeten begrijpen niet.

Hoe de contrastverhouding wordt berekend

De verhouding vergelijkt de relatieve luminantie van de twee kleuren: hoeveel licht elk afgeeft, gewogen zoals het oog ziet. Groen draagt het meest bij, rood minder en blauw heel weinig, en daarom kan een verzadigd blauw verrassend donker zijn en een geel verrassend licht. De formule is (L1 + 0.05) / (L2 + 0.05), waarbij L1 de lichtere kleur is.

// 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

Je hoeft het niet met de hand te berekenen. De contrastchecker van WebAIM neemt twee hexcodes en vertelt welke niveaus slagen, en de kleurkiezer in de ontwikkelaarstools van Chrome toont de verhouding van elke tekst die je inspecteert.

Kleurparen die slagen en falen

Merkkleuren zitten vaak in het lastige midden: te donker voor donkere tekst en te licht voor witte tekst. Middelgroene, oranje, roze en lichtblauwe tinten zijn de gebruikelijke boosdoeners. Dit zijn gangbare combinaties, met hun echte verhoudingen.

Waarom kleurverlopen contrast lastiger maken

Een vlakke achtergrond heeft één contrastverhouding. Een kleurverloop heeft op elk punt een andere. Witte tekst die makkelijk slaagt op het donkere eind van een overgang kan op het lichte eind volledig falen, en een kop die zich over het kleurverloop uitstrekt slaagt en faalt in dezelfde regel.

De regel is simpel: test het lichtste punt achter lichte tekst, of het donkerste punt achter donkere tekst. Slaagt het slechtste punt, dan slaagt de hele regel. Gemiddelde kleuren en pipetmonsters uit het midden misleiden je.

Zo herstel je contrast op een kleurverloop

1. 1

   Verplaats de woorden naar het rustige eind

   Zet tekst over het donkerste of lichtste deel van het kleurverloop en laat de heldere overgang daar vandaan gebeuren.

2. 2

   Verklein het bereik achter de tekst

   Houd het deel van het kleurverloop achter de woorden binnen een klein lichtheidsbereik. De rest van het canvas mag zo gedurfd zijn als je wilt.

3. 3

   Voeg een zachte sluier toe

   Een zachte donkere of lichte uitloop achter de tekst, zoals een kleurverloop van transparant naar 30% zwart, verhoogt het contrast zonder zichtbaar vak.

4. 4

   Ga groter en vetter

   Grote tekst heeft maar 3:1 nodig. Een zwaarder gewicht en een grotere maat kunnen een falende regel laten slagen.

5. 5

   Test op een echte telefoon

   Bekijk het ontwerp op volle helderheid en op lage helderheid, buiten als je kunt. Verhoudingen zijn de ondergrens, niet het doel.

.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;
}

Dit is het idee achter de leesbaarheid van Gradiently: een Mark weet waar je woorden staan, verplaatst zijn rustigste gebied met het beste contrast erachter en kiest per regel lichte of donkere inkt uit zijn eigen palet. Voor meer technieken die overal werken, lees tekst op een kleurverloop en leesbare tekst over foto’s. Voor donkere interfaces specifiek, zie ontwerpen voor donkere modus.