Selector de color y comprobador de contraste
Elija los colores de primer plano y de fondo y verifique el contraste entre ellos antes de realizar el envío. La vista previa muestra el par como texto real, por lo que puedes juzgar la legibilidad directamente en lugar de adivinar a partir de códigos hexadecimales.
Live Text Contrast Preview
Sample paragraph text demonstrating visual contrast between selected text and background colors.
13.98 : 1
como funciona
- 1
Elija un color de primer plano (texto).
- 2
Elija el color de fondo sobre el que se asentará.
- 3
Lea la vista previa como texto real en tamaños reales en lugar de dos muestras.
- 4
Copie los valores en su hoja de estilo, archivo de token de diseño o configuración de tema.
Ventajas y beneficios clave
Juzgado en contexto
Los colores se muestran como texto sobre un fondo, que es la única forma de ver si una combinación es realmente legible.
Orientado a la accesibilidad
Los problemas de contraste se vuelven evidentes antes de que lleguen a los usuarios o a una auditoría de accesibilidad.
Valores listos para copiar
Lleve los valores hexadecimales directamente a CSS, un archivo de token de diseño o un tema de biblioteca de componentes.
Iteración instantánea
Ajuste cualquiera de los colores y vea el efecto inmediatamente, sin necesidad de construir ni recargar.
Para qué lo usa la gente
- Verificar la combinación de colores de una marca antes de que llegue a un sistema de diseño.
- Corregir texto de bajo contraste marcado en un Lighthouse o en un informe de accesibilidad.
- Elegir enlaces legibles y colores de cuerpo para un tema claro y oscuro.
- Documentar un par de colores en una guía de estilo con los valores hexadecimales exactos.
Formatos y opciones compatibles
| Entrada de color | Valores hexadecimales a través del selector de color nativo o entrada directa |
|---|---|
| Vista previa | Muestra de texto en vivo en primer plano sobre fondo |
Privacidad y manejo de datos
La selección de color y la vista previa se realizan completamente en la página. No se envían valores a un servidor ni se almacenan más allá de la pestaña actual.
Límites y cosas que debes saber
- Los requisitos de contraste dependen del tamaño y el peso del texto: el texto grande tiene un umbral más bajo que el texto del cuerpo, así que juzgue el emparejamiento según el tamaño que realmente utilizará.
- La herramienta comprueba un único par de primer plano y fondo. El texto sobre una imagen o un degradado tiene una variedad de contrastes y debe compararse con la peor parte.
- Las elecciones de color también afectan a los usuarios con deficiencias en la visión del color; Nunca confíes únicamente en el tono para transmitir significado.
Solución de problemas
El color se ve diferente en la aplicación que aquí.
La opacidad, los modos de fusión y un fondo principal pueden cambiar el color renderizado. Compare el color calculado en las herramientas de desarrollo del navegador en lugar del declarado.
El selector no abre
La entrada de color nativo necesita un navegador que admita tipo de entrada = color. Escriba el valor hexadecimal directamente si la muestra no se abre.
Online Color Picker — HEX, RGB & HSL Converter
Pick a colour and get its HEX, RGB, HSL and CSS values instantly, or pull an exact colour out of an uploaded image. A free online color picker and converter for web design, brand palettes and CSS work.
- HEX, RGB and HSL together — every format is shown at once and stays in sync, so you can copy whichever one your stylesheet, design tool or brand guide expects.
- Color picker from image — upload a screenshot, logo or photograph and sample the exact pixel value — the reliable way to match an existing brand colour.
- CSS-ready output — values copy in valid CSS syntax, ready to paste into a custom property, a Tailwind config or a component style.
- Build consistent palettes — adjust hue, saturation and lightness numerically to derive tints and shades that actually belong to the same colour family.
- Images stay on your device — sampling happens on a canvas in your browser, so unreleased mockups and client artwork are never uploaded.
Free with no sign-up. Turn a chosen colour into a frosted CSS panel with the Glassmorphism Generator.
Preguntas frecuentes
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for body text and 3:1 for large text (roughly 24px, or 19px bold). Judge the pairing at the size you will actually ship, since the threshold changes with it.
Why does the colour look different in my app?
Opacity, blend modes and a parent background all shift the rendered result. Check the computed colour in browser devtools rather than the value you declared.
Is contrast enough for accessibility?
It is necessary, not sufficient. Also avoid using colour alone to convey meaning — add an icon, label or pattern so the information survives for users who cannot distinguish the hues.
¿Qué es una buena relación de contraste WCAG?
Se requiere una relación de contraste de 4,5:1 para texto normal según los estándares WCAG AA.
¿Qué relación de contraste necesito?
WCAG AA solicita 4,5:1 para el cuerpo del texto y 3:1 para texto grande (aproximadamente 24 px o 19 px en negrita). Juzgue el emparejamiento según el tamaño que realmente enviará, ya que el umbral cambia con él.
¿Por qué el color se ve diferente en mi aplicación?
La opacidad, los modos de fusión y el fondo principal cambian el resultado renderizado. Verifique el color calculado en las herramientas de desarrollo del navegador en lugar del valor que declaró.
¿Es el contraste suficiente para la accesibilidad?
Es necesario, no suficiente. También evite usar el color solo para transmitir significado: agregue un ícono, etiqueta o patrón para que la información sobreviva para los usuarios que no pueden distinguir los tonos.
Herramientas relacionadas
Generador de morfismo de vidrio CSS
Genere efectos de interfaz de usuario de vidrio modernos y código CSS
Generador de códigos QR
Convierte cualquier enlace o texto en un código QR escaneable
Metaetiqueta y generador OpenGraph
Genere metaetiquetas SEO para Google, Facebook y Twitter
Generador de hash SHA256 y MD5
Genere hashes criptográficos SHA-256, SHA-512 y MD5