Kleur en eenheden

Lichtgrijze tekst #bbbbbb op wit heeft een contrastverhouding van 1.92 op 1. WCAG vraagt voor normale tekst minstens 4.5 op 1.

Manieren om een kleur te schrijven

CSS accepteert kleuren in verschillende notaties, die allemaal op hetzelfde neerkomen: hoeveelheden rood, groen en blauw licht op het scherm. Kleurnamen zoals red, navy of rebeccapurple zijn goed leesbaar maar beperkt. Hexnotatie schrijft rood, groen en blauw elk als twee hexadecimale cijfers, van 00 tot ff (0 tot 255): #1a5fb4 is 26 rood, 95 groen en 180 blauw, een middenblauwe kleur. rgb(26 95 180) zegt hetzelfde in decimale notatie. hsl(210 80% 40%) beschrijft een kleur met kleurtoon (een hoek op de kleurencirkel, waar 0 rood is, 120 groen en 240 blauw), verzadiging en lichtheid. Daardoor kun je gemakkelijk een lichtere of donkerdere tint van dezelfde kleurtoon maken door één getal te veranderen.

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

Een vierde waarde na een schuine streep stelt het alfakanaal in: rgb(0 0 0 / 50%) is zwart met halve dekking, zodat wat erachter ligt doorschijnt. color stelt de tekstkleur in, background-color de vulling achter een element en border-color de rand. Het sleutelwoord currentColor betekent de tekstkleur van het element, handig voor pictogrammen en randen die bij de tekst moeten passen.

Contrast is niet vrijblijvend

Tekst die qua lichtheid te weinig van de achtergrond verschilt, is voor veel mensen moeilijk leesbaar: slechtzienden, oudere lezers en iedereen die een telefoon in de zon leest. WCAG 2.2, de toegankelijkheidsrichtlijnen van het W3C, meet dit als contrastverhouding van 1 op 1 (geen verschil) tot 21 op 1 (zwart op wit). Succescriterium 1.4.3 vraagt minstens 4.5 op 1 voor normale tekst en 3 op 1 voor grote tekst, volgens WCAG minstens 18 punt of 14 punt vet. Donkergrijs #767676 op wit voldoet net met 4.54 op 1; #777777 voldoet net niet met 4.48. De ontwikkelaarstools van de browser tonen de verhouding wanneer je een tekstelement inspecteert, dus je hoeft niet te gokken.

Kleur mag ook nooit de enige manier zijn om informatie te tonen. Een formulier dat fouten alleen aangeeft door een rand rood te maken, sluit iedereen uit die rood slecht ziet; voeg ook een melding of pictogram toe.

Absolute en relatieve eenheden

Lengten hebben een eenheid nodig, behalve nul. px is de CSS-pixel, een vaste eenheid; op schermen met een hoge pixeldichtheid beslaat één CSS-pixel meerdere fysieke pixels, zodat hij voor het oog ongeveer even groot blijft. Relatieve eenheden schalen mee met iets anders. em is relatief aan de eigen lettergrootte van het element, dus padding: 0.5em bij tekst van 20 pixels is 10 pixels. rem is relatief aan de lettergrootte van het hoofdelement (html), die in browsers 16 pixels is tenzij de lezer die heeft gewijzigd, dus 1.25rem is normaal 20 pixels. % is relatief aan de ouder, meestal de breedte ervan. vw en vh zijn honderdsten van de breedte en hoogte van het weergavevenster, en ch is ongeveer de breedte van het cijfer nul in het huidige lettertype.

Welke gebruik je? Tekstgrootte in rem houdt rekening met de lezer: als iemand de browser op grotere tekst instelt, groeit alles dat in rem is uitgedrukt mee, terwijl tekst met een vaste px-grootte mogelijk niet meegroeit. Binnenruimte in em groeit mee met de omringde tekst. Pixels zijn prima voor dingen die niet moeten schalen, zoals een rand van 1 pixel.