¿Qué es Modo de alto contraste?

Prueba cómo se ve tu contenido web bajo diferentes configuraciones de alto contraste. Pega HTML o una captura de pantalla de una URL para previsualizar modos de contraste conformes con WCAG, incluidos el modo de alto contraste de Windows, colores invertidos y temas de contraste personalizados.

Elige entre temas predefinidos (Windows Alto Contraste, Invertido, Amarillo sobre Negro) o define tu propio color de texto y fondo. La ratio de contraste se actualiza en vivo y te indica qué niveles WCAG — AA, AAA, texto normal, texto grande — supera tu combinación. El HTML del preview se exporta con los estilos en línea aplicados.

Cómo usar

1. Paso 1 — Pega tu HTML o texto plano en el editor.
2. Paso 2 — Selecciona un modo de contraste entre los preajustes: alto contraste de Windows (blanco y negro), invertido, amarillo sobre negro o colores personalizados.
3. Paso 3 — Revisa la previsualización en vivo para comprobar la legibilidad. Usa el comprobador de ratio de contraste para verificar el cumplimiento de las pautas WCAG AA/AAA en los elementos de texto.

Cuándo usar

• Auditar una landing antes de lanzar la campaña para asegurar WCAG AA.
• Comprobar que los indicadores de foco y los botones con sólo icono sobreviven al Alto Contraste de Windows.
• Encontrar un color de cuerpo que llegue a 4,5:1 contra el fondo de marca.

Resultado

Un desarrollador pega el HTML de su barra de navegación y cambia al modo de alto contraste de Windows. Descubre que sus botones de solo icono se vuelven invisibles sobre el fondo negro, así que les añade etiquetas de texto visibles.

Preguntas frecuentes

¿Qué ratio de contraste exige WCAG AA?

4,5:1 para texto normal y 3:1 para texto grande (18pt en regular o 14pt en negrita y por encima). AAA endurece a 7:1 y 4,5:1 respectivamente. El verificador etiqueta cada combinación con los niveles que pasa o falla.

¿Por qué desaparecen los iconos en Alto Contraste de Windows?

Windows sustituye los colores por tokens del sistema y descarta las imágenes de fondo. Los iconos pintados como background-image o como SVG sólo con fill se vuelven invisibles. Usa SVG inline con currentColor en el stroke o añade una etiqueta de texto visible.

¿Amarillo sobre negro es de verdad un tema accesible?

Sí. Es uno de los temas originales de Alto Contraste de Windows y muchas personas con baja visión lo siguen usando porque el amarillo se mantiene vívido incluso con degeneración macular. Algunos lo prefieren al blanco puro sobre negro.

¿Pasar WCAG AA significa que mi página es accesible?

El contraste es sólo una parte de WCAG. La página también necesita navegación por teclado, HTML semántico, textos alternativos, etiquetas de formulario, indicadores de foco y respetar el modo de movimiento reducido. La ratio sólo habla del color.

¿Por qué mi naranja corporativo falla sobre fondo blanco?

Los tonos medios saturados (naranja, amarillo, lima) suelen quedar por debajo de 3:1 sobre blanco porque su luminancia es muy alta. Oscurece el naranja para texto de cuerpo, o resérvalo para fondos y titulares grandes donde 3:1 ya basta.

Herramientas relacionadas