Comprobador de contraste de color
Comprueba colores de texto y fondo según WCAG AA y AAA, con transparencia y el color más cercano que cumple.
Cómo utilizar
Introduce el color del texto y el color de fondo, escribiendo un código o con el selector de color. La relación de contraste y los resultados WCAG aparecen mientras escribes. Intercambiar colores invierte los dos, para texto claro sobre fondo oscuro.
La relación sigue WCAG 2.2: la luminancia relativa de cada color se calcula a partir de sus valores sRGB, y la relación es (más clara + 0,05) ÷ (más oscura + 0,05), de 1:1 para dos colores iguales a 21:1 para negro sobre blanco. El texto normal necesita 4,5:1 para el nivel AA y 7:1 para AAA; el texto grande, de al menos 24 px o 18,5 px en negrita, necesita 3:1 y 4,5:1. Los iconos, los bordes de los campos y otras partes de la interfaz necesitan 3:1 frente a lo que tienen al lado (criterio de conformidad 1.4.11).
La relación nunca se redondea hacia arriba antes de compararla: el W3C dice que 4,499:1 no cumple 4,5:1. Por eso la cifra se muestra cortada, no redondeada, a dos decimales.
Los colores pueden escribirse como #hex de 3, 4, 6 u 8 dígitos, como rgb() o hsl() en cualquiera de las dos sintaxis de CSS, o con uno de los 148 nombres de color de CSS. Un color con transparencia se comprueba tal como se pinta, mezclado con el color de detrás; un fondo transparente se comprueba sobre blanco, como supone WCAG cuando no se conoce el fondo. Si el texto no cumple, la herramienta propone el color de texto más cercano con el mismo tono y saturación que llega a 4,5:1 y a 7:1. Todo se calcula en tu navegador.
Ejemplo
El gris #777777 sobre blanco da 4,47:1, justo por debajo del 4,5:1 que necesita el texto normal para AA. El gris más cercano que cumple es #767676, con 4,54:1.
#777777 sobre #ffffff4,47:1: no cumple AA para texto normal por muy poco; #767676 da 4,54:1 y cumple.#ffffff sobre #1a73e84,5:1: el texto blanco sobre este azul llega justo a AA y queda lejos de AAA.rgba(0, 0, 0, 0.5) sobre #ffffffSe pinta como #808080, así que 3,94:1: basta para texto grande e iconos, no para texto normal.#ff0000 sobre #ffffff3,99:1: el texto rojo puro sobre blanco se queda justo por debajo de AA para texto normal; #ee0000 cumple con 4,53:1.
Preguntas frecuentes
¿Qué diferencia hay entre AA y AAA?
Son dos niveles de conformidad de WCAG. AA es el que piden la mayoría de leyes y políticas: 4,5:1 para texto normal y 3:1 para texto grande. AAA es más estricto, 7:1 y 4,5:1, y el W3C no recomienda exigirlo para sitios enteros, porque parte del contenido no puede cumplirlo.
¿Qué cuenta como texto grande?
Al menos 18 puntos, o 14 puntos en negrita. El W3C da como equivalentes en CSS unos 24 px y 18,5 px. Un texto no es grande por usar una fuente de aspecto grande; cuenta el tamaño.
¿La regla de contraste se aplica a logotipos y botones desactivados?
No. WCAG exceptúa el texto de logotipos y nombres de marca, el texto puramente decorativo y las partes de una interfaz inactiva, como un botón desactivado.
¿Por qué mi herramienta de diseño muestra otra relación?
Normalmente porque redondea: 4,495 redondeado a dos decimales se lee 4,5, pero no cumple 4,5:1. Las herramientas antiguas usaban además 0,03928 en lugar de 0,04045 en la fórmula de luminancia; el W3C indica que no cambia los resultados en la práctica.
¿Se envían mis colores a algún sitio?
No. El cálculo se hace en tu navegador.