Diseño web en Tehuacan
Colores
9.1 Contraste de colores
Puntos de verificación en esta sección:
2.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas
por personas con deficiencias de percepción de color o en pantallas en blanco y negro. [Prioridad 2 para imágenes, Prioridad 3 para
texto].Diseño web en Tehuacan
Técnicas:
• Use números en vez de nombres, para especificar colores.
Ejemplo
Use números en vez de nombres, para colores:
h1 {color: #808000}
h1 {color: rgb(50%,50%,0%)}
Ejemplo desaconsejado
h1 {color: red}
Use estas propiedades CSS para especificar colores:
• «color», para el color de primer plano del texto.
• «background-color», para el color de fondo.
• «border-color», «outline-color» para colores de bordes.
• Para colores de vínculos, haga referencia a las pseudo-clases :link, :visited, y :active.
Asegúrese de que los colores de primer plano y de fondo tienen buen contraste. Si especifica el color de primer plano, siempre debe
especificar también el color de fondo (y viceversa).
9.2 Asegurarse de que la información no se transmite sólo por el color
Puntos de verificación en esta sección:diseño web
2.1 Asegúrese que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante
el contexto o por marcadores. [Prioridad 1]
Asegúrese de que la información no se transmite sólo a través del color. Por ejemplo, cuando pida intervención de los usuarios, no
escriba «por favor, seleccione uno de los ítems indicados en verde». En su lugar, asegúrese de que la información está disponible a
través de otros efectos de estilo (por ejemplo un efecto de fuente) y a través del contexto (por ejemplo, vínculos de texto detallados).
Por ejemplo, en la versión electrónica de este documento se ha dado estilo a los ejemplos por defecto (a través de hojas de estilo)
de la siguiente manera:Diseño web en Tehuacan
• Están rodeados por un borde.
• Utilizan un color de fondo diferente.
• Comienzan por la palabra «Ejemplo» (o «Ejemplo desaconsejado»).
•También terminan con la frase «fin del ejemplo», pero esta frase está escondida por defecto con «display: none». Para las aplicaciones
de usuario que no soportan hojas de estilo o cuando se desconectan las hojas de estilo, este texto ayuda a delimitar el fin de un
ejemplo a los lectores que no sean capaces de ver el borde que rodea el ejemplo.
Test rápido: Para verificar si su documento funciona aun sin colores, examínelo con un monitor en blanco y negro o con el color
desactivado en el navegador. Igualmente, intente configurar su navegador con un esquema de colores que sólo utilice blanco, negro
y los cuatro tonos de gris básico de la paleta del navegador y compruebe como se presenta la página.diseño web en Puebla
Test rápido: Para verificar si el contraste de color es suficiente para ser distinguido por personas con deficiencias en la percepción
del color, o por aquellos con monitores de baja resolución, imprima las páginas en una impresora en blanco y negro (con los fondos
y colores en escala de grises). Intente también fotocopiar lo impreso dos o tres veces para ver cómo se deteriora. Ello le mostrará
dónde necesita añadir señales redundantes (ejemplo: los hipervínculos están normalmente subrayados en las páginas Web), o si las
señales son demasiado pequeñas o indistintas para mostrarse bien.Diseño web en Tehuacan
Para mayor información sobre colores y contrastes, consulte [LIGHTHOUSE].