Contrast de components i gràfics (1.4.11) i ús del color (1.4.1)

El contrast no és només cosa del text. Una vora de camp de formulari gairebé invisible, una icona gris sobre gris, una casella de selecció que no es distingeix del fons o un gràfic amb tres tons de blau són barreres tan reals com un paràgraf il·legible. I hi ha una altra barrera relacionada: fer servir el color com a únic mitjà per comunicar alguna cosa («els camps en vermell són obligatoris»). Aquesta lliçó tracta els dos criteris que ho regulen: 1.4.11 Contrast no textual i 1.4.1 Ús del color.

1.4.11 Contrast no textual

Aquest criteri, de nivell AA i introduït a WCAG 2.1, exigeix una ràtio de contrast d'almenys 3:1 respecte als colors adjacents en dos tipus d'elements:

Components d'interfície

La informació visual necessària per identificar el component i els seus estats. A la pràctica:

• La vora o l'emplenament que indica on és un camp de text, una casella, un botó d'opció o un botó. Si el camp només s'identifica per una vora gris #CCCCCC sobre blanc (ràtio 1,6:1), no compleix.
• L'indicador de focus (el veurem en detall al curs d'interfícies): l'anell de focus ha de contrastar 3:1 amb el que l'envolta.
• Els estats: marcat/no marcat, seleccionat, actiu, desplegat. El color que indica «aquesta pestanya és activa» necessita 3:1 contra les pestanyes inactives, o un indicador addicional (subratllat, negreta, icona).
• Excepció: components l'aparença dels quals determina el navegador i no s'ha modificat, i components inactius.

Objectes gràfics

Les parts d'un gràfic necessàries per entendre el contingut: les línies d'un gràfic de línies, els sectors d'un gràfic circular (entre si i amb el fons), les barres, les icones informatives. No afecta elements decoratius ni casos en què una presentació concreta sigui essencial (una fotografia, un mapa de calor els colors del qual són la dada).

/* Incorrecte: vora de camp amb ràtio 1,6:1 sobre blanc */
input { border: 1px solid #CCCCCC; }

/* Correcte: ràtio 4,5:1 */
input { border: 1px solid #767676; }

/* Icona informativa: 3:1 mínim contra el fons */
.icono-aviso { color: #B35900; } /* sobre blanc: 4,8:1 */

1.4.1 Ús del color

El criteri 1.4.1 Ús del color, de nivell A, estableix que el color no s'utilitza com a únic mitjà visual per transmetre informació, indicar una acció, provocar una resposta o distingir un element visual. Afecta prop del 8 % dels homes i el 0,5 % de les dones amb alguna forma de daltonisme, persones amb baixa visió que veuen en escala de grisos o amb alt contrast forçat, i qualsevol persona que imprimeixi en blanc i negre.

Casos típics d'incompliment i la seva solució:

El cas especial dels enllaços dins del text

Si un enllaç dins d'un paràgraf es distingeix del text només pel color, la tècnica acceptada (G183) exigeix una ràtio de contrast d'almenys 3:1 entre el color de l'enllaç i el del text del voltant, a més d'un indicador visual addicional (subratllat, per exemple) en passar-hi el ratolí i en rebre el focus. A la pràctica, el més robust és subratllar els enllaços del contingut. En menús de navegació, on el context deixa clar que tot són enllaços, el subratllat no és necessari.

Com comprovar-ho

• Escala de grisos: a les eines de desenvolupament de Chrome (Rendering > Emulate vision deficiencies) o amb el filtre de color del sistema operatiu. Si en gris perds informació, incompleixes 1.4.1.
• Simuladors de daltonisme: el mateix tauler de Chrome simula protanopia, deuteranopia, tritanopia i acromatòpsia. Connectors de Figma (Stark, Color Blind) fan el mateix en disseny.
• Comptagotes: Colour Contrast Analyser per mesurar vores, icones i segments de gràfics contra el fons. Les eines automàtiques no solen avaluar 1.4.11 de manera fiable.
• Impressió en blanc i negre del disseny: una prova molt simple i molt reveladora.

Resum

• 1.4.11 Contrast no textual (AA): 3:1 per a vores, indicadors de focus, estats de components i parts informatives de gràfics.
• Exempts: components amb l'aparença per defecte del navegador, inactius i gràfics la presentació dels quals és essencial.
• 1.4.1 Ús del color (A): el color no és mai l'únic mitjà; afegeix-hi text, icona, forma, trama o subratllat.
• Enllaços en text continu: subratllat, o 3:1 respecte al text més un indicador en hover i focus.
• Comprova en escala de grisos, amb simuladors de daltonisme i amb comptagotes.