Comprobador de contraste de color
Introduce un color de texto y uno de fondo para ver su ratio de contraste WCAG y, si no cumple, los colores más cercanos que superan AA o AAA.
- WCAG 2.2
- Sugiere correcciones
- Vista de daltonismo
- APCA
Texto grande: 24 px o 19 px en negrita
Texto normal de párrafo. El veloz murciélago hindú comía feliz cardillo y kiwi, y todo el mundo debería poder leerlo sin esfuerzo.
El color del texto es parcialmente transparente: la relación se mide después de mezclarlo con el fondo.
Colores más cercanos que cumplen
APCA: contraste perceptual
APCA es el método de contraste propuesto para WCAG 3. Interpreta el par como texto sobre fondo, así que intercambiar los colores cambia el valor. Tómalo como orientación adicional: hoy la referencia legal siguen siendo las relaciones de WCAG 2.
Deficiencias en la visión del color
Cómo se ve el par con las formas más comunes de daltonismo y la relación de contraste que queda.
Cómo comprobar el contraste de color
Dos colores, un veredicto.
- 1
Introduce los dos colores
Vale cualquier formato CSS: HEX, rgb(), hsl(), oklch() o un nombre de color. También puedes usar el selector.
- 2
Consulta el ratio
Ves de un vistazo qué niveles WCAG se cumplen para texto normal, texto grande y componentes de interfaz, con una vista previa en directo.
- 3
Corrige lo que falla
Aplica uno de los colores sugeridos (mismo tono, algo más claro o más oscuro) o arrastra los controles de luminosidad.
Más que un «cumple» o «no cumple»
También te enseña la salida.
Cálculo WCAG exacto
Luminancia relativa y ratio tal como los define WCAG 2.2, con dos decimales y sin redondear nunca al alza por encima de un umbral.
El color válido más cercano
Para cada nivel que no se cumple obtienes el color de texto o de fondo más próximo que lo alcanza, conservando tono y saturación.
Puntuación APCA
El contraste de luminosidad (Lc) del método perceptual más reciente, con orientación sobre los tamaños de texto para los que sirve.
Simulación de la visión del color
El par tal como se ve con protanopía, deuteranopía, tritanopía y sin visión del color, cada uno con el ratio que le queda.
Texto transparente
Un color de texto con alfa se mezcla primero con el fondo, exactamente como lo dibuja el navegador.
Vista previa realista
Texto grande y de párrafo, un botón relleno, un botón con borde e iconos en tus dos colores.
Enlace para compartir
Copia un enlace que abre la herramienta con el mismo contenido. Los datos van en la parte de la dirección posterior a #, que los navegadores no envían a los servidores.
Privado por diseño
Todo funciona en tu navegador. Lo que escribes o abres no se envía a ningún servidor.
Qué significa el ratio de contraste
El ratio de contraste WCAG compara la luminancia relativa de dos colores en una escala que va de 1:1 (idénticos) a 21:1 (negro sobre blanco). Las Pautas de Accesibilidad para el Contenido Web exigen como mínimo 4,5:1 para el texto normal y 3:1 para el texto grande en el nivel AA, que es el nivel al que remite la mayoría de las leyes: la jurisprudencia de la ADA en Estados Unidos, la Sección 508 y la Ley Europea de Accesibilidad a través de la norma EN 301 549.
Por texto grande se entiende el de al menos 24 px, o 18,66 px (14 pt) si va en negrita. El nivel AAA sube el listón a 7:1 y 4,5:1. Desde WCAG 2.1, los componentes de la interfaz y los gráficos con significado (bordes de campos, iconos, líneas de gráficos, indicadores de foco) también necesitan 3:1 respecto a lo que los rodea. Los logotipos, los elementos decorativos y los controles desactivados quedan exentos.
El ratio es un modelo sencillo y tiene puntos ciegos conocidos: sobrevalora los pares de colores oscuros y no tiene en cuenta el grosor de la letra. APCA, un método candidato para la futura WCAG 3, modela la percepción con más fidelidad y depende de cuál de los dos colores es el del texto. Aquí se muestra como orientación adicional. Para cumplir la normativa hoy, lo que cuenta es el ratio de WCAG 2; y un buen contraste ayuda a todo el mundo, no solo a ese hombre de cada 12, aproximadamente, que tiene alguna deficiencia en la visión del color: piensa en la pantalla de un móvil a pleno sol.
Requisitos de contraste de WCAG 2.2
| Contenido | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal (menos de 24 px, o de 18,66 px en negrita) | 4,5:1 | 7:1 |
| Texto grande (24 px o más, o 18,66 px o más en negrita) | 3:1 | 4,5:1 |
| Iconos, bordes de campos, componentes de interfaz | 3:1 | no definido |
| Logotipos y elementos puramente decorativos | sin requisito | sin requisito |
Consejos
- Pasa antes un color a HEX, RGB u OKLCH con el Conversor de colores.
- Revisa una paleta entera, par a par, en la cuadrícula de contraste del Generador de paletas.
- Toma los colores reales de una captura de pantalla con el Selector de píxeles.
- No te fíes solo del color: los enlaces dentro de un texto deberían ir además subrayados, y los estados de error necesitan un icono o un mensaje además del rojo.
Preguntas frecuentes
¿No encuentras tu respuesta? Escríbenos: respondemos rápido.
¿Qué ratio de contraste necesito para WCAG AA?
Al menos 4,5:1 para el texto normal y 3:1 para el texto grande (24 px, o 18,66 px en negrita). Los iconos y los componentes de interfaz, como los bordes de los campos, también necesitan 3:1.
¿Qué se considera texto grande?
El texto de al menos 18 pt (24 px), o de al menos 14 pt (unos 18,66 px) si va en negrita. Todo lo que sea más pequeño es texto normal.
¿Basta con un ratio de 4,49:1?
No. Los umbrales son exactos, así que 4,49:1 no cumple AA para texto normal. Este comprobador nunca redondea un ratio al alza, para evitar falsos aprobados.
¿Qué es APCA?
El Accessible Perceptual Contrast Algorithm, un método más reciente que se está evaluando para WCAG 3. Da un valor de contraste de luminosidad (Lc) que refleja mejor la legibilidad, sobre todo en temas oscuros. Todavía no es un estándar legal.
¿Cómo corrijo un par de colores que no cumple?
Oscurece el color más oscuro o aclara el más claro. Las sugerencias muestran el menor cambio de luminosidad que alcanza AA o AAA manteniendo el tono, y se aplican con un clic.
¿Se envían mis datos a un servidor?
No. La herramienta funciona por completo en tu navegador. Lo que introduces no se sube, no se registra y no se guarda en nuestros servidores.
Más herramientas gratuitas para desarrolladores
Codifica, formatea, prueba, convierte y genera: pequeñas herramientas que funcionan en tu navegador y dejan tus datos en tu dispositivo.