Verificador de contraste de color
Evalúa al instante la proporción de contraste entre el color del texto y el color de fondo, y determina si cumple con el estándar de legibilidad (WCAG AA)
Características
Evalúa la proporción de contraste al instante
Muestra el resultado de cumplimiento con WCAG AA solo con ingresar el color del texto y el color de fondo
Compatible con selector y código
Especifica el color pegando HEX, formato abreviado, rgb() o seleccionando con el selector de color
Muestra de dos tamaños de texto
Verifica al instante cómo se ven el texto normal y los títulos en la práctica
Aplica colores que cumplen con un clic
Aplica inmediatamente colores sugeridos que mantienen el matiz pero cambian el brillo
Cómo usar
Especifica el color del texto
Selecciona con el selector de color o ingresa un código de color en cualquiera de estos formatos: #333333, #333 o rgb(51, 51, 51)
Especifica el color de fondo
Especifica el color de fondo de la misma manera. Los resultados se actualizan mientras escribes sin necesidad de presionar un botón
Verifica la proporción, el resultado y la muestra
Verifica la proporción de contraste, el resultado de cumplimiento para texto normal y texto grande, evaluación general y cómo se ve el texto de muestra
Aplica los colores sugeridos y verifica de nuevo
Si no cumple, aplica un color que cumpla usando botones como "Cambiar color del texto a ...". También puedes intercambiar el color del texto y el color de fondo usando el botón de intercambio
Casos de uso
Verificar combinación de colores en diapositivas y materiales
Verifica antes de crear si el color del texto y el color de fondo en documentos internos o diapositivas son legibles
Verificar combinación de colores del sitio web
Verifica si la combinación de colores del sitio o banner cumple con los estándares de accesibilidad (WCAG AA)
Determinar si se puede usar el color de marca en el texto
Cuando uses el color de marca como color de texto, determina cuánto más oscuro debe ser para usarlo en el cuerpo del texto
Corregir combinaciones de colores rechazadas
Corrige la combinación de colores señalada manteniendo el matiz pero cambiando a un color que cumpla
Conocimientos básicos
Qué es la proporción de contraste
La proporción de contraste es un indicador que expresa la diferencia de brillo entre el color del texto y el color de fondo en valores de 1:1 a 21:1. La combinación de negro y blanco es el máximo de 21:1, mientras que el mismo color es el mínimo de 1:1.
- Cómo se calcula：La proporción de contraste se calcula convirtiendo dos colores a luminancia relativa sRGB, sumando 0.05 a cada luminancia (la más clara y la más oscura) y dividiendo.
- Referencia de valores：Para un fondo blanco (#FFFFFF), el gris #777777 tiene una proporción de contraste de 4.47:1, #999999 es 2.84:1, y el negro (#000000) es 21:1.
Diferencia entre AA y AAA en WCAG
WCAG es una directriz internacional sobre accesibilidad de contenido web que establece umbrales de cumplimiento para la proporción de contraste en dos niveles: AA y AAA.
- AA (nivel estándar)：AA requiere una proporción de 4.5:1 o superior para texto normal y 3.0:1 o superior para texto grande, siendo el nivel objetivo para sitios web generales.
- AAA (nivel más estricto)：AAA requiere una proporción de 7:1 o superior para texto normal y 4.5:1 o superior para texto grande, siendo un nivel dirigido a personas con baja visión.
Definición de texto grande
En WCAG, texto grande se refiere a caracteres de aproximadamente 18 puntos (24px) o superior, o caracteres en negrita de 14 puntos (aproximadamente 18.7px) o superior.
- Texto normal：Texto normal es el tamaño que no cumple con la definición de texto grande, como cuerpo de texto o notas, que requiere una proporción de contraste de 4.5:1 o superior.
- Relación con los títulos：Los títulos menores de 24px sin negrita se tratan como texto normal, por lo que se debe verificar tanto el tamaño como el peso.
Seguridad y privacidad
Procesamiento en el navegador
Los datos introducidos se procesan únicamente dentro de su navegador y no se envían al exterior.
Procesamiento solo en el navegador
Cálculo de la proporción de contraste y sugerencias de color se procesa completamente en su navegador y los datos de entrada no se envían a ningún servidor.
Comunicación cifrada con HTTPS
La carga de la página también se cifra con TLS y terceros no pueden leer su contenido.
Sin envío a terceros
Los datos de entrada no se envían a servicios externos como redes publicitarias o rastreadores.
Sin guardado automático de resultados
Color de texto y color de fondo ingresados y sugerencias de entrada no se almacenan en el servidor.
Sigue RAKKOTOOLS en Google Search
¡194 herramientas prácticas serán más fáciles de encontrar desde Google Search y búsqueda con IA!
- Se encuentra en búsqueda
- También visible en búsqueda con IA
- Descubre nuevas herramientas
Novedades
- update #337
Agregado verificador de contraste de color para evaluar la legibilidad entre color de texto y color de fondo