12px AA texto normal
AA Pasa AAA Pasa
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
Prueba de contraste WCAG
Verificador de contraste de color
Prueba colores de texto y fondo contra los umbrales WCAG para texto legible, texto grande y componentes de interfaz.
Flujo del verificador de contraste
Pruebas rapidas
Controles de color
Elige colores, pega valores HEX o empieza con un preset comun.
Valor RGB: rgb(13, 13, 13)
Valor HSL: hsl(0, 0%, 5%)
Valor RGB: rgb(255, 255, 255)
Valor HSL: hsl(0, 0%, 100%)
Colores comunes
Tinta #0D0D0D
Papel #FFFAF0
Blanco #FFFFFF
Naranja #FF6A00
Amarillo #FFC400
Exito #24C84F
Gris tinta #3A3733
Azul #1D4ED8
Vista previa
Texto de titulo de muestra
Subtitulo de muestra
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
Color de texto
#0D0D0D
rgb(13, 13, 13)
Color de fondo
#FFFFFF
rgb(255, 255, 255)
Resultados de contraste
19.44:1
Contraste excelente
Fuerza de contraste
Revision de cumplimiento WCAG
AA texto normal
4.5:1 minimum
AA texto grande
3:1 minimum
AAA texto normal
7:1 minimum
AAA texto grande
4.5:1 minimum
Componentes UI
3:1 minimum
Detalles tecnicos
- El texto normal necesita 4.5:1 para AA y 7:1 para AAA.
- El texto grande necesita 3:1 para AA y 4.5:1 para AAA.
- Bordes de interfaz y objetos graficos necesitan al menos 3:1.
Prueba de tamanos
14px AA texto normal
AA Pasa AAA Pasa
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
16px AA texto normal
AA Pasa AAA Pasa
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
18px AA texto normal
AA Pasa AAA Pasa
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
24px AA texto grande
AA Pasa AAA Pasa
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
32px AA texto grande
AA Pasa AAA Pasa
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
48px AA texto grande
AA Pasa AAA Pasa
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
Variaciones de texto
Texto de titulo de muestra
Subtitulo de muestra
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
El texto pequeno de ayuda debe mantenerse legible.
Buen contraste hace que la interfaz se sienta mas clara.
Resumen de accesibilidad
Contraste: 19.44:1
WCAG: Contraste excelente
Estado: Este par de colores es accesible para texto normal.
Siguiente paso: prueba este par con contenido real y estados interactivos.
Simulacion de daltonismo
Vision normal
Colores originales.
Texto de titulo de muestra
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
#0D0D0D
#FFFFFF
19.44:1 Pasa
Protanopia
Percepcion reducida del rojo.
Texto de titulo de muestra
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
#0D0D0D
#FFFFFF
19.44:1 Pasa
Deuteranopia
Percepcion reducida del verde.
Texto de titulo de muestra
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
#0D0D0D
#FFFFFF
19.44:1 Pasa
Tritanopia
Percepcion reducida azul-amarillo.
Texto de titulo de muestra
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
#0D0D0D
#FFFFFF
19.44:1 Pasa
Acromatopsia
Sin percepcion de color.
Texto de titulo de muestra
El texto de muestra permite revisar si un parrafo real se mantiene legible con el contraste seleccionado.
#0D0D0D
#FFFFFF
19.44:1 Pasa
Consejos rapidos
Empieza con alto contraste
Elige pares legibles primero y luego ajusta el tono.
Prueba contenido real
Etiquetas y parrafos fallan de formas distintas.
Prueba en movil
Pantallas pequenas y reflejos hacen que el contraste importe mas.
Apunta a AAA
AAA da mas margen en condiciones reales de pantalla.