Comprovador de contrast de colors

Com utilitzar el comprovador de contrast

1. Introdueix el Color del text i el Color de fons. Fes servir les mostres de color o escriu qualsevol valor CSS als camps: un codi HEX com #595959, rgb(89 89 89), hsl(0 0% 35%) o un nom com navy.
2. La Relació de contrast s’actualitza mentre escrius, d‘1:1 (sense contrast) a 21:1 (negre sobre blanc).
3. La taula de Resultats WCAG 2.2 mostra Compleix o No compleix per a Text normal, Text gran i Components d’interfície i gràfics, als nivells AA i AAA.
4. Mira la Previsualització: mostra text normal, text gran, text gran en negreta, el contorn d’un botó i una icona amb els teus dos colors.
5. Si un nivell no es compleix, tria un Objectiu a Suggeriments. L’eina proposa el Color de text més proper que compleix i el Color de fons més proper que compleix. Fes clic a Utilitza per aplicar-ne un. Intercanvia els colors canvia el text i el fons de lloc.

Tot es calcula al teu navegador; no s’envia res enlloc.

Com es calcula la relació de contrast

WCAG 2.x defineix la relació com (L1 + 0,05) / (L2 + 0,05), on L1 és la luminància relativa del color més clar i L2 la del més fosc. La luminància relativa es calcula a partir dels canals sRGB linealitzats: cada canal es descodifica amb la corba de transferència sRGB, i després L = 0,2126 R + 0,7152 G + 0,0722 B. El verd és el que més pesa perquè els nostres ulls hi són més sensibles, i per això un verd pur sembla molt més brillant que un blau pur de la mateixa «força».

La relació no s’arrodoneix mai cap amunt. #777777 sobre blanc dóna aproximadament 4,48:1 i no compleix l’AA per al text normal, tot i que sembla «4,5». Aquesta eina trunca el valor mostrat a dos decimals perquè el que veus sigui el que comprova WCAG.

Si el color del text és semitransparent (per exemple rgb(0 0 0 / 60%)), primer es barreja amb el fons, tal com el dibuixaria el navegador. La transparència del color de fons s’ignora, perquè no se sap què hi ha darrere de la pàgina.

Els nivells WCAG d’un cop d’ull

«Text gran» vol dir almenys 18 pt (24 píxels CSS), o 14 pt en negreta (uns 18,66 px). Els logotips i el text purament decoratiu no tenen cap requisit. La regla de 3:1 per als components d’interfície (criteri d’èxit 1.4.11) s’aplica a les vores dels camps i els botons, als indicadors de focus, a les icones i a les línies dels gràfics que els usuaris necessiten veure.

Com funcionen els suggeriments

Els colors suggerits conserven el to i la croma del teu color a l’espai OKLCH i només en canvien la lluminositat, més fosc o més clar, fins a arribar a la relació objectiu. L’eina tria llavors la direcció que queda visualment més a prop del color original, mesurada a OKLab. El resultat es torna a comprovar després d’arrodonir-lo a un codi HEX, de manera que realment compleix. Si cap lluminositat pot arribar a l’objectiu (7:1 contra un gris mitjà, per exemple), l’eina ho indica.

Sobre l’APCA

L’APCA (Accessible Perceptual Contrast Algorithm) és un model de contrast més recent que es considera per a un futur WCAG 3. Té en compte el gruix de la lletra, la mida i la polaritat (fosc sobre clar o clar sobre fosc). Encara és un esborrany i no és un requisit legal ni normatiu, de manera que aquesta eina mostra els resultats WCAG 2.x, que continuen sent la referència de la norma europea d’accessibilitat EN 301 549, de la Section 508 i de la majoria de lleis.