Verificador de Contraste WCAG - Comprobar Accesibilidad de Colores en Línea
Verifique las relaciones de contraste de color según WCAG 2.1 AA y AAA. Obtenga resultados instantáneos para texto normal, texto grande y componentes de UI — 100% en el navegador.
Preguntas Frecuentes
¿Qué es un Verificador de Contraste de Color WCAG?
Un Verificador de Contraste de Color WCAG es una herramienta en línea que calcula la relación de contraste entre dos colores y evalúa si la combinación cumple con los estándares de accesibilidad WCAG 2.1. Verifica el cumplimiento en dos niveles: AA (mínimo, 4.5:1 para texto normal) y AAA (mejorado, 7:1 para texto normal).
¿Cómo uso esta herramienta?
Ingrese un color de primer plano usando formato HEX, RGB o HSL, o use el selector de color. Luego ingrese un color de fondo. La relación de contraste se calcula y muestra instantáneamente. Revise la tabla de conformidad WCAG y las sugerencias de colores alternativos si la combinación falla.
¿Son seguros mis datos de color?
Sus datos de color son 100% seguros y nunca salen de su navegador. El cálculo se ejecuta enteramente en JavaScript del lado del cliente. Ningún dato se transmite a ningún servidor.
¿Cuál es la diferencia entre WCAG AA y AAA?
WCAG AA es el nivel mínimo de conformidad requerido por la mayoría de las leyes. Exige 4.5:1 para texto normal y 3:1 para texto grande. WCAG AAA es el nivel mejorado que requiere 7:1 para texto normal y 4.5:1 para texto grande.
¿Qué cuenta como 'texto grande' en WCAG?
Según WCAG 2.1, el texto grande es texto de al menos 18pt (24px) en peso regular, o al menos 14pt (18.5px) en negrita. El texto grande tiene requisitos de contraste más bajos.
¿Cuál es la fórmula de relación de contraste?
La relación de contraste WCAG 2.1 se calcula en tres pasos: conversión gamma, cálculo de luminancia relativa y cálculo de la relación. El resultado va de 1:1 a 21:1.
¿Qué significa 'Componentes UI'?
WCAG 2.1 SC 1.4.11 requiere una relación de contraste mínima de 3:1 para elementos visuales que transmiten información, como bordes de campos, contornos de botones e iconos.
Ejemplos de Código
// WCAG Color Contrast Checker
function sRGBtoLinear(channel) {
const c = channel / 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}
function getRelativeLuminance(r, g, b) {
return (
0.2126 * sRGBtoLinear(r) +
0.7152 * sRGBtoLinear(g) +
0.0722 * sRGBtoLinear(b)
);
}
function getContrastRatio(fg, bg) {
const l1 = getRelativeLuminance(...fg);
const l2 = getRelativeLuminance(...bg);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}
function checkWCAG(ratio) {
return {
ratio: parseFloat(ratio.toFixed(2)),
aa: {
normalText: ratio >= 4.5,
largeText: ratio >= 3,
uiComponents: ratio >= 3,
},
aaa: {
normalText: ratio >= 7,
largeText: ratio >= 4.5,
},
};
}
// Usage
const fg = [26, 26, 26];
const bg = [255, 255, 255];
const ratio = getContrastRatio(fg, bg);
console.log(`Contrast Ratio: ${ratio.toFixed(2)}:1`);
const result = checkWCAG(ratio);
console.log('AA Normal Text:', result.aa.normalText ? 'Pass' : 'Fail');
console.log('AAA Normal Text:', result.aaa.normalText ? 'Pass' : 'Fail');