Das Plugin verbessert automatisch schwache Farb-Kontraste auf AA- oder AAA-Niveau. Es benutzt spezielle CSS-Variablen. Diese heißen Override.
Finden wir Probleme, kannst du zwei Dinge tun. Du kannst das Problem per Hand ändern. Das braucht viel Zeit. Oder du nutzt das Plugin, das die Kontraste automatisch verbessert. Es macht helle Farben dunkler, bis die richtigen Kontraste erreicht sind. Dafür nutzt das Plugin CSS-Variablen. Mit feststehenden Farbwerten, genannt HEX-Werte, ist das schwieriger. Dann sieht es manchmal anders aus.
Gehe zu den Einstellungen im Admin-Bereich. Klicke auf WP-Admin, dann auf Barrierefreiheit. Danach auf Module und schließlich auf Color Contrast Fix.
Nutze zuerst den Kontrast-Scanner. Schau dir die Probleme an, dann repariert das Plugin automatisch. Wenn das Aussehen wichtig ist, teste alle Änderungen zuerst. Nutze die visuelle Vorschau-Funktion, bevor die Seite live geht.
In einem 15-Minuten-Gespräch prüfen wir das Modul. Wir schauen, ob es für dein Design und deine Inhalte passt. Wir erklären auch, wie du es einrichten kannst.
Corrección del contraste de color
Aumenta automáticamente el contraste insuficiente al nivel AA o AAA mediante la anulación de una variable CSS.
Función en una oración — y en tres oraciones
Si el escáner de contraste detecta problemas, existen dos opciones: corregirlos manualmente en el CSS (lo cual lleva tiempo) o dejar que el plugin los ajuste automáticamente. Color Contrast Fix aumenta el brillo excesivo de los colores del texto hasta que el contraste alcanza el nivel deseado.
Importante: Esto solo funciona correctamente con temas que utilizan variables CSS para los colores. Con valores hexadecimales fijos, la solución solo funciona mediante anulaciones, lo que puede generar una diferencia visualmente perceptible.
Medidas técnicas
- Descubrimiento de variables CSS: reconoce automáticamente `--color-text`, `--text-secondary`, etc.
- Aumento de la luminancia: si es necesario, el valor del color se desplaza hacia un tono más oscuro.
- Preservación del tonoEl tono de color permanece igual, solo cambia el brillo.
- Anulación de reserva: Para colores duros, se establece un atributo `style` con mayor especificidad.
- Vista previa de diferencias visuales En el backend: Captura de pantalla de antes y después para cada selector afectado.
Puedes encontrar estos ajustes en la pestaña del módulo.
- Contraste objetivo: AA (4,5:1) / AAA (7:1)
- Estrategia: solo variables CSS / variables + anulaciones / todo agresivo
- Límite de variación del tono (hasta qué punto puede variar el tono del color, valor predeterminado: 5°)
- Notificación por correo electrónico de diferencias visuales al administrador: sí / no
- Lista blanca (selectores que nunca se modifican)
Ruta en el administrador: WP-Admin → Accesibilidad → Módulos → Corrección de contraste de color
Caso de uso
Recomendado después Con el escáner de contraste: primero detecta el problema y luego deja que se repare automáticamente. Los sitios web que cuidan su imagen de marca deberían usar la función de vista previa visual antes de publicarse.
Eso encaja temáticamente.
Escáner de contraste
WCAG 1.4.3Análisis en tiempo real en el frontend: comprueba todos los pares de texto/fondo con respecto a AA (4,5:1) o AAA (7:1).
Enfoque visible
WCAG 2.4.11Proporciona un anillo de enfoque nítido y siempre visible en todos los elementos enfocables, con un contraste AAA.
¿Activar el módulo para su sitio?
En la consulta inicial de 15 minutos, aclararemos si el módulo es relevante para su tema y tipo de contenido, y cómo es la configuración.
