I chose the wrong color palette because they were not accessible. This is how I fix that.
Tags: colorcontrast, a11y, mistakes
Published: 2019-09-01 15:45:43

---
title: I chose the wrong color palette because they were not accessible. This is how I fix that.
published: true
description: Making sure the colors you chose have enough contrast is important for accessibility reasons. Using Firefox or Chrome accessibility tools and the website mentioned in this article really helps.
tags: color contrast, accessibility, mistakes
series: Building jvega.dev
---

So when I decided to build a new website and resume, I made the decision to use the same design in both. As I wanted to start applying for jobs and the first thing it is always asked is the resume, I decided to do that first.

I got inspiration from some websites online (as I am not a designer) and I decided to keep it simple: one accent color, two shades of gray and a light color for text. So I chose these ones:

```css
html {
  --accent-color: #5addf3;
  --page-background-color: #191919;
  --content-background-color: #525659;
  --text-color: #ffffff;
}
```

So this is how my resume would look like:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rk94y2zzh7vl5xlvswgt.png)

> I know many companies still print resumes for interviews etc., so I decided to create a *printer-friendly-version* as well. Trying to be as environment-friendly as possible:

> ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4jp1lgmist9uses43upl.png)

I know what you are thinking: how could you chose those colors, it is pretty obvious that there is no enough contrast!!! And yes, I suspected that but I didn't pay so much attention to it until I started building the website and started checking accessibility... You can do that very easily in your browser dev-tools:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wabdd6k5wda8n9vpe5o0.png)
*Firefox web dev tools*

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8m8ufj6kqdbxkynsx7w3.png)
*Chrome dev tools*

Yeap, too bad :(. Does Microsoft Word have any tools to check the accessibility of your document? I have no idea but maybe they should.

So I guess better late than never, so, unfortunately, I would have to make changes in the color palette and change my resume to use the new ones. 

Searching on the Internet I came across this really useful website:

[Grid Contrast by Eighshapes](http://contrast-grid.eightshapes.com)

And it really really really helped. You set the color and background colors and show you how it looks and the contrast score:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dq88tc86usc92d6eidby.png)

After spending some time choosing the colors I realized that I would have to extend the palette to add one additional color, as a darker blue would not work with a gray background. And I made a compromise not targetting 100% AAA contrast and settling only in AA. One of the ideas I have is to provide multiple themes for the website, so I might introduce later a *high-contrast* theme to hit AAA. I settled on this color palette for now:

```css
html {
  --accent-color: #5addf3;
  --accent-backgroud-color: #0B8296;
  --page-background-color: #191919;
  --content-background-color: #525659;
  --text-color: #ffffff;
}
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3svnye83ooe5e33z4lt6.png)

[New colors](http://contrast-grid.eightshapes.com/?background-colors=%23FFFFFF%2C%20Text%20color%0D%0A%235ADDF3%2C%20Accent%20color%0D%0A%230B8296%2C%20Acccent%20background%20color%0D%0A%23525659%2C%20content%20background%20color%0D%0A%23191919%2C%20page%20background%20color%0D%0A&foreground-colors=%23FFFFFF%2C%20White%0D%0A%235addf3%2C%20light%20blue%0D%0A%23525659%0D%0A%23191919%0D%0A%230B8296&es-color-form__tile-size=regular)

And...

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m9avsa3bjl38hzmukmhe.png)

Of course, this is just the beginning. My goal is to make sure the final website keeps the same score.