Designing for Dyslexics: Part 2 of 3

Posted November 1st, 2006 by Mel Pedley

This is second of a series of three articles. In Part 1 of this series, we looked briefly at what dyslexia is and some of the generic problems dyslexics face when surfing the web. In this segment, I’m going to focus on a particular hot topic for dyslexics — colour contrast. You may well follow W3C recommendations regarding colour contrast but you may be creating problems for as many as 10% of your site visitors.

The Background

The Web Content Accessibility Guidelines 1.0 (WCAG) addresses the issue for colour contrast in Checkpoint 2.2:

“Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.” –W3C

It also suggests algorithms for determining colour brightness and colour difference and defines an “acceptable” threshold in each case:

  • The range for colour brightness difference is 125.
  • The range for colour difference is 500.

However, I’m arguing that, if you comply with the W3C thresholds, you could be creating problems for many dyslexics.


In Part 1, I described a condition known as Scoptic Sensitivity Syndrome. This syndrome can make high contrast text difficult to read because the words seem to constantly move on the page.

Admittedly it’s difficult to estimate how many dyslexics suffer from specific Scoptic Sensitivity. However, anecdotal evidence suggests that, as soon as you reduce the colour contrast, the reading difficulties suffered by dyslexics are alleviated, to some degree, across the board. A simple example would be printing worksheets using black text on yellow paper rather than black text on white. This suggests that a significant number of dyslexics suffer from some form of contrast sensitivity.

My own research indicates that the contrasts favoured by dyslexics when reading from a screen fall significantly short of W3C’s recommended thresholds. Contrasts that comply with the thresholds can, and do, create very real problems for dyslexics.

What About People with Visual Impairments?

I appreciate that a minimum colour contrast is necessary for people with visual impairments. But, it has been my experience that just about every issue within accessible web design is about balance. Skew any one factor too much in favour of a particular user group and you risk disadvantaging another group with opposing needs.

So, where is the balance with regard to colour contrast? Why does WCAG 1.0 focus exclusively on ensuring that pages contain “sufficient contrast” and say nothing about the possibly larger group of dyslexics who will be actively disabled by high contrasts.

Not one word about the issues that can actually be created when implementing colour contrasts that significantly exceed their quoted thresholds.

This argument isn’t about ignoring the needs of the visually impaired. It’s about seeking a reasonable balance in an area of web design where no such balance currently exists.

What’s the Solution?

I’m not suggesting that developers ignore colour contrast issues or consign W3C’s suggested algorithm to a category marked “Useless.” To do so would be to actively disable a significant number of visually impaired users.

What I am suggesting is that, if a colour theme is chosen that conforms to, or exceeds, the W3C colour difference threshold, an alternative, low contrast style sheet should be provided as standard. Or use a lower contrast scheme for the site default and provide a high contrast sheet. That way, no one user group is disadvantaged and each group can choose the option that suits their particular need. However, that’s the ideal scenario and we rarely live, or design, within an ideal world.

If providing an alternative style sheet is not an option, consider lowering the contrast slightly. Yes, I mean drop the colour difference below that recommended by W3C to 400 instead of 500. This would be in accordance with the range used by Hewlett Packard which recommends a colour difference limit of 400.

I’ve put together a simple test page to demonstrate this in action. The page includes examples of colour combinations that do not comply with W3C’s and similar ones that do. Personally I find the “non-compliant” sections — especially the headings — far less tiring to read. Yet the W3C recommendations do not make any allowance for bold text — a factor that should be considered when determining a reasonable, balanced, colour contrast.

Who is Likely to be Adversely Affected by Lowered Contrast Thresholds?

The obvious answer would be the groups defined in Checkpoint 2.2 but, on closer analysis, I’m not convinced that this would automatically be the case.

Checkpoint 2.2 defines one of the affected groups as “someone having colour deficits.” In other words, some form of colour blindness.

I tested each of the “non-compliant” colour combinations on the test page using the Visicheck filter against three types of colour blindness. None appeared to create a problem. This suggests that the colour difference threshold could be reduced without creating problems for people with colour blindness providing the appropriate checks are also carried out.

Checkpoint 2.2 also includes the phrase “when viewed on a black and white screen.” Is this really a true web accessibility issue? In “Definitions of Web Accessibility,” I eventually came to the conclusion that web accessibility was about designing pages that were usable by “people with disabilities.” I then suggested that “disability” be defined as an “inability to pursue an activity because of a medically determinable physical or mental impairment.”

I’ve racked my brain but I cannot think of a medically determinable physical or mental impairment that would necessitate the use of a black and white screen. I think the latter is far more likely to be the result of either financial hardship or free choice. Neither of which are medically determinable disabilities. So a hard line approach could reasonably question whether this group should even be mentioned in web accessibility guidelines!

What About Visually Impaired Users?

Reducing the colour difference threshold by a factor of 10-20% should not impact too significantly on visually disabled users. As with dyslexics, the design issues relating to visual problems are complex and cannot be addressed by simply racking up page contrasts. But again, it’s all about striking a reasonable balance.

In fact, it has been reported that very high contrast text, such as black on pure white, results in letters that lose their rounded edges and pixelate when enlarged with low vision technologies such as ZoomText. In some extreme situations, the letters can even become unrecognisable!

So, generally speaking, the higher the contrast the greater the likelihood of actually introducing problems for people with visual impairments. This would seem to be completely contrary to the reason for considering high contrasts in the first place. Yet WCAG does not contain a single warning about these issues.


In summary, I think less emphasis on higher contrasts, lower contrasts for bold text and a slight reduction in the threshold for colour difference will result in pages that will be easier for dyslexic users to read but will not adversely affect the visually impaired or colour blind to any major degree.

I suggest that adhering to the Hewlett-Packard colour difference threshold would represent a more balanced approach to the issue of colour contrast. To that end, I’ve developed an alternative color contrast analyser for people to try. As well as using the Hewlett-Packard Color Difference threshold, it also provides a “high contrast warning” if the colour difference exceeds 600. This latter figure is really just a guess on my part, so I’d be interested in gathering any evidence that might help provide a better threshold for dyslexics.

Another positive side effect of reduced contrasts may well be that users without any special needs will find reading web pages less tiring on the eyes. This should enhance overall readability and encourage the typical user to stay on our web pages a little longer. Something, I think, we would all like to see happen.

Would you like to view comments on this article?

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.