ImageColorPicker.com

Comprobador de contraste de cor

Proba a relación de contraste entre as cores de primeiro plano e de fondo para garantir a accesibilidade.

Comproba as túas cores

Proba combinacións de cores para asegurarte de que cumpren os estándares de accesibilidade WCAG para a lexibilidade do texto.

2.10 a 1
Contraste
Non superado
Resultado do texto
Moi pobre

Comparadas: #2ECC71 sobre #FFFFFF

Texto

16px, Regular (400)

Conta como texto normal.

  • AA (WCAG 1.4.3): polo menos 4.5:1

    Faltan 2.40

    Non superado

  • AAA (WCAG 1.4.6): polo menos 7:1

    Faltan 4.90

    Non superado

Compoñentes de UI e gráficos

Iconas, bordos de campos, indicadores de foco e outras partes que necesitas ver para usar a interface.

  • AA (WCAG 1.4.11): polo menos 3:1

    Faltan 0.90

    Non superado
2.10 a 1. Texto: non cumpre AA, non cumpre AAA. Compoñentes da IU: non cumpre.
Como se comproba isto
Cores comparadas (despois de mesturar)
Texto #2ECC71 sobre fondo #FFFFFF
Luminancia relativa
Texto 0.4495, fondo 1.0000
Fórmula
(L1 + 0.05) / (L2 + 0.05) onde L1 é a luminancia da cor máis clara e L2 a da máis escura.
Ratio exacto
2.1017 a 1, mostrado como 2.10 a 1. O valor mostrado está truncado, non redondeado, así que nunca parece mellor do que é. O valor exacto é o que se compara co requisito.

Tamaño do texto: 16px, Regular (400)

Conta como texto normal. O texto grande ten polo menos 24px (18pt), ou polo menos 18.67px (14pt) cando está en negrita (peso 700 ou máis). Os tamaños móstranse truncados, non arredondados.

Conta como texto normal. O texto grande ten polo menos 24px (18pt), ou polo menos 18.67px (14pt) cando está en negrita (peso 700 ou máis). Os tamaños móstranse truncados, non arredondados.

Solucións rápidas

Aa
Título de vista previa

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

Exemplo de texto pequeno (12px)

Texto
#2ecc71
Fondo
#ffffff

Estándares WCAG

Nivel 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.

Nivel AAA

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

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

Preguntas frecuentes

Para cumprir WCAG AA, o texto normal necesita unha relación de contraste mínima de 4,5:1, mentres que o texto grande (18pt ou 14pt en negra) necesita 3:1.

WCAG AAA esixe relacións de contraste máis altas: 7:1 para o texto normal e 4,5:1 para o texto grande, fronte a 4,5:1 e 3:1 de AA respectivamente.

Usa a nosa función de corrección automática para axustar o texto ou o fondo sen perder a intención do deseño, ou axusta as cores a man cos controis deslizantes HSL, que mostran con indicadores visuais as zonas óptimas para cumprir AA/AAA.

As zonas verdes e os marcadores AA/AAA mostran os intervalos óptimos para cumprir WCAG. As pistas de dirección (Máis claro/Máis escuro) guíanche cara a un mellor contraste segundo a túa combinación actual de cores.

Si, podes introducir calquera código hex ou usar o selector de cor para escoller cores personalizadas. A URL actualízase automaticamente para que poidas compartir combinacións concretas.