WCAG Contrast Checker
WCAG Contrast Checker — se ejecuta en el navegador. No se guardan datos.
Contraste de color WCAG
Introduce los valores y pulsa Calcular.
Cómo usar
- Introduzca HEX de primer plano (texto) y HEX de fondo. Los valores predeterminados son #111111 y #ffffff.
- Pulse Calcular para una vista previa de frase de ejemplo, ratio de contraste y valoraciones de texto normal / texto grande.
- Para invertir los colores, pulse Intercambiar colores y calcule otra vez.
- Si una valoración falla, oscurezca o aclare un poco el HEX y calcule otra vez.
- Restablecer restaura el par predeterminado blanco y negro. Solo se admite HEX opaco.
Conceptos clave
La comprobación de contraste WCAG es una medida de accesibilidad web de cuánto destaca el texto de cuerpo y botones respecto al fondo. El ratio de contraste se calcula a partir de la luminancia relativa y se compara con WCAG 2.x. El texto normal es AA 4,5:1 y AAA 7:1; el texto grande (unos 18 pt o 14 pt en negrita) es AA 3:1 y AAA 4,5:1. Es un comprobador de contraste que muestra ratios WCAG 2 y AA/AAA de si el texto de cuerpo y botones se distingue del fondo. Es un comprobador para ver rápido el ratio de contraste y AA/AAA del color de cuerpo frente al HEX de fondo en una revisión de accesibilidad. No es una determinación legal final.
El resultado es un cálculo de referencia y no sustituye una auditoría final de accesibilidad ni la conformidad legal. Los colores semitransparentes con alfa, degradados y texto sobre imágenes pueden necesitar más que esta fórmula. El cálculo corre solo en el navegador. La fórmula de luminancia relativa asume HEX sRGB opaco. Superposiciones translúcidas y tipografía sobre fotos pueden diferir de la realidad. Los umbrales de texto grande y texto normal difieren, así que calcule por separado el color de título y el de cuerpo.
Ejemplo
Primer plano #111111 sobre fondo #ffffff da un ratio en torno a 19:1, cercano a AAA tanto en texto normal como grande. El gris claro #9ca3af sobre blanco suele fallar AA en texto normal. Intercambiar colores oscurece el fondo y cambia la impresión de la vista previa. Texto #2563eb sobre #ffffff puede caer en el rango medio y aprobar o fallar por poco el AA de texto normal. Pruebe un azul más oscuro. Texto #6b7280 sobre #f9fafb tiene un ratio bajo y a menudo falla en texto normal. Cambiar el texto a #111 se acerca a AAA.
Relacionado: Paleta de color · Conversor de color
Preguntas frecuentes
¿Cómo se aplica el umbral WCAG de texto grande?
Los criterios relajados 3:1 / 4,5:1 para 18 pt o 14 pt en negrita se muestran en el campo de texto grande. Ese campo es el umbral relajado para títulos y 18 pt en adelante. La hipótesis de 18 pt / 14 pt en negrita solo aplica al campo de texto grande.
¿Cuál es el ratio de contraste WCAG AAA?
7:1 o más para texto normal y 4,5:1 o más para texto grande. AA es 4,5:1 y 3:1 respectivamente. AAA es 7:1 para el cuerpo, así que los colores de marca pálidos suelen fallar. Los pasteles de marca a menudo no llegan a AAA.
¿Se puede usar HEX con canal alfa transparente para el contraste?
Solo se admite HEX opaco. La transparencia no se admite; introduzca el HEX final ya compuesto. Para translúcidos, componga primero y luego introduzca HEX.
¿Qué frase se usa en la vista previa de contraste?
Muestra el texto de ejemplo «Sample 가나다» con el mismo primer plano y fondo. La vista previa es una frase de muestra y puede diferir del tamaño real del componente.
¿Esta comprobación garantiza la conformidad legal de accesibilidad?
Es un cálculo de referencia. Haga una auditoría final por separado. No trate este número como un aprobado legal. No sustituya una lista de auditoría solo con este número.
¿Puedo intercambiar primer plano y fondo de una vez?
El botón Intercambiar colores cambia los dos valores HEX. Pulse Calcular otra vez. También puede comparar un par de modo oscuro con Intercambiar colores.
Última revisión: 2026-09-04