Conversor de Color con Accesibilidad WCAG

Convierte colores entre formatos HEX, RGB, HSL y comprueba el contraste de accesibilidad en tiempo real bajo los estándares de las directrices WCAG 2.1 (AA y AAA).

Configuración y Entrada

Text RGB rgb(0, 0, 0)
Background RGB rgb(255, 255, 255)

Resultados del Procesamiento

Relación de Contraste WCAG 2.1
21.00:1
Texto Normal (AA / AAA)
AA (req. 4.5:1) / AAA (req. 7.0:1)
AA: PASS AAA: PASS
Texto Grande (AA / AAA)
AA (req. 3.0:1) / AAA (req. 4.5:1)
AA: PASS AAA: PASS
Vista Previa de Componentes

Texto Grande de Muestra

Este es un párrafo de texto normal que demuestra la legibilidad con la combinación actual de colores de primer plano y fondo.

Guía de Uso: Contraste de Color y Accesibilidad Web (WCAG 2.1)

La accesibilidad web asegura que todas las personas, incluyendo a aquellas con discapacidades visuales, daltonismo o baja visión, puedan percibir, comprender y navegar de forma efectiva en internet. Uno de los factores críticos de la accesibilidad es el **contraste de color** entre el texto (primer plano) y su fondo.

El consorcio W3C define las **Pautas de Accesibilidad para el Contenido Web (WCAG 2.1)** que establecen fórmulas matemáticas estrictas para evaluar la relación de contraste (Contrast Ratio). La escala de contraste va desde **1:1** (ningún contraste, por ejemplo, texto blanco sobre fondo blanco) hasta **21:1** (contraste máximo absoluto, texto negro sobre fondo blanco).

Niveles de Conformidad WCAG
  • Texto Normal (Menor a 18pt o 14pt negrita / aprox. 24px):
    • Nivel AA: Requiere una relación de contraste mínima de 4.5:1.
    • Nivel AAA (Óptimo): Requiere una relación de contraste mínima de 7.0:1.
  • Texto Grande (Igual o mayor a 18pt o 14pt negrita / aprox. 24px):
    • Nivel AA: Requiere una relación de contraste mínima de 3.0:1.
    • Nivel AAA (Óptimo): Requiere una relación de contraste mínima de 4.5:1.
¿Cómo utilizar este evaluador de contraste?
  1. Ingresa el **Color del Texto** en formato hexadecimal (por ejemplo, `#1E293B`) o selecciónalo mediante el selector visual de color.
  2. Ingresa el **Color de Fondo** (por ejemplo, `#FFFFFF`).
  3. Visualiza de forma instantánea el desglose de contrastes en el panel derecho y comprueba si tu combinación aprueba los estándares **AA** y **AAA**.
  4. Examina la **Vista Previa de Componentes** para ver en tiempo real cómo se lee el texto en tamaños normales, grandes y dentro de elementos como botones con los colores seleccionados.
Seguridad y Privacidad de Datos
Procesamiento Local: La privacidad y el diseño seguro son nuestra prioridad. Todo el análisis cromático, conversiones HEX/RGB/HSL y fórmulas matemáticas de luminancia se ejecutan de manera privada e instantánea en tu dispositivo mediante JavaScript. No se envía ningún dato a servidores externos.