Cómo usar: Comprobador de contraste
- Introduce el color del texto y el color de fondo (HEX, rgb(), hsl(), oklch() o un nombre CSS), o usa los selectores de color.
- Lee el ratio de contraste y los resultados AA/AAA para texto normal, texto grande y componentes de interfaz.
- Revisa la vista previa en vivo: títulos, texto de cuerpo, letra pequeña, un botón y el borde de un campo.
- Si un nivel no se cumple, haz clic en Usar junto al color válido más cercano para aplicarlo y luego copia el nuevo HEX en tu CSS.
¿Qué es el ratio de contraste de color?
El ratio de contraste compara la luminancia relativa de dos colores en una escala de 1:1 (idénticos) a 21:1 (negro sobre blanco). Las Pautas de Accesibilidad para el Contenido Web (WCAG) lo usan para determinar si un texto es legible para personas con baja visión o con deficiencias en la percepción del color, y para cualquiera que lea el móvil con mucha luz. También es un referente legal: leyes de accesibilidad como el Acta Europea de Accesibilidad y la ADA se evalúan habitualmente según el nivel AA de WCAG 2.x.
Requisitos de contraste de WCAG 2.2
| Criterio | Nivel | Texto normal | Texto grande |
|---|---|---|---|
| 1.4.3 Contraste (mínimo) | AA | 4.5:1 | 3:1 |
| 1.4.6 Contraste (mejorado) | AAA | 7:1 | 4.5:1 |
| 1.4.11 Contraste de elementos no textuales | AA | 3:1 para los bordes de componentes de la interfaz, indicadores de foco e iconos o gráficos significativos | |
Texto grande significa al menos 18 pt (24 px) en regular o 14 pt (≈18.66 px) en negrita. Los logotipos, el texto puramente decorativo y el texto de los controles deshabilitados están exentos.
Cómo se calcula el ratio
Cada canal sRGB se linealiza (los valores ≤ 0.04045 se dividen entre 12.92; el resto usa ((c + 0.055) / 1.055)2.4) y después se combinan en la luminancia relativa: L = 0.2126 R + 0.7152 G + 0.0722 B. El ratio es (Lmás claro + 0.05) / (Lmás oscuro + 0.05). Los umbrales son estrictos: #777777 sobre blanco da 4.47:1 y no cumple AA, mientras que #767676 alcanza 4.54:1 y sí cumple. Por eso este comprobador trunca el ratio mostrado en lugar de redondearlo. El texto semitransparente se mezcla primero con el fondo, tal como lo pintaría el navegador.
¿Qué es APCA?
El Algoritmo Perceptual de Contraste Accesible (APCA) es el método de contraste candidato para WCAG 3. Devuelve un valor de contraste de luminosidad Lc de aproximadamente 0 a 106 (negativo para texto claro sobre fondos oscuros) y tiene en cuenta la polaridad: el texto claro sobre oscuro y el oscuro sobre claro no se perciben igual. Como guía, Lc 90 es lo recomendado para texto de cuerpo, Lc 75 es el mínimo para texto de cuerpo y Lc 60 para otro contenido textual. APCA sigue siendo un borrador, así que para cumplir hoy usa WCAG 2.x y utiliza APCA como segunda opinión, sobre todo en temas oscuros.
Cómo corregir una combinación que falla
La tabla de sugerencias busca el color más cercano que cumple cambiando solo la luminosidad HSL del texto o del fondo, así que el tono de tu marca se mantiene. Para variantes más oscuras o más claras de un color de marca, genera una escala completa de tintes y sombras con el Conversor de color y prueba las combinaciones aquí. En Webflow, la Vision preview del Designer simula las deficiencias en la visión del color, pero no muestra un ratio, así que revisa las cifras exactas aquí antes de publicar.
También se busca como: comprobador de contraste de color, contraste wcag, ratio de contraste, accesibilidad web, a11y, contraste aa aaa, apca, contraste de texto.
Herramientas que combinan con: Comprobador de contraste
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Comprobador de Alt de Imágenes — Audita todas las imágenes de una página en una sola tabla: estado del texto alt, tamaño del archivo, atributos de ancho y alto, formato y carga diferida, con filtros y exportación a CSV.
- Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
- Conversor HEX a RGBA — Pega un código HEX, arrastra el deslizador de opacidad y copia el CSS exacto que necesitas: rgba() clásico, rgb( / alpha) moderno o HEX de 8 dígitos.