Herramientas de desarrollador
Convertidor de color y comprobador de contraste
Incluye las relaciones de contraste que deciden si el texto en ese color es legible.
- Se ejecuta en su navegador
- No se ha cargado nada
La herramienta
Introduzca un valor hexadecimal o un color RGB.
Todo lo que ingresa permanece en su propia máquina. No se envía nada a nosotros ni a nadie más, lo cual puede confirmar en la pestaña de red de su navegador.
Para qué lo usa la gente
- Decidir si poner texto blanco o negro en un color de marca
- Conversión de un valor hexadecimal de un archivo de diseño a HSL para construir una rampa
- Verificar que un color cumpla con WCAG AA antes de usarlo para el cuerpo del texto
- Traducir un color entre una herramienta de diseño y CSS
- Comprender por qué un color parece más brillante que otro
Acerca de esta herramienta
Tres formas de decir lo mismo
Hex se mantiene compacto y mantiene la forma habitual en CSS. RGB proporciona los mismos números en decimal, lo que conviene ajustarlos manualmente. HSL describe el tono, la saturación y la luminosidad, lo cual es mucho más útil al crear una rampa de color, porque puedes mantener el tono y variar la luminosidad.
Contraste y por qué está aquí
La relación de contraste decide si cualquiera puede leer texto sobre un fondo. WCAG AA solicita al menos 4.5 a 1 para el texto del cuerpo y 3 a 1 para texto grande. Esta herramienta informa la proporción entre blanco puro y negro puro, lo que le indica inmediatamente qué color de texto usar en un fondo determinado.
El contraste deficiente sigue siendo uno de los problemas de accesibilidad más comunes y uno de los más fáciles de evitar en el momento del diseño en lugar de solucionarlo después.
Luminancia relativa
La cifra de luminancia es el valor en el que se basa la fórmula de contraste. No se trata simplemente de brillo: el cálculo pondera mucho más el verde que el azul, porque la visión humana lo hace. Es por eso que dos colores que parecen igualmente oscuros pueden comportarse de manera muy diferente detrás del texto.
¿Necesita gestionar esto en todo un sitio web? Vea nuestro Servicios de diseño UI UX página.
Más herramientas y servicios
- Formateador y validador JSON
- Decodificador y codificador Base64
- Codificador y decodificador de URL
- Decodificador JWT
- Generador de UUID
- Convertidor de marca de tiempo de Unix
Si prefiere que alguien haga esto correctamente por usted, le ofrecemos Servicios de Diseño Web y Desarrollo de Sitios Web., Servicios SEO: Optimización de motores de búsqueda, posicionamiento web y publicidad en redes sociales, Agencia de automatización de IA.
Preguntas
Preguntas sobre esta herramienta
Las cosas que los clientes realmente quieren saber: costos, plazos, propiedad y qué sucede después del lanzamiento.
WCAG AA solicita de 4.5 a 1 para el texto del cuerpo y de 3 a 1 para texto grande. AAA solicita 7 a 1.
Porque puedes mantener el tono y cambiar solo la luminosidad, que es como se construye una rampa de color consistente.
Informa en blanco y negro, lo que responde a la pregunta común de qué color de texto usar.
Las pantallas varían en calibración y perfil de color. Los valores son exactos; la visualización de ellos no lo es.
notación hexadecimal de tres o seis dígitos, con o sin hash y rgb().
Sesión de estrategia gratuita
Vamos a construir algo que valga la pena encontrar.
Dinos dónde quieres que esté el negocio en doce meses y te regresaremos con un plan de costos, un cronograma realista y las cifras que esperamos mover —sin obligación, sin jerga.
- Llamadas de 30 minutos, sin pitch deck
- Propuesta de precio fijo en 48 horas
- Usted es el propietario de todo lo que construimos
Habla con un desarrollador
No es un equipo de ventas
- Tiempo de respuesta
- Dentro del horario laboral 1
- Dónde trabajamos
- Reino Unido, Estados Unidos y el Golfo
- Contratos
- Sin bloqueo, mensualmente continuo
- Trabajando desde
- 2023