‘Fluro’ Colours
accessibility, WCAG 2.0, Web
My attention was recently drawn by Jenny Bruce to the relatively large number of sites that use bright ‘fluro’ background colours for navigation menu items and buttons. The combination of these ‘fluro’ background colours and white text often fails to meet the minimum colour contrast requirements of the Web Content Accessibility Guidelines 2.0, whereas, when the text colour is black the contrast ratio is acceptable.
Jenny also made the observation that it can be very difficult to convince people not to use white text against ‘fluro’ background particularly since, “many ‘regular’ users – i.e. those without known vision colour contrast problems – say they find white text against these colours to have better contrast and/or to be more aesthetically pleasing than black.”
This all got me thinking and so I decided to look a little more closely at these colour combinations under different conditions. I started by preparing a swatch which combines white (#ffffff) or black (#000000) text with the following background ‘fluro’ colours:
Orange: #FF6600
Green: #6E9800
Pink: #FF0084
Blue: #529FD6
Purple: #9966FF
As we know, WCAG 1.0 and WCAG 2.0 have different colour contrast requirements and use different methods for determining compliance with those requirements. However as a general rule, it appears that in most situations designers find the WCAG 2.0 requirements less constraining:
WCAG 1.0 requirement
Checkpoint 2.2: Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text].”
Two formulas are provided to help determine if the contrast in colour brightness and colour difference between the foreground (text) colour and background colour is sufficient. When using these formulas with WCAG 1.0 Checkpoint 2.2, the W3C recommends the difference between foreground and background colour brightness be greater than 125, and the colour differences be greater than 500. The result is often presented in this format 135/507.
WCAG 2.0 requirement
WCAG 2.0 is different to WCAG 1.0 in that there are two Success Criteria relating colour contrast and several exemptions are identified. The following Success Criteria applies to most situations:
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
The WCAG 2.0 contrast ratios are determined with a complicated algorithm that measures the relative luminance of the text letters. For most text the minimum contrast ratio is 4.5:1. For large-scale text (more than 14 point bold or 18 point not bold) the minimum ratio is 3.0:1.
Colour contrast tests
I tested the colour combinations using the WAT Colour Contrast Analyser (which can be downloaded from the Paciello Group site) using both the WCAG 1.0 and WCAG 2.0 algorithms. The results were:
| White on orange WCAG 1: 119/408 WCAG 2: 2.9:1 |
Black on orange WCAG 1:136/357 WCAG 2: 7.2:1 |
| White on green WCAG 1: 133/503 WCAG 2: 3.4:1 |
Black on green WCAG 1: 122/262 WCAG 2: 6.2:1 |
| White on pink WCAG 1: 164/378 WCAG 2: 3.8:1 |
Black on pink WCAG 1: 91/387 WCAG 2: 5.6:1 |
| White on blue WCAG 1: 113/310 WCAG 2: 2.9:1 |
Black on blue WCAG 1: 142/455 WCAG 2: 7.3:1 |
| White on purple WCAG 1: 121/255 WCAG 2: 3.7:1 |
Black on purple WCAG 1: 134/510 WCAG 2: 5.7:1 |
I feel several interesting observations can be made about these results:
- While all of the examples using white text fail to meet the WCAG 2.0 minimum contrast ratio of 4.5:1, all examples using black text exceed this requirement with the lowest score being 5.6:1.
- With WCAG 1.0 the results are less clear cut, with some of the white and black text examples meeting and failing to meet the minimum requirement of 125/500. Also, four of the WCAG 1 black text examples failed to meet the minimum requirement.
- The difference between the WCAG 1.0 and WCAG 2.0 results for black or white text on the green and blue backgrounds appear to be particularly interesting.
Not everyone has perfect colour vision
I was also interested to see how these colour combinations might be perceived under other conditions. The following tables give the results for these colour combinations when viewed in greyscale (converted with WAT colour tool), and as they might be perceived by someone with deuteranopia (a form of red/green color deficit). The deuteranope simulation was done using Vischeck.
| Background colour | GREYSCALE White text |
GREYSCALE Black text |
| Orange | WCAG 1: 119/357 WCAG 2: 3.5:1 |
WCAG 1: 136/408 WCAG 2: 5.9:1 |
| Green | WCAG 1: 133/399 WCAG 2: 4.3:1 |
WCAG 1: 122/366 WCAG 2: 4.9:1 |
| Pink | WCAG 1: 164/492 WCAG 2: 6.8:1 |
WCAG 1: 91/273 WCAG 2: 3.1:1 |
| Blue | WCAG 1: 113/399 WCAG 2: 3.3:1 |
WCAG 1: 142/426 WCAG 2: 6.4:1 |
| Purple | WCAG 1: 120/360 WCAG 2: 3.6:1 |
WCAG 1: 134/405 WCAG 2: 5.8:1 |
Greyscale comments
- With WCAG 2, when the colours are converted to greyscale all of the contrast ratios are higher than they were with the actual background colour, and in the case of white on pink it greatly exceeded the minimum requirement. However, with the black text all the ratios were less than they were with the background colour and in the case of the pink background failed to meet the required ratio.
- With WCAG 1, neither the white or black text met the minimum requirement when converted to greyscale, although the white on pink and black on blue were close.
| Background colour | DEUTERANOPE White text |
DEUTERNOPE Black text |
| Orange | WCAG 1: 100/407 WCAG 2: 2.4:1 |
WCAG 1: 155/358 WCAG 2: 8.7:1 |
| Green | WCAG 1: 131/460 WCAG 2:3.8:1 |
WCAG 1: 124/305 WCAG 2: 5.5:1 |
| Pink | WCAG 1: 103/323 WCAG 2: 2.8:1 |
WCAG 1: 152/442 WCAG 2: 7.4:1 |
| Blue | WCAG 1: 110/284 WCAG 2: 3.1:1 |
WCAG 1: 145/481 WCAG 2: 6.8:1 |
| Purple | WCAG 1: 119/284 WCAG 2: 3.1:1 |
WCAG 1: 136/481 WCAG 2: 6.5:1 |
Deuteranopia comments
- With WCAG 2, when deuteranopia is simulated none of the white text and background colour combinations came close to meeting the required contrast ratio of 4.5:1. With white text, the greatest problems appear to be with the orange (2.4:1) and pink (2.8:1) backgrounds. However, with black text the required contrast ratio was greatly exceeded with all the background colours when deuteranopia is simulated. Interestingly, with black text the highest ratios were for the orange (8.7:1) and pink (7.4:1) backgrounds.
- With WCAG 1, the results for the deuteranopia simulation were similar to those obtained with the actual background colours, except that with both the white and black text none of the results met the minimum requirement when deuteranopia is simulated although green on white, black on blue and black on purple are close.
The attached power point slides contain screen shots of the colour swatches and how they appear in greyscale, and when the conditions of deuteranopia and protanopia are simulated. These are the most common forms of impaired colour vision perception.
In conclusion, the results obtained when testing these colour combinations using the WCAG 2 algorithm appear to be more consistent than is the case with the WCAG 1 formulas, particularly when the colours are presented under different conditions. Also, people with deuteranopia are likely to experience significantly greater problems when white text is combined with these ‘fluro’ colours when compared to the rest of the population. But, when black text is used the ability of people with deuteranopia to perceive a difference between the foreground text and these background ‘fluro’ colour is likely to be improved.