Comprobador de contraste de colores
Prueba el texto y el fondo
Este comprobador gratis de contraste de colores te da la ratio WCAG de dos colores mientras escribes. Muestra cada resultado AA y AAA y, después, ofrece el color más cercano que aprueba. Además, ves el par como lo ven las personas con daltonismo.
- GratisPrecio
- WCAG 2.2 AA y AAANorma
- Hasta 12 coloresCuadrícula de paleta
- NingunoRegistro
Comprobador de contraste de colores
Ratio WCAG 2, AA y AAA, con arreglos y vista de daltonismo
Escribe hex, rgb(), hsl() o un nombre de color CSS. Un color de texto semitransparente, como #00000080, se mezcla primero con el fondo.
5.82:1
Aprueba AA para todo el texto. No llega a AAA para texto normal.
- Texto normal AA (4.5:1)Correcto
- Texto normal AAA (7:1)No aprueba
- Texto grande AA (3:1)Correcto
- Texto grande AAA (4.5:1)Correcto
- Iconos y bordes (3:1)Correcto
El texto normal de 16px se lee como este párrafo.
Texto grande de 24px
El texto en negrita de 19px cuenta como grande
Botón
Lectura APCA (borrador de WCAG 3): Lc 78.5sirve para texto de 18px o más
Colores más cercanos que aprueban
Este par ya aprueba AAA, así que no hay nada que arreglar.
| Visión | Vista previa | Proporción |
|---|---|---|
| Protanopía (sin conos rojos) | Aa | 5.01:1 |
| Deuteranopía (sin conos verdes) | Aa | 6.05:1 |
| Tritanopía (sin conos azules) | Aa | 4.96:1 |
| Acromatopsia (sin ningún color) | Aa | 5.82:1 |
Las filas son el color del texto y las columnas, el fondo. AAA significa 7:1, AA significa 4.5:1 y AA+ significa 3:1, que solo basta para texto grande.
Listo. Cambia cualquiera de los dos colores y el resultado se actualiza al escribir.
Qué te dice este comprobador de contraste de colores
El contraste es la diferencia de brillo entre dos colores. Cuando la diferencia es pequeña, las palabras se pierden en la página. Por eso, a quien tiene baja visión, a quien usa el móvil al sol y a cualquiera con la vista cansada le cuesta leerlas.
Esta herramienta mide el contraste de colores igual que las Pautas de Accesibilidad para el Contenido Web. Primero, escribes o eliges un color de texto y un color de fondo. Luego, la herramienta calcula la ratio, desde 1:1 para dos colores iguales hasta 21:1 para negro sobre blanco. Por último, indica qué niveles WCAG aprueba el par.
Las reglas vienen del criterio de contraste de WCAG 2.2. El texto normal necesita 4.5:1 para el nivel AA, mientras que el texto grande necesita 3:1. Además, los iconos, los bordes y los campos de formulario necesitan 3:1 frente a lo que tienen al lado.
Todo se ejecuta en la pestaña de tu navegador. Así que los colores que pruebas nunca llegan a nuestro servidor, y puedes revisar una paleta de marca antes de publicarla.
Cómo se calcula la ratio de contraste
Primero, cada color se convierte en una luminancia relativa, un número de 0 para el negro a 1 para el blanco. La fórmula da más peso al verde y menos al azul, porque nuestros ojos reaccionan mucho más a la luz verde que a la azul.
Después, la herramienta suma 0.05 a los dos valores y divide el más claro entre el más oscuro. Eso da la ratio de contraste. Además, el orden de los colores no la cambia, así que intercambiarlos da el mismo número.
Nuestro comprobador de contraste de colores nunca redondea una ratio hacia arriba. Un par de 4.499:1 aparece como 4.49:1 y no aprueba, porque WCAG trata los umbrales como líneas exactas.
AA, AAA y texto grande en palabras sencillas
El nivel AA es el objetivo que citan la mayoría de leyes y contratos. El texto normal necesita 4.5:1 y el texto grande, 3:1. En cambio, el nivel AAA es más estricto: 7:1 para texto normal y 4.5:1 para texto grande.
Grande significa al menos 24px, o al menos 18.66px si el texto va en negrita. Esas cifras vienen de los tipos de 18 y 14 puntos. Por eso, un párrafo de 16px siempre cuenta como texto normal, aunque tenga estilo de título.
La herramienta muestra los cinco resultados a la vez, cada uno con su etiqueta de aprobado o suspenso. Por lo tanto, ves de un vistazo si un color sirve solo para un titular grande o también para el texto.
Colores más cercanos que aprueban
Un resultado de suspenso es solo media respuesta. Por eso, la herramienta también busca el color más cercano que aprobaría, para AA y para AAA. Mantiene el tono y la saturación, y solo mueve la luminosidad.
Recibes dos tipos de arreglo. Uno cambia el color del texto y el otro cambia el fondo. Por ejemplo, el gris #777777 sobre blanco suspende con 4.47:1, mientras que #767676 aprueba con 4.54:1. Con un clic aplicas el arreglo y todos los resultados se actualizan.
Daltonismo y lectura APCA
Una tabla bajo el resultado muestra tu par con cuatro tipos de daltonismo: sin conos rojos, verdes o azules, y sin color. Cada fila tiene su propia ratio. El rojo sobre verde es la trampa clásica, ya que ambos colores pueden parecer el mismo marrón.
La herramienta también da una lectura APCA, el método del borrador de WCAG 3. Su número Lc tiene en cuenta qué color va encima, así que blanco sobre negro y negro sobre blanco puntúan distinto. Sin embargo, APCA aún es un borrador, así que tómalo como segunda opinión y usa WCAG 2 para aprobar.
Una cuadrícula para sistemas de diseño completos
La mayoría de equipos eligen de una paleta, no de dos colores. Por eso, el segundo panel acepta hasta 12 colores, uno por línea, y prueba todos los pares a la vez.
Las filas son el color del texto y las columnas, el fondo. Cada celda muestra una muestra pequeña, la ratio y una nota: AAA, AA, AA+ solo para texto grande, o un guion si suspende. Así, sabes qué pares sirven para el texto antes de construir una página.
En esta página
- La herramienta
- Qué te dice este comprobador de contraste de colores
- Cómo usar el comprobador de contraste de colores, paso a paso
- Por qué usar este comprobador de contraste WCAG
- Las líneas de contraste que marca WCAG
- Errores de contraste que suspenden una auditoría
- Preguntas frecuentes sobre el contraste de colores
- Más herramientas gratis de color y diseño
Sigue leyendo
Mira el comprobador de contraste de colores en acción, de principio a fin
En este vídeo breve ves la herramienta del primer al último clic. Escoge tu idioma justo debajo y pon los subtítulos si te ayudan.
Cómo usar el comprobador de contraste de colores, paso a paso
Cinco pasos rápidos te llevan de dos colores a un par listo para publicar.
Escribe el color del texto
Escribe un código hex, rgb(), hsl() o un nombre de color, o haz clic en la muestra para elegirlo.
Escribe el fondo
Añade el color que va detrás del texto. En Chrome y Edge, Tomar de la pantalla captura cualquier píxel.
Lee la ratio
El número grande y las cinco etiquetas muestran qué aprueba el par. Además, la vista previa lo enseña en tres tamaños.
Aplica un arreglo
Si el par suspende, haz clic en uno de los colores cercanos que aprueban. Luego revisa otra vez la vista previa.
Guarda el resultado
Copia el CSS, copia un enlace al par o descarga un informe breve para tus notas.
Por qué usar este comprobador de contraste WCAG
Una ratio sola dice menos de lo que necesitas. Por eso, estos tres extras cubren lo que falta.
Sugiere el arreglo
No tienes que adivinar un tono más oscuro. La herramienta encuentra el color más cercano que aprueba para los dos lados del par.
Trata los colores semitransparentes
Un color de texto con opacidad, como #00000080, se mezcla primero con su fondo. Así que la ratio coincide con lo que muestra la pantalla.
Revisa una paleta entera
Pega hasta 12 colores y cada par recibe una nota. De este modo, una tarde de pruebas sueltas se convierte en un clic.
Las líneas de contraste que marca WCAG
Tres números cubren casi todos los casos de una página web.
- 4.5:1 para texto normal Es el nivel AA para el texto, los enlaces, las etiquetas y el texto de ejemplo. AAA, en cambio, pide 7:1.
- 3:1 para texto grande El texto de 24px, o de 18.66px en negrita, aprueba AA con 3:1. Para texto grande, AAA pide 4.5:1.
- 3:1 para iconos y bordes Desde WCAG 2.1, los bordes de campos, los anillos de foco y los iconos con significado necesitan 3:1 frente a lo que tienen al lado.
Errores de contraste que suspenden una auditoría
Cada uno pasa una mirada rápida y aun así suspende una prueba real.
Texto de ejemplo gris claro
El texto de ejemplo de un campo también es texto, así que necesita 4.5:1. Sin embargo, el gris pálido de muchas plantillas suspende.
Texto sobre una foto
Una foto tiene zonas claras y oscuras. Por eso, prueba el texto contra la zona más clara que cubre, o añade una capa sólida.
Confiar solo en el color
Un error en rojo sin icono ni palabra falla a quien no ve el rojo. Por eso, acompaña el color con una etiqueta.
Olvidar el hover y el foco
Un enlace puede aprobar en reposo y suspender al pasar el ratón. Así que revisa cada estado, también el anillo de foco.
Redondear la ratio hacia arriba
Algunas herramientas muestran 4.5 para un par de 4.48. Sin embargo, WCAG no redondea, así que ese par suspende.
Revisar solo el tema claro
Un azul de marca que aprueba sobre blanco puede suspender sobre un fondo oscuro. Por eso, prueba los dos temas.
Preguntas frecuentes sobre el contraste de colores
¿Qué ratio de contraste es buena para el texto?
Busca al menos 4.5:1 para el texto normal, que es el nivel AA de WCAG. Para lecturas largas, en cambio, 7:1 o más es mejor, y eso es el nivel AAA.
¿Este comprobador de contraste es gratis?
Sí. Es gratis, no pide cuenta y no tiene límite de pares por probar.
¿Envía mis colores a algún sitio?
No. Toda la comprobación se hace en la pestaña de tu navegador, así que tus colores nunca llegan a nuestro servidor.
¿Un colour contrast checker es la misma herramienta?
Sí. Colour es la forma británica de escribir color en inglés, así que hace exactamente el mismo trabajo que esta página.
¿Qué cuenta como texto grande?
El texto de al menos 24px, o de al menos 18.66px si está en negrita. Esos tamaños equivalen a 18 y 14 puntos.
¿Qué formatos puedo escribir?
Hex con 3, 4, 6 u 8 dígitos, rgb(), rgba(), hsl(), hsla() y los nombres de color de CSS, como navy o tomato.
¿Cómo trata la transparencia?
Primero, un color de texto semitransparente se mezcla con el fondo antes de comprobarlo. Del mismo modo, un fondo semitransparente se mezcla antes con blanco.
¿Por qué muestra 4.49 y no 4.5?
La ratio se corta a dos decimales y nunca se redondea hacia arriba. Por eso, un par justo debajo de la línea muestra un número debajo de la línea y no aprueba.
¿Cambia la ratio si intercambio los colores?
No. La ratio WCAG es la misma en ambos sentidos. Sin embargo, la vista previa y la lectura APCA sí cambian, porque APCA tiene en cuenta qué color va encima.
¿Qué es APCA?
APCA es el método de contraste del borrador de WCAG 3. Da una puntuación Lc que depende del tamaño del texto y de qué color va encima.
¿Sigo APCA o WCAG 2?
Sigue WCAG 2 para cumplir hoy, porque las leyes y las auditorías se basan en ella. Usa APCA solo como pista extra, ya que todavía es un borrador.
¿Los iconos y los botones también necesitan contraste?
Sí. WCAG 2.1 añadió una regla de 3:1 para iconos, bordes de campos, anillos de foco y otras partes que la gente necesita ver.
¿Un botón desactivado tiene que aprobar?
No. WCAG excluye los controles inactivos. Aun así, mantenlos legibles, porque la gente necesita saber que el control existe.
¿Y los logotipos y el texto decorativo?
Los logotipos y la pura decoración están exentos. En cambio, cualquier texto con significado, incluso la letra pequeña, debe aprobar.
¿Cómo funcionan los arreglos sugeridos?
La herramienta mantiene el tono y la saturación y solo mueve la luminosidad. Después elige el paso más cercano que alcanza AA o AAA.
¿Puedo tomar un color de mi pantalla?
Sí, en Chrome y Edge. El botón Tomar de la pantalla usa el cuentagotas del navegador. En otros navegadores, usa la muestra o escribe un código.
¿Qué muestra la tabla de daltonismo?
Muestra el par como lo ven las personas sin conos rojos, verdes o azules, y también sin visión del color. Además, cada fila tiene su propia ratio.
¿Qué tan común es el daltonismo?
Cerca de 1 de cada 12 hombres y 1 de cada 200 mujeres tienen algún tipo de deficiencia en la visión del color. La confusión entre rojo y verde es la más común.
¿Puedo probar una paleta entera?
Sí. Pega hasta 12 colores en el panel de paleta, uno por línea, y pulsa Comprobar todos los pares para obtener una cuadrícula con notas.
¿Cómo pruebo texto sobre un degradado o una foto?
Elige el punto más claro detrás de un texto claro, o el más oscuro detrás de un texto oscuro. Si el peor punto aprueba, el resto también.
¿El contraste WCAG es obligatorio por ley?
En muchos lugares, sí. La Sección 508 de EE. UU. y la norma europea EN 301 549 remiten al nivel AA de WCAG, y los tribunales suelen mirarlo bajo la ADA.
¿WCAG 2.2 cambió las reglas de contraste?
No. WCAG 2.2 mantuvo los mismos números de contraste que WCAG 2.1, así que un par que aprobaba antes sigue aprobando.
¿Por qué otras herramientas dan un número algo distinto?
Algunas redondean a un decimal y otras usan un corte antiguo en la fórmula. La diferencia es mínima, pero puede cambiar el resultado de un par justo en la línea.
¿Puedo compartir un resultado?
Sí. Copiar enlace a este par te da una dirección que abre esta página con los mismos dos colores ya puestos.
¿Esto sustituye a una auditoría de accesibilidad completa?
No. Este comprobador WCAG solo revisa el color. Por el contrario, una auditoría completa también revisa el teclado, los encabezados, el texto alternativo y mucho más.
Más herramientas gratis de color y diseño
Úsalas junto al comprobador de contraste de colores para crear y probar una paleta.
- Selector de códigos de color
Convierte un color entre hex, RGB, HSL y CMYK.
- Generador de esquemas de color
Consigue seis armonías a partir de un color.
- Comprobador de texto alternativo
Encuentra imágenes sin texto alternativo o con uno débil.
- Comprobador de legibilidad
Mira lo fácil que es leer tu texto.
Comprueba el contraste de colores ahora
Escribe dos colores y verás la ratio, el resultado WCAG y el arreglo más cercano en segundos. Además, no necesitas cuenta.