Buscador de Nombres de Colores WCAG

• Comprobación instantánea de cumplimiento WCAG: el Buscador evalúa más de 250 colores con nombre contra tu fondo con cada pulsación de tecla. Cada color muestra su relación de contraste WCAG exacta y su nivel de cumplimiento (AAA, AA, AA Large o Suspenso): sin pulsar ningún botón y sin recargar la página.
• Más de 250 colores con nombre de 3 fuentes: incluye los 148 colores con nombre de CSS, más de 50 nombres de colores X11 ampliados y más de 80 aproximaciones Pantone, lo que te da la paleta más amplia posible de colores de texto accesibles entre los que elegir para cualquier color de fondo.
• 100 % privado, sin subidas: todos los cálculos de contraste ocurren localmente en tu navegador. Tus valores de color nunca salen de tu dispositivo ni se envían a ningún servidor: seguro para proyectos de clientes y sistemas de marca propietarios.
• Gratis y sin límites: comprueba ilimitados colores de fondo sin registro, sin suscripción y sin límites de uso. El Buscador de Nombres de Colores WCAG es completamente gratis para siempre, sin anuncios que bloqueen la interfaz.

• Desarrollo frontend accesible: los desarrolladores frontend usan el Buscador para elegir colores de texto que cumplan los requisitos de accesibilidad. Introduce el color de fondo de tu diseño y ve al instante qué colores con nombre de CSS cumplen WCAG AA o AAA; después copia el valor HEX directamente en tu hoja de estilos.
• Auditoría de cumplimiento WCAG AA/AAA: los auditores de accesibilidad usan el Buscador para identificar rápidamente alternativas de color de texto accesibles para cualquier fondo. Las insignias de aprobado/suspenso codificadas por color y la visualización de la relación de contraste facilitan verificar que las elecciones de color de texto cumplen los estándares legales de accesibilidad.
• Selección de tokens de color de sistemas de diseño: los responsables de sistemas de diseño usan el Buscador para validar los tokens de color de texto. Probando cada token contra todos los tokens de fondo, pueden documentar qué combinaciones cumplen WCAG AA/AAA y cuáles requieren valores de token alternativos por accesibilidad.
• Accesibilidad en apps móviles: los desarrolladores de apps móviles usan el Buscador para elegir colores de texto para apps iOS y Android. La herramienta funciona con cualquier color de fondo HEX: solo tienes que introducir el fondo de tu app y explorar nombres de colores accesibles con sus relaciones de contraste exactas.
• Pruebas de accesibilidad para baja visión: los diseñadores que prueban la accesibilidad para baja visión usan el Buscador para verificar que sus elecciones de color cumplen los requisitos de contraste mejorado (AAA). El modo de filtro AAA muestra solo los colores más contrastados, adecuados para usuarios con discapacidad visual moderada.
• Diseño de contenido web y correo: los creadores de contenido web y diseñadores de correo usan el Buscador para asegurarse de que su texto sea legible sobre diversos colores de fondo. Con más de 250 colores con nombre de varias fuentes, ofrece más opciones accesibles que adivinar valores de color manualmente.

Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen relaciones de contraste mínimas para garantizar que el texto sea legible por usuarios con discapacidad visual, incluida la baja visión y la deficiencia en la visión del color. El Buscador de Nombres de Colores WCAG te ayuda a identificar qué colores con nombre (de fuentes CSS, X11 y Pantone) proporcionan contraste suficiente sobre cualquier color de fondo. La relación de contraste se calcula con la fórmula de luminancia relativa de WCAG 2.1, lo que produce un valor entre 1:1 (sin contraste) y 21:1 (máximo, negro sobre blanco).

1. Introduce tu color de fondo: escribe un valor HEX (por ejemplo, #1E3A5F) o usa el selector de color para elegir un color visualmente. También puedes hacer clic en uno de los 16 presets de fondo (Blanco, Negro, Azul marino, Beige, etc.) para probar rápidamente. Todo el procesamiento se ejecuta localmente en tu navegador: tus datos de color nunca salen de tu dispositivo.
2. Explora los colores accesibles: la herramienta evalúa al instante los más de 250 colores con nombre de nuestra base de datos contra tu fondo. Cada color muestra su relación de contraste, una insignia de cumplimiento (AAA, AA, AA Large o Suspenso) y una vista previa visual del color sobre tu fondo. Usa las pestañas de filtro para mostrar solo los colores que cumplen AA+ o AAA.
3. Copia cualquier color: haz clic en cualquier tarjeta de color para copiar su valor HEX al portapapeles. Los colores se ordenan por relación de contraste (de mayor a menor), lo que facilita encontrar rápidamente el color de texto más contrastado para tu diseño.

• AAA (7:1): contraste mejorado para texto normal. El estándar WCAG más alto, recomendado para usuarios con discapacidad visual moderada. Solo los colores más contrastados superan este nivel. Ideal para texto de cuerpo en secciones de lectura críticas o al diseñar con la accesibilidad como prioridad.
• AA (4,5:1): contraste mínimo para texto normal. Es el estándar legal exigido por la mayoría de las normativas de accesibilidad, incluida la Sección 508 y la ADA. Todo el texto de cuerpo de menos de 18 pt (o 14 pt en negrita) debe cumplir este nivel. Es el nivel WCAG más comúnmente buscado para contenido web.
• AA Large (3:1): contraste mínimo para texto grande (≥18 pt o ≥14 pt en negrita) y componentes de interfaz. También se aplica a elementos no textuales como iconos, bordes y objetos gráficos según el criterio de conformidad 1.4.11 de WCAG 2.1.
• Suspenso (<3:1): no cumple ningún requisito de contraste de texto WCAG. Los colores de este nivel no deben usarse para texto ni elementos de interfaz esenciales sobre este fondo. Considera usarlos solo con fines decorativos.

Nuestro Buscador de Nombres de Colores WCAG usa la fórmula estándar de luminancia relativa de WCAG 2.1, que tiene en cuenta la sensibilidad variable del ojo humano a las distintas longitudes de onda de la luz. La fórmula convierte primero cada color a sus componentes sRGB lineales y luego aplica los pesos de luminancia estándar (rojo: 0,2126; verde: 0,7152; azul: 0,0722). La relación de contraste se calcula como (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro y L2 la del más oscuro. Esto da una medición matemáticamente precisa del contraste percibido, que va de 1:1 (colores idénticos) a 21:1 (negro frente a blanco).