Colors i contrast

Converteix un color entre HEX, RGB, HSL i OKLCH, en genera una escala d’onze tons i en comprova el contrast contra blanc i contra negre segons els criteris de la WCAG.

OKLCH és el format que val la pena conèixer: està construït perquè una mateixa lluminositat es percebi igual sigui quin sigui el to, cosa que HSL no aconsegueix ni de bon tros. Per això és tan més fàcil fer-hi escales que es vegin coherents.

Com es fa servir

1. Tria un color amb el selector o escriu-lo en qualsevol format.
2. Copia el format que et calgui.
3. Mira la taula de contrast abans de fer-lo servir per a text.

Preguntes freqüents

Quin contrast necessito?

4,5:1 per a text normal i 3:1 per a text gran o negreta, que és el nivell AA. El AAA demana 7:1. Per sota de 3:1 el text costa de llegir per a molta gent.

Per què el groc i el blau amb la mateixa lluminositat HSL es veuen tan diferents?

Perquè HSL no té en compte com percep la llum l’ull humà, que és molt més sensible al verd i al groc. OKLCH sí que ho corregeix, i per això la seva lluminositat és de fiar.

Quins formats d’entrada accepta?

HEX de tres, quatre, sis o vuit dígits, rgb(), hsl() i els noms de color CSS com «tomato» o «rebeccapurple».

Eines relacionades