Saltar al contenido

Comprobador de contraste de colores

Web y desarrollo

¿Se lee bien este texto sobre este fondo?

Comprueba el contraste WCAG entre texto y fondo, qué niveles cumple y un color cercano que los cumpla.

Relación de contraste

4,54:1

4 de 5 comprobaciones superadas.

Ejemplo de texto grande

El veloz murciélago hindú comía feliz cardillo y kiwi.

Comprobaciones WCAG 2.2

  • Texto normal, nivel AA Correcto

    Criterio de conformidad 1.4.3: exige al menos 4,5:1.

  • Texto grande, nivel AA Correcto

    Criterio de conformidad 1.4.3: exige al menos 3:1.

  • Texto normal, nivel AAA Problema

    Criterio de conformidad 1.4.6: exige al menos 7:1.

  • Texto grande, nivel AAA Correcto

    Criterio de conformidad 1.4.6: exige al menos 4,5:1.

  • Iconos y controles, nivel AA Correcto

    Criterio de conformidad 1.4.11: exige al menos 3:1.

Color de texto más cercano que cumple

Nivel AAA, texto normal (7:1)
#595959

Enlaces patrocinados

Comprueba el contraste WCAG entre texto y fondo, qué niveles cumple y un color cercano que los cumpla.

Cómo usar la herramienta

  1. Introduce los colores de texto y fondo en cualquier formato CSS o pulsa una muestra para elegirlos. El botón de intercambio los invierte.
  2. Consulta la relación y las comprobaciones: texto normal, texto grande e iconos o controles, en los niveles AA y AAA.
  3. Si una comprobación falla, copia el color de texto más cercano que cumple. Conserva el matiz y cambia solo la luminosidad.

Texto gris sobre fondo blanco

Color del texto (HEX)Relación de contraste
#00000021:1
#5959597:1
#7676764,54:1
#7777774,47:1
#9999992,84:1

Enlaces patrocinados

Cómo funciona

Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.2) miden cuánto destaca el texto mediante una relación de 1:1 (sin diferencia) a 21:1 (negro sobre blanco). El nivel AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande: 18 puntos o más, o 14 puntos en negrita (criterio 1.4.3). AAA exige 7:1 y 4,5:1 (1.4.6). Iconos, bordes de campos y otros elementos necesarios para ver deben alcanzar 3:1 (1.4.11).

La relación es (L1 + 0,05) ÷ (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. La luminancia relativa es 0,2126 R + 0,7152 G + 0,0722 B de los valores rojo, verde y azul linealizados. Por ejemplo, #767676 sobre blanco tiene L = 0,181 frente a 1: (1 + 0,05) ÷ (0,181 + 0,05) da 4,54:1. La relación se trunca, nunca se redondea al alza: 4,499 no cumple 4,5.

El texto transparente se compone primero sobre el fondo y el fondo transparente sobre blanco. El color sugerido conserva matiz y croma del texto y cambia solo su luminosidad OKLCH hasta el valor más cercano que cumple. El contraste es solo parte de la legibilidad: también importan fuente, tamaño y grosor, y la relación no evalúa el daltonismo más allá de la luminosidad.

Preguntas frecuentes

¿Qué es texto grande según WCAG?

Texto de al menos 18 puntos (24 px) o 14 puntos (unos 18,7 px) en negrita. Necesita menos contraste porque las letras grandes se leen mejor.

¿A qué nivel debería aspirar?

AA es el objetivo legal y de diseño habitual. AAA es más estricto y no siempre es posible en todo el sitio, pero resulta útil para textos de lectura larga.

¿La relación depende de qué color sea el texto?

No. Es igual al intercambiar ambos colores. Solo cambian la muestra y el color sugerido, porque la sugerencia ajusta el texto.

¿Superar el test de contraste hace accesible mi página?

No. Solo comprueba el contraste de color. El acceso por teclado, las alternativas textuales y otros requisitos siguen siendo importantes.

¿Por qué una relación justo por debajo de 4,5 no cumple AA para texto normal?

El umbral es 4,5:1, sin redondear al alza. La relación mostrada se trunca a dos decimales para no aparentar que un valor insuficiente cumple.

También puedes necesitar

Más en Web y desarrollo

Todas las 18 herramientas de Web y desarrollo

Populares ahora

Enlaces patrocinados

Enlaces patrocinados