Comprobador de contraste de colores
Usa este comprobador para medir el contraste entre un color de primer plano y uno de fondo. Consulta los resultados WCAG 2.2 AA y AAA, el color más cercano que cumple los requisitos, las capas transparentes y las combinaciones de una paleta.
Gratis y sin registro. Funciona en tu navegador, sin llamadas a la IA.
Relación de contraste
4,54:1
| Uso | Nivel | Requiere | Resultado |
|---|---|---|---|
| Texto normal | AA | 4,5:1 | Superada |
| Texto grande | AA | 3:1 | Superada |
| Elementos de interfaz y gráficos | AA | 3:1 | Superada |
| Texto normal | AAA | 7:1 | Fallida |
| Texto grande | AAA | 4,5:1 | Superada |
Esta vista previa usa el modelo de Machado de 2009 con la máxima intensidad. Es una aproximación a la percepción del color, no un diagnóstico. Los resultados WCAG siempre se calculan con los colores visibles originales.
Machado, Oliveira y Fernandes: modelo publicadoEl texto normal a 16 píxeles se ve como esta frase.
Texto grande a 24 píxeles
Un borde de 2 píxelesLicencia del modelo de visión del color
Copyright 2013 Colour Developers Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE
Comprueba una paleta
Añade al menos dos colores para comparar una paleta. Los colores repetidos solo se cuentan una vez.
Un comprobador de contraste de colores mide la relación entre dos colores en una escala de 1:1 a 21:1. Comprueba los niveles AA y AAA de WCAG 2.2 para texto y el umbral de 3:1 para elementos que no son texto. Encuentra un color que cumpla los requisitos sin cambiar el tono, compón capas transparentes sobre el color de lienzo que elijas, compara paletas de hasta 12 colores y previsualiza las deficiencias de visión cromática con el modelo de Machado.
Cómo usar esta herramienta
- Introduce dos colores
- Escribe un código hexadecimal como #1a1a2e o #fff, un valor rgb() o hsl(), o el nombre de un color CSS como navy. También puedes usar los selectores de color. Se admite el canal alfa en rgba(), hsla() y códigos hexadecimales de 4 u 8 dígitos. Elige el color del lienzo subyacente para componer las capas transparentes de fondo y texto. Los controles de opacidad multiplican el alfa que ya tiene cada valor. El contraste se calcula con los colores compuestos sin redondear; los códigos hexadecimales mostrados son aproximados.
- Cómo se calcula la relación
- La luminancia relativa de cada color se calcula con la fórmula de WCAG. Para obtener la relación, se suma 0.05 a la luminancia del color más claro y se divide por la luminancia del más oscuro más 0.05. El resultado se muestra redondeado hacia abajo a dos decimales, por lo que 4.499 nunca aparece como válido.
- Qué significan los niveles
- AA es el nivel al que remiten la mayoría de las leyes y políticas: 4.5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 y 4.5:1, respectivamente. Se considera grande el texto de al menos 24 px, o de unos 18.7 px si está en negrita. Los iconos, los bordes de los campos y los contornos de foco necesitan una relación de 3:1 respecto a los colores adyacentes.
- El color sugerido
- Cuando no se alcanza un nivel, conservamos el tono y la saturación del color que has elegido cambiar y ajustamos solo su luminosidad, paso a paso, hasta alcanzar la relación necesaria. Se muestra el color más cercano que cumple el requisito junto con su relación. «Más cercano» significa el menor cambio de luminosidad HSL en pasos de 0.001, no la menor distancia perceptual entre colores. Al aplicar una sugerencia, esa capa se vuelve opaca. Si el texto es translúcido, elige un color de sustitución para el texto: cambiar el fondo modificaría ambos colores visibles.
- Paleta y vistas previas de la visión cromática
- Introduce hasta 12 colores sólidos distintos, separados por saltos de línea, comas o puntos y coma. Las filas representan el primer plano y las columnas, el fondo. Cada combinación muestra la relación de contraste y si cumple AA para texto normal. Selecciona una combinación para consultar todos los niveles. Las vistas previas de protanopia, deuteranopia y tritanopia usan el modelo de Machado, Oliveira y Fernandes (2009) con la máxima intensidad y matrices de Colour Science con licencia BSD. Son aproximaciones de la percepción: no alteran el cálculo WCAG ni sirven para diagnosticar a nadie.
Preguntas antes de empezar
Comprueba cómo aparece tu negocio en las respuestas de la IA
Las comprobaciones técnicas te ayudan a corregir una página. El análisis gratuito de visibilidad en IA muestra las respuestas comprobadas sobre tu negocio y qué conviene mejorar después.