Verificador de Contraste de Colores
Comprueba si tus combinaciones de colores cumplen con las pautas de accesibilidad WCAG
Colores
Colores comunes
Clic izquierdo para seleccionar color de fondo, clic derecho para color de texto
Vista previa
Texto pequeño (12px)
colorContrast.normalText (14px)
Texto grande (18px)
colorContrast.headingText (24px)
Resultados
Relación de contraste21.00:1
Sobre WCAG
Las Pautas de Accesibilidad de Contenido Web (WCAG) establecen estándares para hacer el contenido web más accesible.
Para el contraste de color, WCAG define estas relaciones mínimas:
- AA (estándar): 4.5:1 para texto normal, 3:1 para texto grande
- AAA (mejorado): 7:1 para texto normal, 4.5:1 para texto grande
- El texto grande se define como 18pt (24px) o 14pt (18.5px) en negrita
colorContrast.seoTitle
colorContrast.seoParagraph1
colorContrast.seoParagraph2
colorContrast.seoParagraph3
colorContrast.seoParagraph4
colorContrast.seoParagraph5
colorContrast.seoWcagStandards
- colorContrast.seoWcagLevel1
- colorContrast.seoWcagLevel2
- colorContrast.seoWcagLevel3
- colorContrast.seoWcagLevel4
colorContrast.seoAccessibilityBenefits
colorContrast.seoBenefitsText