freeCodeCamp/improve-readability-with-high-contrast-text.spanish.md at da38c969b2c4da34ebb7a5047c7c088150a33322

Files

Sebastián da38c969b2 Fix(curriculum): Added Spanish translations and corrected grammar issues (#37799 )

* Fix(curriculum): Added Spanish translations and corrected grammar issues

* Fixed typos and added Spanish translations

Co-authored-by: sebastiansaenz <52339334+sebastiansaenz@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

2019-12-22 11:49:25 -08:00

3.1 KiB

Raw Blame History

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
587d778e367417b2b2512aab	Improve Readability with High Contrast Text	0		Mejora la legibilidad con texto de alto contraste

Description

El bajo contraste entre los colores de fondo y de primer plano puede dificultar la lectura del texto. Un contraste correcto mejora la legibilidad de su contenido, pero ¿qué significa exactamente "suficiente"? Las Pautas de Accesibilidad al Contenido en la Web (WCAG por sus siglas en inglés) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto varía de 1: 1 para el mismo color, o sin contraste, a 21: 1 para blanco contra negro, el contraste más fuerte. Hay muchas herramientas de comprobación de contraste disponibles en línea que pueden serte de ayuda para calcular esta relación.

Instructions

La elección del texto gris claro de Camper Cat sobre un fondo blanco para su reciente publicación en el blog tiene una relación de contraste de 1.5: 1, lo que dificulta su lectura. Cambie el color del texto del gris actual ( #D3D3D3 ) a un gris más oscuro ( #636363 ) para mejorar la relación de contraste a 6: 1.

Tests

tests:
  - text: Su código debe cambiar el <code>color</code> del texto del <code>body</code> al gris más oscuro.
    testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");'
  - text: Su código no debe cambiar el <code>background-color</code> de <code>background-color</code> del <code>body</code> .
    testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");'

Challenge Seed

<head>
  <style>
  body {
    color: #D3D3D3;
    background-color: #FFF;
  }
  </style>
</head>
<body>
  <header>
    <h1>Pensamientos Profundos con el Maestro Camper Cat</h1>
  </header>
  <article>
    <h2>Unas Palabras sobre el Reciente Escándalo de Doping de Catnip</h2>
    <p>La influencia que tiene el catnip sobre el comportamiento felino ha sido bien documentada, y su uso como suplemento herbario en círculos ninja de competición sigue siendo controvertido aún hoy en día. Una vez más, el debate sobre la prohibición de la sustancia se ha presentado en la opinión pública luego de la gran victoria de Kittytron, acérrimo defensor y consumidor de la sustancia verde, en el Torneo de la Garra de la Furia.</p>
    <p>Como ya me he pronunciado en el pasado, creo firmemente que las habilidades de un verdades ninja deben venir de su interior, sin ninguna influencia externa. Mi consumo personal de catnip es y seguirá siendo puramente recreativo.</p>
  </article>
</body>

Solution

// solución requerida

3.1 KiB Raw Blame History