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.

20.26 a 1
Contraste
AAA
Resultado do texto
Super

Comparadas: #000000 sobre #FBFBF9

Texto

16px, Regular (400)

Conta como texto normal.

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

    Aprobado

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

    Aprobado

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

    Aprobado
20.26 a 1. Texto: cumpre AA, cumpre AAA. Compoñentes da IU: cumpre.
Como se comproba isto
Cores comparadas (despois de mesturar)
Texto #000000 sobre fondo #FBFBF9
Luminancia relativa
Texto 0.0000, fondo 0.9634
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
20.2686 a 1, mostrado como 20.26 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.

Aa
Título de vista previa

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

Exemplo de texto pequeno (12px)

Texto
#000000
Fondo
#fbfbf9

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.