Comprobar contraste de color (WCAG)
Comprueba si dos colores cumplen los niveles de contraste AA y AAA de las pautas WCAG para texto normal y grande.
Se procesa en tu dispositivo. Nada se envía a ningún servidor.
Texto de ejemplo
16.85:1
- AA texto normal (4.5:1)Cumple
- AA texto grande (3:1)Cumple
- AAA texto normal (7:1)Cumple
- AAA texto grande (4.5:1)Cumple
Comprueba si la combinación de color de texto y fondo cumple los niveles de contraste AA y AAA de las pautas de accesibilidad WCAG 2.x.
Calcula la luminancia relativa de cada color según la fórmula WCAG y obtiene el ratio de contraste entre ambos, comparándolo con los umbrales 3:1, 4.5:1 y 7:1.
Casos de uso
- Verificar que un botón o texto es legible antes de publicarlo.
- Auditar la accesibilidad de una interfaz.
- Elegir colores de marca que cumplan WCAG AA.
Cómo funciona
- 1
Elige color de texto y fondo
Introduce ambos colores en HEX.
- 2
Revisa el ratio
Comprueba el ratio de contraste y qué niveles WCAG cumple.
Preguntas frecuentes
- ¿Qué diferencia hay entre AA y AAA?
- AA es el nivel mínimo recomendado (4.5:1 para texto normal); AAA es más exigente (7:1) y se recomienda para contenido crítico.
- ¿Qué es texto grande a efectos de WCAG?
- Texto de al menos 18pt, o 14pt en negrita, que tiene un umbral de contraste más bajo (3:1 en AA).
Herramientas relacionadas
- Generador de Border RadiusCrea border-radius CSS con preview.
- Generador de Box ShadowCrea sombras CSS con preview en vivo.
- Selector de colorElige un color y obtén HEX, RGB y HSL.
- Generador de gradientes CSSCrea gradientes CSS con preview.
- HEX a HSLConvierte HEX a HSL con preview.
- HEX a RGBConvierte HEX a RGB con preview.