What is the minimum contrast ratio for WCAG AA compliance?

For WCAG AA compliance, normal text requires a minimum contrast ratio of 4.5:1, while large text (18pt or 14pt bold) requires 3:1.

What is the difference between WCAG AA and AAA standards?

WCAG AAA requires higher contrast ratios: 7:1 for normal text and 4.5:1 for large text, compared to AA's 4.5:1 and 3:1 respectively.

How do I fix poor color contrast?

Use our automatic fix feature to adjust either text or background colors while maintaining your design intent, or manually adjust colors using HSL sliders with visual indicators showing optimal zones for AA/AAA compliance.

What are the visual indicators on the adjustment sliders?

The green zones and AA/AAA markers show optimal ranges for achieving WCAG compliance. The direction hints (Lighter/Darker) guide you toward better contrast based on your current color combination.

Can I test custom color combinations?

Yes, you can enter any hex color codes or use the color picker to select custom colors. The URL updates automatically so you can share specific color combinations.

Color Contrast Checker - WCAG AA & AAA Compliance Tool

1.00:1

Contraste

Fail

Moi pobre

Texto normal

AA (4.5:1)

✖

AAA (7:1)

✖

Texto grande

AA (3:1)

✖

AAA (4.5:1)

✖

Cor do texto

#FFFFFF

#ffffff

Cor de fondo

#546E7A

#546e7a

Solucións rápidas

Título de vista previa

O rápido raposo marrón salta sobre o can preguiceiro

Exemplo de texto pequeno (12px)

Texto

#ffffff

Fondo

#546e7a

Estándares WCAG

Level AA

Relación de contraste mínima de 4.5:1 para texto normal e 3:1 para texto grande. Requirido para a maioría dos sitios web.

Level AAA

Relación de contraste mellorada de 7:1 para texto normal e 4.5:1 para texto grande. Recomendada para unha accesibilidade óptima.

Contraste insuficiente para todos os tamaños de texto - non cumpre os estándares WCAG.

Comprobador de contraste de cor

Calcula a relación de contraste entre as cores do texto e do fondo.

Escolle unha cor usando o seleccionador de cores para texto e cor de fondo ou introduce unha cor en formato hexadecimal RGB (por exemplo, #259 ou #2596BE). Podes axustar o control deslizante para seleccionar a cor. As Directrices de Accesibilidade ao Contido Web (WCAG) teñen unha directriz específica para axudar a determinar se o texto é lexible para usuarios con visión. Este criterio usa un algoritmo particular para mapear combinacións de cores en relacións comparables. Usando esta fórmula, a WCAG establece que unha relación de contraste de 4.5:1 entre o texto e o fondo é axeitada para texto normal e o texto grande (18+ pt regular ou 14+ pt en grosa) debe ter polo menos unha relación de contraste de 3:1.

Funcionalidades clave

• Cálculo de relación de contraste en tempo real
• Verificación de conformidade WCAG AA & AAA
• Controis deslizantes HSL para axuste fino
• Múltiples formatos de vista previa

Ferramentas avanzadas

• Corrección automática de cores
• Mostras de texto e fondo
• Detección de nome de cor
• Exportar resultados