Comprobador de contraste de color

Comprobador de contraste de color WCAG gratuito. Pruebe el texto y los colores de fondo para comprobar el cumplimiento de la accesibilidad AA y AAA con una relación de contraste en vivo y una vista previa: hexadecimal o RGB.

Verifique la relación de contraste entre el texto y el color de fondo con los estándares WCAG AA y AAA, con una vista previa en vivo y entrada hexadecimal o RGB.

Share
Categoría
Herramientas para desarrolladores
Incluye
Características de 6
Acceso
Gratis · Sin registro
Privacidad
Se ejecuta en tu navegador
Comprobador de contraste de color

Loading Contrast Checker......

Please wait a moment

como usar

Cómo utilizar Comprobador de contraste de color

  1. 01

    Elige el color del texto

    Elija o escriba el color de primer plano.

  2. 02

    Elige el fondo

    Elija o escriba el color de fondo.

  3. 03

    leer la proporción

    Vea la relación de contraste y los resultados AA/AAA.

  4. 04

    Ajustar

    Modifica los colores hasta que pasen.

Casos de uso

Casos de uso comunes

  • Verifique que el texto de la interfaz de usuario cumpla con la accesibilidad WCAG
  • Comprobar contraste de botones y enlaces
  • Auditar la paleta de colores de una marca
  • Corregir texto de marketing de bajo contraste
Descripción general

Haz que tu texto sea legible para todos

El texto de bajo contraste es uno de los fallos de accesibilidad más comunes. Este verificador calcula la relación de contraste exacta entre el texto y los colores de fondo usando la fórmula oficial de luminancia relativa WCAG, luego le indica si pasa AA (4.5:1 para texto normal, 3:1 para texto grande) y el AAA más estricto (7:1 y 4.5:1). Una vista previa en vivo muestra texto real en los colores elegidos.

Introduce los colores como quieras

Utilice los selectores de color o escriba códigos hexadecimales y valores rgb() directamente; la herramienta analiza ambos. A medida que ajustas cualquiera de los colores, la proporción y las insignias de aprobado/reprobado se actualizan instantáneamente, por lo que puedes modificar un tono hasta que cumpla. Todo se ejecuta localmente, lo que lo convierte en un complemento rápido al diseñar la interfaz de usuario, los temas y las páginas de marketing.

Características
01
Resultados de aprobación/rechazo de WCAG AA y AAA
02
Cálculo de la relación de contraste en vivo
03
Entrada hexagonal y RGB con selectores de color
04
Vista previa de texto en vivo en tus colores
05
Umbrales de texto normal y grande
06
Se ejecuta localmente en su navegador
Preguntas frecuentes

Preguntas frecuentes

¿Qué relación de contraste necesito para aprobar WCAG?+

Para AA, el texto normal necesita 4,5:1 y el texto grande 3:1. Para el AAA más estricto, el texto normal necesita 7:1 y el texto grande 4,5:1. El texto grande tiene aproximadamente 18 puntos o 14 puntos en negrita.

¿Cómo se calcula la relación de contraste?+

Utiliza la fórmula de luminancia relativa WCAG para ambos colores, luego divide la luminancia más clara (más 0,05) por la más oscura (más 0,05), dando un valor de 1:1 a 21:1.

¿Puedo ingresar RGB además de hexadecimal?+

Sí, escriba códigos hexadecimales como #1e293b o rgb(30, 41, 59), o utilice los selectores de color. Ambos formatos se analizan instantáneamente.

¿Es gratis?+

Sí, completamente gratis sin necesidad de registrarse y ejecutándose completamente en su navegador.