diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.spanish.md index 8a7333d63c..4bc75a8f41 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.spanish.md @@ -3,10 +3,10 @@ id: 587d778f367417b2b2512aac title: Avoid Colorblindness Issues by Using Sufficient Contrast challengeType: 0 videoUrl: '' -localeTitle: Evite los problemas de ceguera al color usando un contraste suficiente +localeTitle: Evita Problemas de Daltonismo Usando Suficiente Contraste --- -## Description +## Descripción
El color es una parte muy importante del diseño visual, pero su uso presenta dos problemas de accesibilidad. Primero, no debe usarse solo el color como la única forma de transmitir información importante porque los lectores de pantalla no pueden detectarlo. En segundo lugar, los colores de fondo y de primer plano necesitan el contraste suficiente para que los usuarios con daltonismo los puedan distinguir. Los desafíos anteriores cubren alternativas para el primer problema. El último desafío introdujo herramientas de comprobación de contraste para ayudar a resolver el segundo. La WCAG recomienda una proporción de contraste de 4.5:1, aplica tanto para uso con colores como para uso con escala de grises. @@ -15,7 +15,7 @@ Los usuarios con daltonismo tienen problemas para distinguir algunos colores de En la práctica la proporción de 4.5:1 puede obtenerse oscureciendo el color más oscuro y aclarando el más claro con la ayuda de una herramienta de comprobación de contraste. Los colores más oscuros en la rueda de colores son los azules, violetas, magentas y rojos, mientras que los colores más claros son los naranjas, amarillos, verdes y verde-azules.
-## Instructions +## Instrucciones
Gato camper está experimentando con el uso de color de fondo y color de texto de su blog, pero su combinación actual de un color de fondo verdoso background-color con un color de texto marrón color tiene una proporción de 2.5:1 de contraste. Puedes ajustar fácilmente el brillo de los colores gracias a que usó la propiedad CSS hsl() para declararlos modificando el valor del tercer argumento (hsl viene de: hue, saturation, lightness. Que significa: matiz, saturación, brillo). Aumenta el brillo del background-color de 35% a 55%, y reduce el brillo del color de 20% a 15%. Esto mejora la proporción de contraste a 5.9:1.
## Tests @@ -23,9 +23,9 @@ En la práctica la proporción de 4.5:1 puede obtenerse oscureciendo el color m ```yml tests: - - text: Su código solo debe cambiar el valor de luminosidad de la propiedad de color del texto a un valor del 15%. + - text: Tu código solo debe cambiar el valor de luminosidad de la propiedad color del texto a un valor del 15%. testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text color property to a value of 15%.");' - - text: Su código solo debe cambiar el valor de luminosidad de la propiedad de background-color a un valor del 55%. + - text: Tu código solo debe cambiar el valor de luminosidad de la propiedad background-color a un valor del 55%. testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the background-color property to a value of 55%.");' ``` @@ -65,7 +65,7 @@ tests: -## Solution +## Solución
```js