4.7: Evaluación del contraste de color
- Page ID
- 154648
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)Simulaciones de daltonismo
Comprobadores de contraste de color
Una búsqueda rápida en Internet para “prueba de contraste de color” debería aparecer una variedad de herramientas que puede usar para probar el contraste. Aquí, mencionaremos el Verificador de Contraste de Color WebAIM, pero si prefieres otro, puedes agregarlo a tu Toolkit.
Por qué es importante el contraste de color
Tal vez recuerdes de la unidad Introducción a WCAG 2.0 que las Directrices de WCAG 2.0 1.4.3 y 1.4.6 abordan los problemas de accesibilidad asociados con el contraste de color. Estos dos lineamientos se presentan a continuación. Anote las relaciones de contraste en cada nivel (4. 5:1 y 3:1 en el Nivel AA y 7:1 y 4. 5:1 en el Nivel AAA para texto más pequeño y grande respectivamente).
1.4.3 Contraste (Mínimo): La presentación visual de texto e imágenes de texto tiene una relación de contraste de al menos 4. 5:1, a excepción de lo siguiente (Nivel AA):
- Texto grande: El texto a gran escala y las imágenes de texto a gran escala tienen una relación de contraste de al menos 3:1
- Incidental: El texto o las imágenes de texto que forman parte de un componente de interfaz de usuario inactivo, que son pura decoración, que no son visibles para nadie, o que forman parte de una imagen que contiene otro contenido visual significativo, no tienen ningún requisito de contraste.
- Logotipos: El texto que forma parte de un logotipo o marca no tiene ningún requisito mínimo de contraste.
1.4.6 Contraste (Mejorado): La presentación visual de texto e imágenes de texto tiene una relación de contraste de al menos 7:1, a excepción de lo siguiente (Nivel AAA):
- Texto grande: El texto a gran escala y las imágenes de texto a gran escala tienen una relación de contraste de al menos 4. 5:1.
- Incidental: El texto o las imágenes de texto que forman parte de un componente de interfaz de usuario inactivo, que son pura decoración, que no son visibles para nadie, o que forman parte de una imagen que contiene otro contenido visual significativo, no tienen ningún requisito de contraste.
- Logotipos: El texto que forma parte de un logotipo o marca no tiene ningún requisito mínimo de contraste.
Algunos verificadores de accesibilidad tendrán una evaluación de contraste de color incorporada en ellos (por ejemplo, aChecker), pero otros no.
Técnico:
Hay muchos evaluadores de contraste de color entre los que puede elegir apoyar sus pruebas de contraste (vea algunas sugerencias a continuación). El uso de cualquiera de estas herramientas requiere recopilar los códigos de color de los elementos evaluados. Hay una variedad de formas de encontrar estos códigos, aunque la más fácil es usar la función “Inspeccionar” de un navegador. Puede inspeccionar los colores en el marco derecho, como se muestra en la siguiente figura.
Figura: Inspeccione el panel que muestra los códigos de color en el panel Estilo a la derecha
Una vez que haya probado algunas combinaciones de colores, desarrollará rápidamente una “sensación” para un buen contraste, y podrá escanear rápidamente una página e identificar dónde el contraste puede no ser suficiente. Puedes probar los colores específicos asociados a esos elementos que hayas identificado en un escaneo. Sin embargo, hay herramientas que evaluarán todos los colores de una página (por ejemplo, AChecker); esto puede ser preferible si está revisando un sitio que parece tener múltiples problemas de contraste.
Para un paseo por el verificador de contraste de color WebAIM, vea el siguiente video:
Video: Comprobación del Contraste de Color
Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/pwaa/?p=1317
La anatomía de una pantalla de resultados de contraste de color
En la siguiente figura puedes ver los códigos de color de primer plano (#007ac6) y color de fondo (#ffffff) ingresados en los campos respectivos. A continuación verá el estado de cumplimiento para el texto Normal y Grande, en el Nivel AA y el Nivel AAA. En este caso los colores contrastan lo suficientemente bien como para pasar al Nivel AA (4. 57:1), pero para texto más pequeño la relación de contraste falla en el Nivel AAA. Los sitios deben apuntar al contraste de Nivel AA, pero si es factible, intente cumplir con el Nivel AAA.
Observe los enlaces de aclarar y oscurecer junto al campo de entrada de color. Puede hacer clic en estos (en el sitio de prueba) para ajustar los colores para que pasen, luego tomar los códigos de color resultantes y reemplazar los códigos existentes para ajustar el color en el sitio que se está evaluando para que cumpla.
Figura: El verificador de contraste de color WebAIM
Otros Comprobadores de Contraste
Aquí hay algunos otros probadores de contraste de color con los que quizás desee experimentar: