Ir a la versión en Español
Relevant to: faculty and staff; students
This article contains information considered accurate at the time of publishing. Technology updates, changes in University security practices, policies and procedures may effect the information in this article. Updates to articles are scheduled on a periodic basis and will address any required changes.
Why Does Sufficient Color Contrast Matter?
Have you ever had a difficult time reading an event flyer because of the colors used? Sufficient color contrast refers to how readable and accessible certain color combinations are against each other. When designing materials like flyers, it is important to use compatible foreground colors and background colors that offer sufficient contrast. This likely helps everyone to some degree, but is especially important for providing access to individuals with certain visual disabilities. Providing sufficient color contrast is also a WCAG requirement.
What's WCAG?
WCAG stands for Web Content Accessibility Guidelines. SUNY Empire’s Electronic Information Technology (EIT) policy requires WCAG compliance. For more information on WCAG, visit WCAG 2 Overview.
What are the Requirements?
As stated by WebAIM, required color contrast ratios are as follows:
- WCAG AA, normal text = 4.5:1, large text = 3:1
- WCAG AA, graphical objects = 3:1
- WCAG AAA, normal text = 7:1, large text = 4.5:1
- Bold text at size 14 is considered large text, as is regular text at size 18.
Meet AA, Strive for AAA
- Make sure that your color contrast ratio at minimum passes for WCAG AA.
- When using WebAIM's color contrast checker, a passing color combination will be indicated in green, and a failing color combination will be indicated in red.
- As a best accessibility practice, strive for meeting WCAG AAA when possible.
Using WebAIM's Color Contrast Checker
WebAIM has an easy-to-use web-based color contrast checker: WebAIM Contrast Checker. Follow these steps to test color combinations:
- Locate the area that says Foreground Color and click the sample color (blue box).
- Select the eyedropper tool to pull a sample of the color you want to test. Alternatively, you can enter the HEX/RGB color code if you know it.
- Repeat these steps for the Background Color.
- View results to determine if you have sufficient color contrast.
- If your color combination does not pass color contrast requirements, you can increase or decrease the lightness to find a color combination that will pass.
Checking Color Contrast in Brightspace
If you choose to alter text colors in Brightspace content, you can ensure your colors meet the WCAG color contrast rations using the built-in Brightspace color selector.
- Select the color selector (the A with a paintbrush) button in the editor toolbar.
- Choose the color you would prefer to use for your text.
- Check the contrast ratio for both small and large text.
- If a green check mark appears next to both, your color selections are sufficiently high contrast.
- If a red x appears next to either, choose a different color.
Other Color Contrast Checkers
Reference
Web Accessibility in Mind (WebAIM). (n.d.). WebAIM contrast checker.
Versión en Español
Comprobando el constraste de color con los requisitos WCAG
Relevante para: profesorado y personal; estudiantes
Este artículo contiene información considerada precisa al momento de su publicación. Las actualizaciones tecnológicas, los cambios en las prácticas de seguridad de la universidad, así como en normas y procedimientos, pueden afectar la información aquí presentada. Las actualizaciones de los artículos se programan de forma periódica e incluyen los cambios necesarios.
¿Por qué es importante un contraste suficiente de color?
¿Alguna vez has tenido dificultades para leer un folleto de un evento por los colores que usaron? Un contraste de color suficiente se refiere a lo legibles y accesibles que son ciertas combinaciones de colores entre sí. Al diseñar materiales como folletos, es importante utilizar colores compatibles de primer plano y de fondo que ofrezcan suficiente contraste. Esto probablemente beneficia a todos en cierta medida, pero es especialmente importante para facilitar el acceso a personas con ciertas discapacidades visuales. Proporcionar un contraste de color suficiente también es un requisito de WCAG.
¿Qué es WCAG?
WCAG es la sigla en inglés para Directrices de accesibilidad de contenidos web. La norma de Tecnología de la Información Electrónica (EIT) de SUNY Empire exige el cumplimiento de las WCAG. Para más información sobre WCAG, visita Resumen de WCAG 2.
¿Cuáles son los requisitos?
Como WebAIM indica, las proporciones de contraste de color requeridas son las siguientes:
- WCAG AA, texto normal = 4.5:1, texto grande = 3:1
- WCAG AA, objetos gráficos = 3:1
- WCAG AAA, texto normal = 7:1, texto grande = 4.5:1
- El texto en negrita de tamaño 14 se considera texto grande, al igual que el texto normal de tamaño 18.
Conoce a AA, aspira a AAA
- Asegúrate de que tu relación de contraste de color pase al menos para WCAG AA.
- Al usar el comprobador de contraste de color de WebAIM, una combinación de color aprobada se indicará en verde y una combinación de colores que no funciona se indicará en rojo.
- Como mejor práctica de accesibilidad, procura cumplir con WCAG AAA siempre que sea posible.
Uso del comprobador de contraste de color de WebAIM
WebAIM tiene un comprobador de contraste de color web fácil de usar: Comprobador de contraste WebAIM. Sigue estos pasos para probar combinaciones de colores:
- Localiza el área que dice color del primer plano y haz clic en el color de muestra.
- Selecciona la herramienta cuentagotas para extraer una muestra del color que quieres probar. Alternativamente, puedes introducir el código de colores HEX/RGB si lo conoces.
- Repite estos pasos para el color de fondo.
- Consulta los resultados para determinar si tienes suficiente contraste de color.
- Si tu combinación de colores no cumple los requisitos de contraste, puedes aumentar o disminuir la luminosidad para encontrar una combinación que pase.
Otros verificadores de contraste de color
Referencia