Comprobador de contraste
Introduce un color de texto y uno de fondo para ver el veredicto WCAG 2.1 y el Lc de APCA juntos. Si no cumple, te sugerimos un ajuste que solo mueve la luminosidad.
Titular grande 24px
El veloz murciélago Abc 123
Elemento de interfaz como un botón o un iconoVeredicto WCAG 2.1
La norma vigente de accesibilidad. Los requisitos legales apuntan casi siempre aquí.
Cómo alcanzar el objetivo
Solo se mueve la luminosidad (L) de OKLCH; el ángulo de tono se mantiene. Obtienes el mismo color con otra luminosidad, no un color distinto.
APCA Lc
El método candidato para WCAG 3. Puntúa de forma distinta el texto oscuro sobre claro y el claro sobre oscuro, y da un valor Lc en lugar de una relación.
⚠️ APCA sigue siendo un borrador. Para declarar conformidad, usa el veredicto WCAG 2.1 de arriba.
Cómo se calculan los números
El contraste de WCAG 2.1 parte de la luminancia relativa. Normaliza cada canal a 0–1, deshaz la gamma sRGB, calcula L = 0,2126·R + 0,7152·G + 0,0722·B y divide: (L más clara + 0,05) ÷ (L más oscura + 0,05). El resultado va de 1:1 a 21:1.
«Texto grande» significa 18pt (unos 24px) o más, o negrita desde 14pt (unos 18,66px). Los logotipos y los controles desactivados quedan fuera del requisito.
Los colores semitransparentes deben comprobarse ya compuestos sobre lo que hay detrás. Esta herramienta trabaja con dos colores opacos.
Nombres de color CSS que cumplen sobre blanco y sobre negro
Los 141 nombres de color de CSS medidos sobre fondo blanco y negro, agrupados según si superan el AA de texto normal (4,5:1).
Cumple AA de texto sobre blanco 30
Cumple AA de texto sobre negro 111
Preguntas frecuentes
¿De dónde sale el 4,5:1?
Es el criterio de conformidad 1.4.3 de WCAG 2.1, fijado como el mínimo con el que alguien con una visión de en torno a 20/40 puede leer texto de cuerpo. El nivel AAA de 7:1 apunta a unos 20/80.
WCAG y APCA no coinciden, ¿cuál mando?
La conformidad la decide WCAG 2.1. APCA es un borrador que intenta corregir problemas conocidos, como que WCAG sea demasiado permisivo sobre fondos oscuros, así que úsalo como guía de diseño y no como veredicto.
¿Puedo subir el contraste sin cambiar de color?
Es justo lo que hace la sugerencia: busca por bisección la luminosidad de OKLCH hasta superar el objetivo por poco, conserva el ángulo de tono y reduce el croma si el resultado se saliera de sRGB.