Verificador de contraste de color

Cómo usar el verificador de contraste de color

1. 1. Introduce los dos colores. Escribe cada uno en HEX (#777777), rgb(), hsl() o un nombre CSS, o usa el selector. Intercambiar los invierte, lo que resulta útil para comprobar las versiones de texto claro sobre fondo oscuro y de texto oscuro sobre fondo claro.
2. 2. Lee la razón y la tabla. La razón va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). La tabla la compara con cada requisito de WCAG y dice Cumple o No cumple con palabras, no solo con color.
3. 3. Decide el tamaño. El texto grande tiene requisitos más bajos. La vista previa muestra texto normal, texto grande, texto grande en negrita y un control con borde, para que juzgues tu caso concreto.
4. 4. Corrige un par que no cumple. Elige el nivel que quieres alcanzar y usa el color de texto o de fondo sugerido. La herramienta conserva el tono y cambia solo la luminosidad, en el paso más pequeño que cumple.

Qué exige WCAG 2.2

Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2 fijan razones de contraste mínimas en tres criterios de éxito. La razón es (L₁ + 0,05) ÷ (L₂ + 0,05), donde L₁ es la luminancia relativa del color más claro y L₂ la del más oscuro.

El texto grande mide al menos 18 pt, o 14 pt en negrita: 24 px y unos 18,7 px en una pantalla a 96 ppp. Los logotipos, el texto puramente decorativo y los controles inactivos quedan exentos de 1.4.3. La regla de 3:1 de 1.4.11 cubre las partes de un control necesarias para encontrarlo (el borde de un botón, el contorno de una casilla), sus estados como el foco, y los gráficos que el lector necesita para entender el contenido, como las líneas de un gráfico.

Cómo se calcula la razón

Cada canal sRGB se escala a 0–1 y se linealiza: c ÷ 12,92 si c ≤ 0,04045; en otro caso ((c + 0,055) ÷ 1,055)^2,4. La luminancia relativa es entonces 0,2126 R + 0,7152 G + 0,0722 B. El verde pesa más porque el ojo es más sensible a él.

WCAG no redondea: una razón de 4,4999 no cumple 4,5. Por eso el verificador muestra la razón redondeada a la baja con dos decimales, así que un caso casi aprobado nunca se muestra como aprobado.

Revisar diapositivas, carteles y figuras

• Las diapositivas y los carteles no son páginas web, pero las razones de WCAG son también la referencia aceptada para ellos. El texto del cuerpo en una diapositiva suele ser grande (24 px son 18 pt); los pies de foto, las notas y las etiquetas de los ejes no lo son, así que compruébalos como texto normal.
• Apunta por encima del mínimo para la proyección. Un proyector en una sala iluminada reduce el contraste para todos. Elige AAA (7:1) para el texto de una diapositiva que vas a mostrar en una sala muy iluminada.
• El texto sobre una fotografía o un degradado no tiene un fondo único. Comprueba las zonas más claras y más oscuras detrás del texto, o colócalo sobre un panel sólido.
• Los gráficos y las figuras entran en 1.4.11: líneas, barras y marcadores necesitan 3:1 frente al fondo. El color por sí solo no debe transmitir el significado; consulta el Simulador de daltonismo.
• Los colores translúcidos se aplanan antes de medir: primero el fondo sobre blanco y luego el texto sobre el fondo. Si hay otra cosa detrás de la página, introduce ese color directamente.

Una nota sobre APCA

El Algoritmo de Contraste Perceptual Accesible (APCA) es un método candidato en el borrador de trabajo de WCAG 3, que tiene en cuenta el tamaño, el grosor y la polaridad del texto. Es un borrador, no un requisito, y ninguna ley ni norma lo exige todavía. Las razones de WCAG 2.x —las de esta herramienta— siguen siendo la base de las declaraciones de conformidad.

Preguntas frecuentes

¿Qué es una buena razón de contraste?

4,5:1 o más para texto normal cumple WCAG AA, y 7:1 cumple AAA. El texto grande necesita 3:1 para AA y 4,5:1 para AAA. El negro sobre blanco es el máximo, 21:1. Todo lo que esté por debajo de 3:1 es difícil de leer para muchas personas, incluso con buena vista.

¿Qué se considera texto grande en WCAG?

El texto de al menos 18 pt (24 px) en grosor normal, o de al menos 14 pt (unos 18,7 px) en negrita. El tamaño se mide tal como se muestra, así que una fuente de diapositiva que parece pequeña en un folleto puede ser grande al proyectarse.

¿El requisito de contraste se aplica a iconos y líneas de gráficos?

Sí, mediante el criterio de éxito 1.4.11 Contraste de elementos no textuales: los componentes de interfaz y los gráficos necesarios para entender el contenido deben tener al menos 3:1 frente a los colores adyacentes. Los gráficos decorativos y los componentes inactivos están exentos.

¿Por qué mi color muestra 4,49 si la razón es casi 4,5?

Porque WCAG compara la razón exacta y no concede nada por redondeo. Un par de 4,4999:1 no cumple el requisito de 4,5:1, así que la herramienta muestra el valor redondeado a la baja con dos decimales en lugar de 4,50.

¿Cómo funcionan los colores sugeridos?

La herramienta conserva el tono y la saturación de tu color y mueve su luminosidad HSL hacia arriba o hacia abajo en pasos pequeños, devolviendo el valor más cercano que alcanza la razón objetivo como código HEX de 8 bits. Si ninguna luminosidad puede alcanzarla —7:1 frente a un gris medio, por ejemplo—, lo indica y sugiere cambiar el otro color.

¿Es APCA mejor que la razón de WCAG?

APCA modela la percepción con más precisión, sobre todo en modo oscuro y con texto fino, pero forma parte de un borrador (WCAG 3), no de un requisito aceptado. Las leyes de accesibilidad y las normas de contratación que citan WCAG 2.x usan la razón que se calcula aquí.