InicioHerramientasComprobador de contraste
Comprobador de contraste de color WCAG 2.2 y APCA
Introduce el color del texto y del fondo en HEX, RGB o HSL. Obtendrás la relación de contraste WCAG 2.2 con el resultado para AA, AAA, texto grande y componentes de interfaz, el contraste de luminosidad APCA del borrador de WCAG 3, una vista previa de texto, botones y un tooltip, y el color más cercano que cumple si el tuyo no lo hace.
—
Titular grande, 24 px
Texto de 16 px. Léelo con el móvil al aire libre y con el brazo estirado: si te cuesta a ti, también les costará a tus usuarios.
Letra pequeña, 13 px: los pies de foto y las ayudas son donde más falla el contraste.
Resultados
Fórmula. Contraste = (Lclaro + 0,05) / (Loscuro + 0,05), donde L = 0,2126·R + 0,7152·G + 0,0722·B del sRGB linealizado. El valor nunca se redondea hacia arriba: 4,48:1 no cumple 4,5:1.
Todo se calcula en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo usarla
- Introduce dos coloresEscribe o pega los colores del texto y del fondo en cualquier formato CSS, o elígelos con el selector. Intercámbialos para comprobar texto claro sobre fondo oscuro.
- Lee los resultadosLa relación de contraste se compara con todos los umbrales de WCAG 2.2: texto normal y grande en AA y AAA, y 3:1 para componentes de interfaz. APCA Lc aparece al lado como segunda opinión.
- Mira la vista previaTexto, un botón, un enlace, el borde de un campo y un tooltip se dibujan con tus colores: son las combinaciones que más fallan en interfaces reales.
- Toma el color más cercanoElige el objetivo y si quieres cambiar el texto o el fondo. La herramienta conserva el tono y mueve la luminosidad hasta que la pareja cumple; luego puedes aplicar o copiar el HEX.
Cómo se calcula la relación de contraste WCAG
WCAG 2.x compara la luminancia relativa de dos colores: lo claro que parece cada uno al ojo en una escala de 0 (negro) a 1 (blanco). Cada canal sRGB se convierte primero de su valor 0–255 a luz lineal y después los canales se ponderan según la sensibilidad del ojo: el verde es el que más aporta y el azul, el que menos.
El resultado va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). El término 0,05 modela la luz ambiente que se refleja en la pantalla, así que las parejas muy oscuras nunca llegan a un contraste infinito.
Ejemplo. Gris #777777 sobre blanco: 119 / 255 = 0,4667, que linealizado da 0,1845, así que L = 0,1845. El blanco tiene L = 1. Contraste = 1,05 / 0,2345 = 4,48:1. No cumple AA para texto normal, porque 4,48 es menor que 4,5 y WCAG no permite redondear. El gris más claro que cumple sobre blanco es #767676, con 4,54:1.
Umbrales de WCAG 2.2
- 1.4.3 Contraste (mínimo), nivel AA: 4,5:1 para texto normal y 3:1 para texto grande.
- 1.4.6 Contraste (mejorado), nivel AAA: 7:1 para texto normal y 4,5:1 para texto grande.
- 1.4.11 Contraste de elementos no textuales, nivel AA: 3:1 para las partes visuales necesarias para identificar componentes de interfaz y sus estados: bordes de campos, indicadores de foco, contornos de casillas, iconos con significado, líneas de gráficos.
Texto grande significa al menos 18 puntos (24 píxeles CSS) en peso normal o 14 puntos (unos 18,66 px) en negrita. Los logotipos, el texto puramente decorativo y los controles deshabilitados quedan exentos. Los umbrales no cambiaron entre WCAG 2.0, 2.1 y 2.2; la norma europea EN 301 549, que en España recoge la normativa de accesibilidad web del sector público, remite al mismo nivel AA.
APCA: el método de contraste propuesto para WCAG 3
La fórmula de WCAG 2 es sencilla, pero tiene puntos débiles conocidos: considera igual de legible una pareja sea cual sea el color del texto, sobrestima el contraste de las combinaciones oscuras y no tiene en cuenta el tamaño ni el peso de la fuente. El Accessible Perceptual Contrast Algorithm (APCA), desarrollado por Andrew Somers para el grupo de trabajo de W3C, modela mejor la percepción de la luminosidad y devuelve un valor de contraste de luminosidad, Lc, de aproximadamente −108 a +106.
El signo indica la polaridad: positivo para texto oscuro sobre fondo claro y negativo para texto claro sobre oscuro. El mismo gris #888 da Lc 63,1 como texto sobre blanco, pero Lc −68,5 como etiqueta blanca sobre #888: según APCA, la etiqueta blanca se lee mejor. WCAG 2 no puede expresarlo, porque da 3,54:1 en ambos casos.
Guía aproximada de niveles Lc en el modo simplificado «Bronze»: 90 recomendado para texto de lectura, 75 mínimo para texto de lectura, 60 para otro texto de contenido, 45 para titulares grandes, 30 para placeholders y elementos no textuales, 15 solo para separadores.
Importante: APCA forma parte del borrador de trabajo de WCAG 3, que no es un estándar terminado, y sus umbrales pueden cambiar. Los requisitos legales y de contratación actuales remiten a WCAG 2.x. Usa la relación de WCAG 2.2 para decidir si cumple o no, y APCA para elegir entre dos opciones que ya cumplen o para detectar parejas del modo oscuro que WCAG 2 deja pasar.
Cómo corregir un contraste bajo sin perder el color de marca
Lo habitual es cambiar la luminosidad, no el tono. Las sugerencias de arriba trabajan en el espacio de color OKLCH: mantienen el tono y el croma, mueven la luminosidad perceptual paso a paso, devuelven el color al gamut sRGB y comprueban que el HEX redondeado sigue cumpliendo. La opción más próxima a la luminosidad original se marca como la más cercana.
- Reserva el color de marca para superficies grandes y botones y usa un tono más oscuro del mismo matiz para textos y enlaces. Un rojo de marca con 3,9:1 sobre blanco puede seguir siendo el fondo de un botón con texto blanco en negrita si esa pareja alcanza el umbral de texto grande, pero compruébalo.
- Revisa todos los estados: hover, foco, deshabilitado, visitado y error. Los placeholders y los textos de ayuda son los fallos más frecuentes en formularios.
- Revisa los dos temas. Una paleta que cumple en modo claro a menudo falla en modo oscuro, donde APCA resulta especialmente útil.
- El texto sobre imágenes y degradados debe cumplir en su punto más claro. Añade un fondo sólido o semitransparente detrás del texto en lugar de confiar en una sombra.
- Los tooltips y las pistas de onboarding suelen diseñarse con un tono claro de marca y texto gris. Se leen deprisa y sobre la marcha, así que apunta a 4,5:1 o más incluso en textos cortos.
Para construir una escala completa de tintes y sombras con el contraste conocido de cada paso, usa el generador de paletas accesibles.
Fuentes
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 2023 — criterios 1.4.3, 1.4.6 y 1.4.11; definiciones de luminancia relativa y relación de contraste.
- W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum) — justificación de 4,5:1 y 3:1, definición de texto grande.
- Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 versión 0.0.98G-4g, Myndex Research — constantes y valores de referencia usados por la herramienta.
- W3C. W3C Accessibility Guidelines (WCAG) 3.0, Working Draft — estado del método de contraste visual.
- ETSI. EN 301 549 V3.2.1 (2021-03). Accessibility requirements for ICT products and services.
- Ottosson B. A perceptual color space for image processing, 2020 — OKLab, usado para ajustar la luminosidad.
Preguntas frecuentes
¿Qué relación de contraste exige WCAG?
Para el nivel AA, WCAG 2.2 exige al menos 4,5:1 entre el texto normal y su fondo, 3:1 para texto grande (24 px, o unos 18,66 px en negrita) y 3:1 para componentes de interfaz y gráficos con significado. El nivel AAA eleva los requisitos del texto a 7:1 y 4,5:1.
¿Un contraste de 4,48:1 basta para cumplir 4,5:1?
No. Los umbrales de WCAG son exactos y la relación no se puede redondear hacia arriba. #777777 sobre blanco da 4,48:1 y no cumple AA para texto normal; #767676 da 4,54:1 y sí cumple.
¿Qué es APCA y debo usarlo en lugar de WCAG 2?
APCA es el método de contraste perceptual del borrador de WCAG 3. Tiene en cuenta la polaridad del texto y da un valor Lc cuyos requisitos dependen del tamaño y el peso de la fuente. Todavía no es un estándar, así que la conformidad se sigue midiendo con la relación de WCAG 2.2; APCA es una segunda comprobación útil, sobre todo en temas oscuros.
¿El contraste importa en iconos, bordes e indicadores de foco?
Sí. El criterio 1.4.11 exige 3:1 frente a los colores adyacentes para las partes de un componente necesarias para identificarlo o conocer su estado: bordes de campos, contornos de casillas, iconos con significado e indicadores de foco. Los elementos decorativos y los controles deshabilitados quedan exentos.
¿Cómo se calcula el contraste de un texto semitransparente?
Primero se mezcla el color del texto con el fondo según su opacidad y después se compara el color sólido resultante. Este comprobador lo hace automáticamente y muestra el HEX mezclado en el resultado.
¿Los botones deshabilitados y los placeholders deben cumplir el contraste?
Los componentes deshabilitados están exentos en WCAG 2.2. Los placeholders no: si transmiten información, necesitan 4,5:1. Muchos formularios fallan aquí, así que es más seguro poner la ayuda en una etiqueta visible o en un texto bajo el campo.
¿Cómo encuentro un color que cumpla sin cambiar mi marca?
Conserva el tono y cambia solo la luminosidad. Las sugerencias de esta herramienta hacen exactamente eso en el espacio OKLCH y muestran la opción más oscura y la más clara para el texto o el fondo, con el contraste resultante.
Más en Diseño de producto
- Generador de paletas accesibles
¿Cómo obtener una paleta accesible con el contraste comprobado en cada tono?
- Generador de escala tipográfica
¿Qué tamaños de fuente forman una escala tipográfica coherente y fluida?
- Tiempo de lectura de tooltips y tours
¿Tienen los usuarios tiempo de leer un tooltip o un paso del tour?
- Revisor de textos de tooltips
¿Es este tooltip breve, claro y orientado a la acción?
- Calculadora SUS
¿Qué puntuación SUS tiene la interfaz y es buena su usabilidad?