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.
2nd June 2007
This is very exciting as we have received our first submitted colour scheme, so thanks to Julie for the following:
#204e77
#a99a89
#7d6488
#5d1f22
#ffaa01
There is just one accessible pairing of colours in this selection:
| 1. #5d1f22 and #ffaa01 |
Example 1.1 |
Example 1.2 |
I would therefore suggest changing the orange for white and maybe lightening the taupe a bit, to give the following:
#204e77
#cfc7bd
#7d6488
#5d1f22
#ffffff
And these accessible combinations:
| 1. #ffffff and #204e77 |
Example 1.1 |
Example 1.2 |
| 2. #ffffff and #7d6488 |
Example 2.1 |
Example 2.2 |
| 3. #ffffff and #5d1f22 |
Example 3.1 |
Example 3.2 |
| 4. #cfc7bd and #204e77 |
Example 4.1 |
Example 4.2 |
| 5. #cfc7bd and #5d1f22 |
Example 5.1 |
Example 5.2 |
Of course there are other ways of increasing the contrast between the suggested colours - instead of bringing in the white I could have chosen a lighter shade of orange so that it would work with the blue. Thanks again for the suggestion, keep them coming!
7th May 2007
#ffffff
#ffaa01
#f96c1d
#8a462e
#000000
The warm yellow, orange and brown of this colour scheme are reminiscent of autumn leaves. Accessible pairings of colours are as follows:
| 1. #ffffff and #8a462e |
Example 1.1 |
Example 1.2 |
| 2. #ffffff and #000000 |
Example 2.1 |
Example 2.2 |
| 3. #ffaa01 and #000000 |
Example 3.1 |
Example 3.2 |
| 4. #f96c1d and #000000 |
Example 4.1 |
Example 4.2 |
4th February 2007
#1e444e
#3f2358
#bc85a8
#f4d5e8
#ffffff
This colour scheme combines striking blue and purple with subtler pinks. Accessible pairings of colours are as follows:
| 1. #1e444e and #ffffff |
Example 1.1 |
Example 1.2 |
| 2. #3f2358 and #ffffff |
Example 2.1 |
Example 2.2 |
| 3. #1e444e and #f4d5e8 |
Example 3.1 |
Example 3.2 |
| 4. #3f2358 and #f4d5e8 |
Example 4.1 |
Example 4.2 |
28th January 2007
#295e51
#204e77
#6593bc
#f1f4f4
#ffffff
The first colour scheme for this website was thought to be a bit lacking in colour, so we are trying out version two. This scheme uses complementary greens and blues to bring more colour to the page. Accessible pairings of colours are as follows:
| 1. #295e51 and #ffffff |
Example 1.1 |
Example 1.2 |
| 2. #204e77 and #ffffff |
Example 2.1 |
Example 2.2 |
| 3. #295e51 and #f1f4f4 |
Example 3.1 |
Example 3.2 |
| 4. #204e77 and #f1f4f4 |
Example 4.1 |
Example 4.2 |
21st January 2007
#5e191c
#2c313b
#8c98ae
#dbdce3
#ffffff
This colour scheme could be used for a corporate-style website. It is a combination of blues with red as a highlight colour. Accessible pairings of colours are as follows:
| 1. #5e191c and #ffffff |
Example 1.1 |
Example 1.2 |
| 2. #2c313b and #ffffff |
Example 2.1 |
Example 2.2 |
| 3. #5e191c and #dbdce3 |
Example 3.1 |
Example 3.2 |
| 4. #2c313b and #dbdce3 |
Example 4.1 |
Example 4.2 |
