Evalúa ratios de contraste entre fondo y texto con calificaciones AA/AAA y simulador de daltonismo.
Relación de contraste
12.3:1
WCAG 2.1 AA
WCAG 2.1 AAA
Este es un texto de muestra para probar la legibilidad del color. Un contraste adecuado facilita la lectura del contenido web para todos.
Ajuste automático del color de texto con un clic para cumplir con el estándar AA (4.5:1)
Evalúa ratios de contraste entre fondo y texto con calificaciones AA/AAA y simulador de daltonismo. Úsala para trabajo diario, desarrollo, aprendizaje o comprobaciones rápidas.
Esta herramienta funciona en tu navegador. Antes de usar datos sensibles, comprueba que confías en tu dispositivo y navegador.
Este comprobador de contraste calcula la relación entre el color del texto y el del fondo con la fórmula de WCAG 2.1: convierte cada color RGB a luminancia relativa y aplica (más claro + 0,05) ÷ (más oscuro + 0,05), lo que da un valor entre 1:1 y 21:1. Negro sobre blanco es el máximo, 21:1, y dos colores iguales dan 1:1. Elige los colores con el selector o escribe el código HEX, y la vista previa del texto y el botón se actualiza al instante.
El nivel AA de WCAG exige al menos 4,5:1 para texto normal y el nivel AAA, 7:1; para texto grande (18 pt o 14 pt en negrita) los umbrales bajan a 3:1 y 4,5:1. Las insignias AA y AAA de la herramienta usan los umbrales de texto normal. La relación no se puede redondear: #777777 sobre blanco da 4,47:1, que parece suficiente pero no aprueba, mientras que #767676 alcanza 4,54:1 y cumple AA. #595959 sobre blanco llega a unos 7,00:1, suficiente para AAA.
Si una combinación no aprueba, pulsa la corrección inteligente: la herramienta mantiene la dirección del tono y aclara el color del texto (sobre fondos oscuros) u oscurece (sobre fondos claros) paso a paso hasta llegar a 4,5:1; si no lo consigue, recurre al negro o al blanco puros. Es una forma rápida de encontrar un color válido, aunque los colores de marca merecen un ajuste final del diseñador.
El simulador de daltonismo permite subir una imagen o usar la de ejemplo y verla como la percibiría una persona con protanopía, deuteranopía, tritanopía o acromatopsia mediante matrices de color. Sirve para comprobar si gráficos, mapas o colores de estado dependen solo del tono. Las imágenes se reducen hasta 800×600 y se procesan en un canvas del navegador sin subirse a ningún servidor. La simulación es aproximada; la visión del color varía entre personas.
El texto normal necesita al menos 4,5:1 para WCAG AA y 7:1 para AAA. El texto grande (18 pt o 14 pt en negrita) necesita 3:1 para AA y 4,5:1 para AAA. Los elementos que no son texto, como iconos o bordes de campos, requieren al menos 3:1 según WCAG 2.1.
Los umbrales de WCAG son mínimos estrictos y no se pueden redondear. La herramienta muestra dos decimales redondeando hacia abajo, para que nunca veas un valor que parezca 4,5:1 y no apruebe.
Solo modifica la luminosidad del color del texto; el fondo no cambia. El resultado mantiene un tono parecido o pasa a negro o blanco si nada más funciona. Para conservar el color de marca, ajusta el fondo o usa el color original solo en textos grandes y elementos decorativos.
No. El navegador lee la imagen y aplica la matriz de color en un canvas, así que todo ocurre en tu dispositivo. Los filtros son aproximaciones habituales, útiles para detectar diseños que transmiten información solo mediante el color.
Ver esta categoría: Diseño y color
Genera partículas, cuerpos elásticos, colisiones y campos de gravedad interactivos en tiempo real con Canvas.
Coloca puntos de anclaje, arrastra las manillas Bézier en un lienzo de 500×500 y obtén al instante el atributo d del trazado SVG y una regla CSS clip-path: path().
Coloca capturas de pantalla dentro de un elegante marco de navegador estilo macOS con sombra y fondo degradado, y descárgalas en PNG de alta resolución.
Diseña textos luminosos y letreros de neón personalizando colores, parpadeos y sombras con exportación de código CSS.
