Fixing poor colour choices

Sometimes brand guidelines can be hard on the eyeball, and you don't have the clout to rewrite them.

by RenaissanceDesign

HTML

<div class="demo">
<h3>This div is a pain in the dick to read, because it has horrible contrast</h3>
<p>Sometimes you may be forced to deal with <strong>poor colour choices</strong>. Maybe the client's brand guidelines were set in stone for print and don't translate well to backlit screens, or the designer is more worried about making things pretty than making things legible. Fear ye not, for it's possible to fudge a <em>little bit</em> more readability into even really low contrast text.</p>
</div>

<div class="demo legible">
<h3>This div has the same colours, but the edges of text are sharper and less eye-straining</h3>
<p>Sometimes you may be forced to deal with <strong>poor colour choices</strong>. Maybe the client's brand guidelines were set in stone for print and don't translate well to backlit screens, or the designer is more worried about making things pretty than making things legible. Fear ye not, for it's possible to fudge a <em>little bit</em> more readability into even really low contrast text.</p>
</div>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fefdf5;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

.demo {
  margin: 1.5em auto;
  padding: 1.5em;
  background-color: #bbffd2;
}

.legible {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}