Selector de colores y contraste
Elige o pega un color para verlo en todos los formatos. Añade el color de fondo y sabrás si el texto se lee bien según las pautas de accesibilidad WCAG.
- Las imágenes no salen de tu navegador
- Gratis y sin registro
Contraste
Texto grande de ejemplo
Texto normal: así se leería un párrafo con estos colores en tu web o documento.
Botón
Relación de contraste
—
Tomar un color de una imagen
Elige una foto, un logotipo o una captura y haz clic (o toca) sobre el punto cuyo color quieres. La imagen no se sube a ningún sitio.
Arrastra una imagen aquí
Formatos de color
- HEX (
#1F6FEB): rojo, verde y azul en hexadecimal, de 00 a FF. Es el formato más usado en diseño web. - RGB (
rgb(31, 111, 235)): los mismos tres canales en decimal, de 0 a 255. - HSL (
hsl(216, 84%, 52%)): tono (0-360°), saturación y luminosidad. Es el más cómodo para crear variantes más claras u oscuras de un color. - CMYK: tintas de imprenta. La conversión desde RGB es aproximada: para imprimir con fidelidad hace falta el perfil de color de la imprenta.
Qué exigen las WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.2) miden el contraste entre el color del texto y el del fondo con una relación que va de 1:1 (mismo color) a 21:1 (negro sobre blanco).
| Elemento | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande (desde 24 px, o 18,66 px en negrita) | 3:1 | 4,5:1 |
| Iconos, bordes de campos y otros elementos de interfaz | 3:1 | — |
El nivel AA es el que exigen la mayoría de normas, incluida la norma europea EN 301 549 que aplica en España a las webs públicas y, desde 2025, a muchos servicios privados por la Ley Europea de Accesibilidad. Los umbrales no se redondean: 4,49:1 no cumple 4,5:1.
Si el color del texto tiene transparencia, primero se mezcla con el fondo y después se mide, como hacen las herramientas oficiales. Si no cumple, la herramienta te propone el color más parecido (mismo tono, distinta luminosidad) que sí lo hace.
Cuentagotas de pantalla
En Chrome, Edge y Opera de escritorio aparece el botón Tomar de la pantalla, que permite elegir el color de cualquier punto visible en tu monitor. Firefox y Safari todavía no lo admiten; en ellos puedes hacer una captura y usar Tomar un color de una imagen.