Comprobador de contraste de color
Asegúrate de que tu texto se lee con facilidad para todo el mundo, y obtén una solución cuando no es así.
Sellado en este dispositivo
Funciona en tu navegador. No se sube nada.
Sellado
Colores
- Relación de contraste
- Texto normal
- AA · 4,5:1
- AAA · 7:1
- Texto grande
- AA · 3:1
- AAA · 4,5:1
- Elementos de interfaz e iconos
- AA · 3:1
- Contraste APCA (informativo)
APCA es un método más reciente que se está estudiando para futuras pautas de accesibilidad. Hoy en día, la referencia sigue siendo WCAG 2.2.
Vista previa
Así se lee el texto grande
El texto normal debe seguir siendo fácil de leer para todo el mundo, incluidas las personas con baja visión, en un móvil a pleno sol o en una pantalla antigua.
La letra pequeña y los pies de foto son los que más contraste necesitan.
Correcciones sugeridas
Cómo funciona
-
Introduce tus dos colores
Escribe o elige el color del texto y el del fondo. Sirve cualquier formato: HEX, RGB, HSL o un nombre CSS.
-
Consulta el resultado
Mira la relación de contraste y si cumple WCAG 2.2 AA y AAA para texto normal, texto grande y elementos de interfaz.
-
Aplica una corrección si hace falta
Si un nivel no se cumple, usa uno de los colores sugeridos: es el más cercano, con el mismo tono, que sí cumple.
Preguntas frecuentes
¿Qué relación de contraste necesito?
El nivel AA de WCAG 2.2 exige al menos 4,5:1 para el texto normal y 3:1 para el texto grande. El nivel AAA exige 7:1 y 4,5:1. Los iconos, los bordes de los campos y otros elementos de interfaz necesitan al menos 3:1 respecto a lo que tienen al lado.
¿Qué se considera texto grande?
El texto de al menos 18 puntos (24 píxeles CSS), o de al menos 14 puntos (unos 18,7 píxeles CSS) si está en negrita. Todo lo que sea más pequeño es texto normal.
¿Por qué 4,49:1 no cumple si está tan cerca de 4,5:1?
Los umbrales de WCAG son mínimos estrictos y la relación no se puede redondear hacia arriba. Por eso este comprobador muestra la relación redondeada hacia abajo: un valor que parece cumplir, cumple de verdad.
¿Qué es APCA?
APCA (Accessible Perceptual Contrast Algorithm) es una forma más reciente de medir el contraste que tiene en cuenta si el texto es oscuro sobre claro o claro sobre oscuro. Se está estudiando para una futura versión de las pautas. Aquí se muestra solo a título informativo: hoy, los requisitos legales y de auditoría se basan en la relación de WCAG 2.
¿Cómo se eligen los colores sugeridos?
El comprobador mantiene el tono y la intensidad de tu color y solo cambia su luminosidad, en el espacio de color perceptual OKLCH, hasta encontrar el valor más cercano que alcanza el nivel. Tu color sigue pareciendo el mismo, solo un poco más claro o más oscuro.
¿Funciona con colores transparentes?
Sí, para el color del texto: un color de texto semitransparente se mezcla primero con el fondo, porque ese es el color que realmente se ve. El fondo se trata como opaco.