Site search
Language
Sign In
Site search hamburger-menu icon
Selecciona idioma
English
Čeština
Dansk
Deutsch
Eestlane
Français
Hrvatski
Indonesia
Italiano
Lietuvis
Magyar
Melayu
Nederlands
Polski
Português
Română
Slovenský
Suomalainen
Svenska
Tiếng Việt
Türkçe
Ελληνικά
Български
Українська
Русский
ქართული
Հայերեն
עִברִית
العربية
فارسی
हिंदी
ภาษาไทย
한국어
中文
日本語

Comprobador de contraste

Comprobador de contraste de color WCAG para calcular la relación de contraste del texto.

Color de primer plano

Introduzca un triplete hexadecimal válido o utilice el selector de colores.

Color de fondo

Introduzca un triplete hexadecimal válido o utilice el selector de colores.

Relación de contraste 21:1

Texto normal

WCAG AA: Pass

WCAG AAA: Pass

Ejemplo de texto normal - 16px

Texto grande

WCAG AA: Pass

WCAG AAA: Pass

Ejemplo de texto grande 18 pt/24 px

Objetos gráficos y componentes de la interfaz de usuario

WCAG AA:  Pass

image/svg+xml
  • Calcula la relación de contraste para un tamaño de texto normal.
  • Calcula la relación de contraste para textos de gran tamaño.
  • Calcule la relación de contraste para los componentes de la interfaz de usuario.
  • Seleccione el color en el selector de colores
  • Configurar la luminosidad del color

Cómo usar el comprobador de contraste

  • Elige el color de fondo
  • Elige el color de primer plano
  • Ajusta la luminosidad si es necesario
  • Compruebe la auditoría para ver texto normal y grande

PREGUNTAS MÁS FRECUENTES

¿Cómo funciona el comprobador de contraste?

Debe evaluar el color del texto y el fondo. Según las directrices del WCAG 2.1, estas son: Texto grande: el texto con un tamaño mínimo de 18 píxeles requiere una relación de contraste de 3:1; texto pequeño: el texto con un tamaño inferior a 18 píxeles requiere una relación de contraste de 4, 5:1.

¿Por qué mi sitio web debe tener suficiente contraste de colores?

El texto sobre un fondo con una relación de contraste baja suele ser difícil de leer. Esto no solo afecta negativamente a las personas con discapacidad visual, sino que también es un inconveniente para todos los usuarios. Un ejemplo es leer un texto en un teléfono celular afuera en un día soleado.

¿Qué significa la accesibilidad del sitio web?

Un sitio web accesible es un sitio web diseñado para que las personas con discapacidades visuales o auditivas puedan usarlo sin restricciones. Por ejemplo, esto garantiza que todos los elementos del sitio tengan suficiente contraste de color, es decir, el color del texto es muy diferente del color de fondo.

¿Las imágenes y los vídeos deben cumplir con los requisitos de contraste de color de las WCAG?

Algunos componentes gráficos y de interfaz requieren una relación de contraste de al menos 3:1. Sin embargo, esto no incluye logotipos, imágenes decorativas ni archivos multimedia generales.

© Eptimize Pty Ltd 2022-2024. All Rights Reserved.