Choosing a colour scheme for a website can be a challenge, but what about choosing an accessible colour scheme? By this we mean a colour scheme that provides sufficient contrast between the foreground and background colours to ensure that the text is legible. The aim of this website is to suggest some colour combinations that meet accessibility guidelines and demonstrate that website colour schemes don't have to be boring to make them accessible.
31st August 2008
Enough of our photos of Cornwall for a moment. This week I’ve chosen a photo of an apple from stock.xchng which has lovely rich reds, oranges and yellows.
Here are the accessible combinations:
| 1. #2f0000 and #f48222 | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #2f0000 and #ffe69e | Example 2.1 | Example 2.2 |
| 3. #2f0000 and #fff1eb | Example 3.1 | Example 3.2 |
| 4. #a81400 and #ffe69e | Example 4.1 | Example 4.2 |
| 5. #a81400 and #fff1eb | Example 5.1 | Example 5.2 |
25th August 2008
This week’s photo is of Tregeseal Stone Circle. It was a beautful sunny day in June when we walked over there.
Here are the accessible combinations:
| 1. #2f445a and #f6f6f6 | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #2f445a and #f2ecb8 | Example 2.1 | Example 2.2 |
| 3. #414520 and #f6f6f6 | Example 3.1 | Example 3.2 |
| 4. #414520 and #f2ecb8 | Example 4.1 | Example 4.2 |
12th August 2008
Carrying on with using photos for inspiration, this week’s photo is of blue sky with a fluffy white cloud.
Here are the results, cool blues and greys:
| 1. #0c0c0c and #ffffff | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #0c0c0c and #d4d5d4 | Example 2.1 | Example 2.2 |
| 3. #0c0c0c and #919da9 | Example 3.1 | Example 3.2 |
| 4. #364150 and #ffffff | Example 4.1 | Example 4.2 |
| 5. #364150 and #d4d5d4 | Example 5.1 | Example 5.2 |
3rd August 2008
This week’s inspiration comes from a photo of a courgette plant. This was a plant we grew in our porch last year and I must say it did much better than this year’s effort.
Again, I droppered some colours from the photo and tweaked them to get some good contrast for accessibility:
| 1. #505016 and #e6c770 | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #505016 and #d4d19e | Example 2.1 | Example 2.2 |
| 3. #505016 and #ffffff | Example 3.1 | Example 3.2 |
| 4. #3e4e05 and #e6c770 | Example 4.1 | Example 4.2 |
| 5. #3e4e05 and #d4d19e | Example 5.1 | Example 5.2 |
| 6. #3e4e05 and #ffffff | Example 6.1 | Example 6.2 |
27th July 2008
I was shocked to find that it’s been over a year since I’ve added to this site. How rubbish of me. Definitely time for another colour scheme!
These colours were inspired by a photo that we took whilst on a walk by the sea near where we live. It’s some exposed granite on the cliffs at Cot Valley.
I droppered some colours from the photo and then tweaked them to get some good contrast for accessibility:
| 1. #48484a and #c6cece | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #48484a and #ffffff | Example 2.1 | Example 2.2 |
| 3. #263f2c and #a0af7f | Example 3.1 | Example 3.2 |
| 4. #263f2c and #ffffff | Example 4.1 | Example 4.2 |
