Comprobador de contraste de color: ratio WCAG AA/AAA y APCA
Comprueba los colores de texto y fondo con WCAG 2.x AA y AAA, consulta el valor Lc de APCA y obtén el color más cercano que cumple.
Texto grande, 24px (18pt) normal
Texto grande en negrita, 18.67px (14pt) negrita
Texto de párrafo normal a 16px. El veloz murciélago hindú comía feliz cardillo y kiwi. Los párrafos largos necesitan más contraste que los titulares, porque los trazos finos a tamaños pequeños se emborronan.
Letra pequeña a 13px, el tamaño de los pies de foto y de página.
Colores más cercanos que cumplen
Solo cambia la luminosidad (en OKLCH), así que el tono se mantiene. Aplica uno o cópialo.
#7676764.54:1#0606064.52:1#5959597.00:1Se calcula en tu navegador. Nada de lo que introduces se nos envía ni se guarda. Ver todas las herramientas gratis.
¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.
Este comprobador de contraste de color gratis te dice si un texto es legible sobre su fondo según WCAG 2.x, el estándar en el que se basan la ADA, la Ley Europea de Accesibilidad y la mayoría de las auditorías de accesibilidad. Introduce un color de texto y un color de fondo, con el selector, un código HEX o el cuentagotas de pantalla, y verás el ratio de contraste con el resultado de AA y AAA para texto normal y grande y para componentes de interfaz como los bordes de los botones y los iconos.
Cuando una combinación no cumple, el comprobador sugiere el color de texto o de fondo más cercano que sí lo hace, ajustando solo la luminosidad en OKLCH para que el tono de tu marca no cambie. También muestra el valor Lc de APCA, el método más reciente del borrador de trabajo de WCAG 3, que modela cómo se percibe realmente el contraste y valora mejor el modo oscuro y las fuentes finas. WCAG 3 todavía no es un estándar, así que para el cumplimiento normativo la cifra que cuenta es el ratio de WCAG 2.x, y la página explica en qué discrepan los dos.
Cómo usarla
- Introduce el color del texto y el color del fondo: usa los selectores, escribe códigos HEX (#777 o #777777) o haz clic en el icono del ojo para tomar el color de cualquier píxel de la pantalla (Chrome y Edge).
- Lee el ratio de contraste y los cinco resultados. El texto de párrafo necesita AA normal (4.5:1); los títulos de 24px, o de 18.66px en negrita, necesitan AA grande (3:1).
- Mira en la vista previa cómo queda de verdad la combinación en tamaño de párrafo, grande y de pie de foto.
- Si una comprobación falla, aplica un color sugerido de Colores más cercanos que cumplen, que solo cambian la luminosidad.
- Usa Intercambiar para probar a la inversa (por ejemplo, una versión en modo oscuro) y copia el resultado o el CSS.
Preguntas frecuentes
¿Qué ratio de contraste exige WCAG?
El nivel AA de WCAG 2.1 y 2.2 exige al menos 4.5:1 para el texto normal y 3:1 para el texto grande (criterio de conformidad 1.4.3), y 3:1 para los componentes de interfaz y los gráficos con significado, como los bordes de los campos, los anillos de foco y los iconos (1.4.11). El nivel AAA sube el texto a 7:1 para el normal y a 4.5:1 para el grande (1.4.6). Los logotipos y los elementos puramente decorativos o deshabilitados están exentos.
¿Qué se considera texto grande en WCAG?
Al menos 18 puntos en normal o 14 puntos en negrita. En píxeles CSS son 24px en normal o unos 18.66px en negrita, porque un punto equivale a 1.333 píxeles. Un título de 16px en negrita no es texto grande, y tampoco lo es uno de 20px en normal. Las fuentes finas o decorativas pueden quedarse cortas en la práctica incluso con esos tamaños, que es uno de los problemas que APCA pretende resolver.
¿Es accesible #777777 sobre blanco?
No para el texto de párrafo. #777777 sobre #ffffff tiene un ratio de contraste de 4.48:1, justo por debajo del umbral AA de 4.5:1, así que no cumple AA para texto normal y solo cumple para texto grande y componentes de interfaz. WCAG no permite redondear hacia arriba, así que 4.48 no cumple. El gris más claro que cumple AA sobre blanco es #767676 (4.54:1); para AAA, #595959 (7.00:1).
¿Qué es APCA y debería usarlo en lugar de WCAG 2?
APCA (Accessible Perceptual Contrast Algorithm) es el método de contraste propuesto para WCAG 3. En lugar de un ratio da un valor de contraste de luminosidad, Lc, de aproximadamente -108 a 106, cuyo signo indica la polaridad (negativo significa texto claro sobre fondo oscuro). Tiene en cuenta que el mismo ratio se lee de forma distinta según la polaridad y lo oscuros que sean los colores, y por eso WCAG 2 sobrevalora las combinaciones oscuro sobre oscuro e infravalora algunas de blanco sobre color. Úsalo para tomar mejores decisiones de diseño, pero informa de WCAG 2.x para el cumplimiento normativo: WCAG 3 es un borrador de trabajo y su método de contraste aún puede cambiar.
¿Cómo se calcula el ratio de contraste?
La luminancia relativa de cada color se calcula convirtiendo sus canales sRGB a luz lineal y ponderándolos con 0.2126 para el rojo, 0.7152 para el verde y 0.0722 para el azul, la sensibilidad del ojo a cada uno. El ratio es (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro. Va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). El término 0.05 modela la luz ambiental que se refleja en la pantalla.
¿Cómo arreglo un color que no cumple el contraste?
Cambia la luminosidad, no el tono. Oscurece el texto o aclara el fondo (o al revés en modo oscuro) hasta que el ratio cumpla. Las sugerencias de esta página hacen exactamente eso en el espacio de color OKLCH, así que un azul de marca que no cumple se convierte en un azul más oscuro y no en otro color. Si ninguna de las dos direcciones alcanza el objetivo, algo que pasa cuando el otro color es un tono medio, cambia el otro color: con un fondo gris medio no se llega a 7:1 con ningún color de texto.
Requisitos de contraste de WCAG 2.x de un vistazo
• Texto normal, AA (1.4.3): 4.5:1. Se aplica al texto de párrafo, las etiquetas, los enlaces, el texto de marcador de posición que transmite información y el texto dentro de imágenes.
• Texto grande, AA (1.4.3): 3:1. Texto de al menos 24px en normal o 18.66px en negrita.
• Componentes de interfaz y gráficos, AA (1.4.11): 3:1 frente a los colores adyacentes. Bordes de campos, contornos de casillas de verificación, indicadores de foco, iconos con significado, líneas de gráficos.
• Texto normal, AAA (1.4.6): 7:1. Texto grande, AAA: 4.5:1. Pocos sitios cumplen AAA en todas partes; merece la pena intentarlo en textos largos y para públicos de más edad.
• Exentos: logotipos y nombres de marca, controles deshabilitados, elementos puramente decorativos y texto incidental (por ejemplo, el que forma parte de una foto).
Dos errores aparecen en casi todas las auditorías. El texto de marcador de posición de los formularios suele ser gris claro y no llega a 4.5:1, y como a menudo es la única etiqueta, cuenta. Y los botones del color de la marca con texto blanco suelen quedarse entre 3 y 4.5, lo que solo cumple para texto grande, mientras que la etiqueta del botón tiene 14 o 16px.
Dónde discrepan WCAG 2 y APCA
La fórmula de WCAG 2 trata el contraste como algo simétrico y lineal en luminancia, y la visión no funciona así. En la práctica esto tiene dos consecuencias que aparecen constantemente.
Modo oscuro: el texto gris claro sobre un fondo casi negro suele cumplir WCAG 2 con holgura y, aun así, se ve duro o borroso, mientras que algunas combinaciones de tonos medios oscuros cumplen y cuestan de leer. APCA trata por separado el claro sobre oscuro (un Lc negativo) y es más estricto en el extremo oscuro.
Colores saturados: el texto blanco sobre naranja (#ff7a00) da unos 2.6:1 con WCAG 2 y no cumple, mientras que el texto negro sobre el mismo naranja sí cumple, y sin embargo muchos lectores encuentran la versión blanca igual de legible. APCA puntúa estos casos de forma más cercana a la percepción.
Niveles de APCA como regla general: Lc 90 es lo preferible para el texto de párrafo, Lc 75 es el mínimo para el texto de párrafo, Lc 60 para el resto del texto de contenido, Lc 45 para titulares grandes, Lc 30 para el texto de marcador de posición y deshabilitado, y Lc 15 para elementos que no son texto, como los separadores. La guía completa también depende del grosor y el tamaño de la fuente. Tómalo como una ayuda de diseño junto a WCAG 2, no como un sustituto de una comprobación de cumplimiento.
Herramientas gratis relacionadas
- Generador de paletas de colores — Pulsa la barra espaciadora para obtener una paleta nueva, bloquea los colores que te gusten, elige una armonía o saca la paleta de una foto. Exporta a CSS, Tailwind, SCSS, JSON o PNG.
- Selector y conversor de colores — Captura cualquier color de cualquier parte de tu pantalla o convierte al instante entre HEX, RGB y HSL.
- Generador de degradados CSS — Crea degradados lineales, radiales y cónicos con paradas de color arrastrables, un selector de ángulo y plantillas. Copia el CSS o una clase de Tailwind.
- Generador de box-shadow — Diseña efectos box-shadow y text-shadow en capas con vista previa en vivo y ajustes predefinidos de elevación, neumorfismo y resplandor, y copia el CSS.