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.
17th January 2007
These colours were inspired by a beer mat we picked up in a pub last night. We brought the mat home, scanned it in, sampled some colours and tweaked them to get the right levels of colour contrast. Pint anyone? Um… accessible pairings of colours are as follows:
| 1. #000000 and #eae3d2 | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #000000 and #eeb557 | Example 2.1 | Example 2.2 |
| 3. #412f2d and #eae3d2 | Example 3.1 | Example 3.2 |
14th January 2007
This colour scheme is predominantly purple, with colours with adequate contrast against black and white for various options of how to present the content of the website. Accessible pairings of colours are as follows:
| 1. #000000 and #ffffff | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #000000 and #b5b0b8 | Example 2.1 | Example 2.2 |
| 3. #ffffff and #5D396C | Example 3.1 | Example 3.2 |
13th January 2007
This colour scheme is somewhat lacking in colour but used in the right way could be very stylish. Ideal for an artist’s website where the images are the most important thing and should not be overshadowed by the website’s design. Accessible pairings of colours are as follows:
| 1. #000000 and #ffffff | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #000000 and #d7d7d7 | Example 2.1 | Example 2.2 |
| 3. #000000 and #acacac | Example 3.1 | Example 3.2 |
| 4. #464646 and #ffffff | Example 4.1 | Example 4.2 |
31st December 2006
Another colour scheme using red as the accent colour. The colours are predominantly browns and cream, but with the strong red to add interest. Accessible pairings of colours are as follows:
| 1. #790026 and #ffffcc | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #3d240c and #ffffcc | Example 2.1 | Example 2.2 |
| 3. #513923 and #ffffcc | Example 3.1 | Example 3.2 |
30th December 2006
This colour scheme consists of strong greens, a light green for highlighting and a strong red for accent colour. The strong colours can’t be used together to convey information as the contrast is very poor, however combinations of the darkest greens or red on white offers an excellent level of contrast. Accessible pairings of colours are as follows:
| 1. #5d1f22 and #ffffff | Example 1.1 | Example 1.2 |
|---|---|---|
| 2. #2a3f1c and #ffffff | Example 2.1 | Example 2.2 |
| 3. #4c663a and #ffffff | Example 3.1 | Example 3.2 |
| 4. #5d1f22 and #edf0eb | Example 4.1 | Example 4.2 |
| 5. #2a3f1c and #edf0eb | Example 5.1 | Example 5.2 |
