Guía de contraste de color WCAG
Comprenda los requisitos de contraste AA y AAA, cómo probar texto y componentes de la interfaz de usuario, y cómo corregir pares defectuosos.
FAQ
- ¿Qué proporción necesito para los botones?
- Los componentes de la interfaz de usuario y los objetos gráficos generalmente necesitan al menos 3:1 con respecto a los colores adyacentes. El texto dentro de los botones aún necesita 4,5:1 (AA) o 3:1 para texto grande.
Conceptos básicos de contraste WCAG
WCAG 2.x define relaciones de contraste mínimas entre el texto y los colores de fondo. El nivel AA es el objetivo legal y de producto común; AAA es más estricto y se recomienda para el cuerpo del texto cuando sea posible.
El contraste se basa en la luminancia relativa, no en el tono. Dos colores pueden parecer diferentes pero no contrastan si su luminosidad es demasiado similar.
Flujo de trabajo de prueba
Elija colores de primer plano y de fondo de su sistema de diseño. Páselos por un verificador de contraste. Tenga en cuenta los umbrales de texto normal frente a los de gran tamaño.
Pruebe los estados de desplazamiento, enfoque y desactivación, no solo los botones y enlaces predeterminados.