Comprobador de contraste de color
Comprueba el contraste entre un color de texto y un color de fondo según WCAG 2 y APCA. La herramienta calcula la relación de contraste WCAG 2 a partir de la luminancia relativa, indica si se cumplen los niveles AA y AAA para texto normal y grande y para gráficos UI, y añade el valor de contraste de luminosidad APCA con indicaciones sobre sus usos. Diseñada para quienes crean interfaces accesibles.
Preguntas frecuentes
¿Qué significan los niveles WCAG?
El nivel AA requiere 4.5:1 para texto normal y 3:1 para texto grande (criterio de éxito 1.4.3); el nivel AAA requiere 7:1 y 4.5:1 (1.4.6). Los componentes de interfaz y los gráficos con significado necesitan 3:1 frente a los colores adyacentes (1.4.11). La herramienta indica si se cumple cada uno de estos cinco umbrales.
¿Qué se considera texto grande?
WCAG define el texto grande como texto de al menos 18 puntos en peso normal, unos 24 CSS píxeles, o de al menos 14 puntos en negrita, unos 18,66 CSS píxeles. El texto de menor tamaño se considera normal y necesita una relación más alta.
¿Por qué no cumple AA una relación de 4.499:1?
Los umbrales de WCAG son exactos, así que una relación que se redondearía a 4.5, pero queda por debajo, no cumple. La herramienta compara la relación sin redondear y la muestra truncada a dos decimales, para que el número mostrado nunca parezca mejor que el valor real.
¿Qué es APCA?
El Accessible Perceptual Contrast Algorithm es el método de contraste desarrollado para los borradores de WCAG 3. Modela el contraste de luminosidad percibido, trata de forma distinta el texto y el fondo, y devuelve un valor de contraste de luminosidad, Lc, de aproximadamente -108 a 106. Aún no forma parte de ningún estándar WCAG publicado, así que use los resultados de WCAG 2 para comprobar el cumplimiento y APCA como comprobación adicional.
¿Por qué el valor APCA a veces es negativo?
APCA tiene en cuenta la polaridad: los valores positivos indican texto oscuro sobre fondo claro y los negativos, texto claro sobre fondo oscuro. Las indicaciones usan el valor absoluto, así que Lc -75 y Lc 75 corresponden al mismo nivel.
¿Cómo se eligen los niveles de las indicaciones de APCA?
Se basan en el modo simple bronce de APCA: se prefiere Lc 90 para el texto del cuerpo, Lc 75 es el mínimo para ese texto, Lc 60 para otros textos de contenido, Lc 45 para titulares y texto grande, Lc 30 para texto que se lee de forma ocasional, como los marcadores de posición, y Lc 15 para elementos que no son texto. El tamaño y el grosor de la fuente también importan; tome estos niveles como punto de partida, no como una conclusión.
¿Qué versión de APCA se implementa?
Las constantes APCA-W3 de la versión 0.0.98 G, revisión 4g, con el exponente simple 2.4 en los canales sRGB, el límite suave para negros y el recorte de bajo contraste. El texto negro sobre blanco da aproximadamente Lc 106.0 y el texto blanco sobre negro, Lc -107.9, en consonancia con la implementación de referencia.
¿Qué formatos de color puedo introducir?
Códigos hexadecimales con o sin #, nombres de color CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), espacios oklch() como display-p3 y color() cmyk(). Los colores fuera de sRGB se convierten primero a sRGB, porque ambas fórmulas están definidas para colores de pantalla sRGB.
¿Cómo se gestionan los colores transparentes?
Antes de medir, el color de texto semitransparente se mezcla con el fondo, tal como lo muestra un navegador. Primero se mezcla el fondo semitransparente con blanco. El resultado enumera los colores opacos de texto y fondo que se compararon.
¿Importa el orden de los dos colores?
Para WCAG 2, no, porque la relación entre la luminancia más clara y la más oscura es la misma en ambos sentidos. Para APCA, sí, porque el texto y el fondo reciben ponderaciones distintas; introduzca el color del texto en el primer campo y el del fondo en el segundo.