‘Fluro’ Colours

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:

Fluro colours with white and black text
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:

  1. 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.
  2. 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.
  3. 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.

Fluro – greyscape with white and black text
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

  1. 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.
  2. 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.
Fluro – deuteranope simulation with white and black text
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

  1. 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.
  2. 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 powerpoint 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.

3 Comments

  1. Roger, I think you’ve hit on one reason that the ultimate answer to making content accessible is not to find some magical combination that works for everyone. Instead, it’s to assign your site’s foreground and background colors in ways that can be quickly and systematically overridden by the user.

    As you note, if I need high contrast and your background is pink, whether white or black is your better choice for the text depends on whether I see close to in full color or nearly in grayscale.

    And, believe it or not, the matter gets even more complicated. As Wayne Dick has noted, both WCAG 1.0 and WCAG 2.0 fail to consider the fact that for some people the problem is that the color contrast is too high. (See Wayne’s blog at http://blog.knowbility.org/?p=321 )

    Briefly speaking, people who have moderate low vision can read your Web page if they can enlarge the text enough and get close enough to the screen. Assuming that you have normal or near-normal vision, try reading this way yourself and you’ll notice that the problem is when contrast is too high, and almost never when contrast is too low. Very high contrast creates a painful glare.

    For example, when I put my glasses on, I have normal vision. Reading under Wayne’s conditions, I can perceive text with a contrast ratio of 1.1:1. But anything close to pure white and even some of your fluoro colors becomes a painful glare to me under those conditions.

    So what’s the answer? If we make our text conform with WCAG 2.0 at Level AA (contrast ratio of at least 4.5:1), viewing our content is uncomfortable to Wayne and other people with low moderate vision.

    Worse yet, to make our text conform with WCAG 2.0 at Level AAA, we must conform with Guideline 1.4.6, Contrast (Enhanced):

    “The visual presentation of text and images of text has a contrast ratio of at least 7:1… .”

    At that contrast ratio, viewing our hypothetical website’s content would be downright painful for some people with low moderate vision.

    The best answer is to make our text conform with WCAG 2.0 Guideline 1.4.8, Visual Presentation:

    “For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)
    - Foreground and background colors can be selected by the user.
    - Width is no more than 80 characters or glyphs (40 if CJK).
    - Text is not justified (aligned to both the left and the right margins).
    - Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
    - Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.”

    In other words, achieve your formatting by using styles that can easily be overridden by the user’s own stylesheet if they so choose.

    By the way, this site seems to conform with Guideline 1.4.8. I’m not sure that the text can be resized a full 200 percent without forcing the user to scrolling, but I think it can — and it definitely meets the other four points.

    In particular, by changing my browser settings, I can control the foreground and background colors throughout — even to the point of making your examples of text on fluoro colors all look the same. Well done!

  2. Hi Roger,

    Another audience to consider is older people. The first ever guide to websites for older people (AFAIK) from the Spry Foundation [1] suggests “Fluorescent colors belong in a slightly different category. These colors are supersaturated, but in addition they reflect both normal light and ultraviolet light. The effect is very intense, but can be exhausting to the eye, especially if there are visual disabilities involved. This effect makes fluorescent colors a less than effective choice for text or background.” This is supported by others working with older people [2].

    Andrew
    [1] http://www.spry.org/pdf/website_creators_guide.pdf
    [2] http://otal.umd.edu/UUPractice/elderly/

  3. Тема, но есть много нюансов… уже обсуждали её не раз. Кстати когда постишь инфу пиши первоисточник

Leave a Reply