Indeed, pink is my favorite color, and I want you all to know it. But I also want you all to read my posts. yet, I am not sure how much of them you’ll actually read entirely if I use white fonts over a pink background.
The Web Content Accessibility Guidelines of the W3C regarding color contrasts states that “Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.” According to them, this range is 500 or greater for the color difference and 125 or greater for color brightness.
There are several tools out there to help you figure out if your color selection meets the W3C standards. I used this one, to scan my portfolio page. It did not pass the test: color difference: 484 and color brightness 184.
Obviously, I had to re-think my design and color combinations. So I came up with the following solution: my portfolio will keep its pink background for now – there isn’t too much reading in this page anyway – but my blog will use a combination white background, dark gray fonts and pink titles and links. This way, I not only improve readability, but I also differentiate graphically, my portfolio – isabellegarcia.com – from my blog – aicragellebasi.com.
And because a picture is worth 1000 words, here is a mockup of the overall new design of both parts and their relation between each other.
Now you have no excuse. The only thing that could impede you to read till the last paragraph of my posts, would be that you find them boring. I hope this won’t happen.Posted in Isabelle Garcia
Tags: Accessibility, Color contrast, sitemap, W3C, wireframe