01
Identificar las capas visibles
Introduce HEX de tres o seis dígitos. La opacidad del texto va en un control aparte; un HEX de ocho dígitos se rechaza en lugar de perder su canal alfa.
Color & Accessibility
comprobador de contraste de colorpara texto legible
Introduce dos colores HEX y ajusta opacidad y tipografía para comparar cinco umbrales WCAG.
comprobador de contraste de color
Texto de muestra
Relación de contraste
4.48:1
Resultado del texto elegido: No cumple · AA · Umbral 4.5:1
Condición de texto normal · Primer plano compuesto: #777777
Texto normal AA · 4.5:1No cumple
Texto normal AAA · 7:1No cumple
Texto grande AA · 3:1Cumple
Texto grande AAA · 4.5:1No cumple
Interfaz/gráficos AA · 3:1Cumple
Vista previa de colores
Esta frase muestra el tamaño y los colores elegidos.
Colores sugeridos que cumplen
Ajustar primer plano
#767676 · 4.54:1
Ajustar fondo
#060606 · 4.52:1
El cálculo se realiza en tu navegador; los colores no se envían.
Condiciones del texto
El resultado está actualizado.
Un gris puede parecer legible en una maqueta y quedarse justo por debajo de AA sobre una tarjeta blanca. El comprobador de contraste de color detecta ese margen antes de publicar la interfaz.
Si necesitas un verificador de contraste para etiquetas pequeñas y títulos grandes, la condición tipográfica importa. Este comprobador de contraste de color mezcla primero el texto transparente con el fondo real.
Por qué usar este comprobador de contraste de color
El cálculo parte del color visible y ofrece dos maneras de corregir una pareja insuficiente.
Componer la transparencia antes de medir
El color de primer plano al 50 % se aclara sobre un fondo blanco. El comprobador de contraste de color muestra el HEX compuesto antes de calcular la luminancia, evitando evaluar el código original como si fuese opaco.
Comparar cambios en texto y fondo
Si falla el objetivo, aparecen una alternativa para el primer plano y otra para el fondo, cada una con su nueva relación. Ningún color de marca se sustituye hasta que lo previsualices y apliques.
Tres condiciones que cambian la interpretación
La relación numérica y el umbral aplicable son cosas distintas.
02
Indicar tamaño y negrita
WCAG considera grande el texto normal desde 24px o el texto en negrita desde unos 18,67px. La comprobación automática espera una breve pausa y puede desactivarse.
03
Comprobar sin redondeos engañosos
La cifra visible tiene dos decimales, pero el resultado usa el valor completo. Si cambias un dato, la copia y la aplicación de sugerencias esperan al cálculo actualizado.
Cinco lecturas de una misma pareja
Distingue texto normal, grande y gráficos útiles antes de elegir un objetivo.
Composición del primer plano
La transparencia entre 0 y 100 % se aplica sobre un fondo opaco y se muestra el HEX final. Así puedes revisar el contraste texto fondo que realmente aparece.
Umbral adecuado al tamaño
El texto normal necesita 4,5:1 para AA; el grande necesita 3:1. Un rótulo normal de 20px no entra en la categoría grande por parecerlo.
Resultados AA y AAA separados
Texto normal y grande tienen sus dos pruebas, además del AA para elementos gráficos significativos. Elegir AA o AAA cambia el veredicto destacado, no la relación.
Sugerencias con deshacer
El ajuste de luminosidad puede aplicarse al texto o al fondo. Cada candidato muestra su nueva relación y se puede deshacer después de aplicarlo.
Qué no demuestra esta relación
Una pareja aprobada no representa todas las capas ni todos los estados de una página.
- Solo fondo sólido y opaco
- Un fondo transparente necesita conocer la capa inferior; una imagen o un degradado cambia de un píxel a otro. No se puede resumir con estos dos HEX.
- Entrada HEX de tres o seis dígitos
- Se acepta con o sin #. Los nombres CSS, rgb(), hsl(), OKLCH y HEX de ocho dígitos no se convierten en silencio.
- Sin certificado de accesibilidad web
- La calculadora de contraste WCAG evalúa esta pareja y la condición de texto elegida. Teclado, foco, semántica y otros estados requieren más pruebas.
- APCA queda fuera
- El nivel AA/AAA procede de WCAG 2.x. APCA usa otra escala y no se mezcla en la misma tabla de aprobación.
Preguntas del comprobador de contraste de color
Respuestas sobre tamaños, niveles, transparencia y límites de una prueba local.
¿Cuál es el contraste mínimo para texto normal?
Para texto normal, AA exige 4,5:1 y AAA exige 7:1. El comprobador de contraste de color evalúa la cifra sin redondear aunque la muestre con dos decimales.
¿Qué se considera texto grande según WCAG?
Se considera grande desde 24px en peso normal o unos 18,67px en negrita. Para este caso AA exige 3:1 y AAA exige 4,5:1.
¿En qué se diferencian AA y AAA?
AA es el objetivo habitual con 4,5:1 para texto normal. AAA es más exigente: 7:1 para ese texto y 4,5:1 para el grande.
¿Cómo se calcula el contraste con colores transparentes?
Se mezcla el primer plano con el fondo opaco por canales antes de calcular la luminancia. Con opacidad cero, ambos colores coinciden y la relación es 1:1.
¿Superar el contraste garantiza que toda la página sea accesible?
No. Solo se evalúa esta pareja de colores en las condiciones elegidas. Aún hay que revisar navegación con teclado, foco, estructura y los demás colores.
¿Encontraste una pareja mal evaluada?
Usa el comprobador de contraste de color
Consulta este comprobador de contraste de color al revisar etiquetas pequeñas o colores de un sistema de diseño.
Copia la relación vigente o compara una sugerencia antes de aplicarla.
Cálculo local de una pareja según WCAG 2.x.