**Do you want to request a *feature* or report a *bug*?**
This is an accessibility issue with the new documentation website.

It's a clear-cut problem, but the solution is pretty open ended and ill defined. Might be difficult, and could use some design creativity.

**What is the current behavior?**
We are using [Prism.js](http://prismjs.com/) for the syntax highlighting styles of our code snippets. We also sometimes want to "highlight" a certain line, so we lighten the background of that line. With the lighter background, many of the font colors don't provide enough contrast.

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/ebsrpraL/).**

You can verify this by [running the aXe a11y audit](https://www.deque.com/products/axe/) on this page: https://reactjs.org/docs/introducing-jsx.html

**What is the expected behavior?**

We need a way to highlight a line without losing so much contrast.

BUT choosing a different hue without making it lighter looks bad in my opinion, and I would rather not fiddle with the various font colors used in the syntax highlighting.

We should either collaborate with the Prism project to add a 'highlight' option with enough contrast, or find another library/system to use for syntax highlighting.

color: prismColors.keyword,
});
css.global(
  `
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata`,
  {
    color: prismColors.comment,
  },
);
css.global(
  `
.token.property,
.token.number,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted`,
  {
    color: prismColors.primitive,
  },
);
css.global(`.token.boolean`, {
  color: prismColors.boolean,
});
css.global(`.token.tag`, {
  color: prismColors.tag,