Accessibility Recipes/Contrast

From DPWiki
Jump to navigation Jump to search

What to do and how?

Possibly nothing! If you haven't specified colours for anything, then you're fine. Remember PG doesn't want us to force the colours of the main body of the book.

The places where we often do specify colours are

  • Visible page numbers—often grey on white
  • Links
  • Transcriber's notes—often using a pale bluish background

We need to ensure that the text contrasts sufficiently with the background. The W3C have specified various algorithms to determine whether the contrast is enough or not. The easiest way to check is using Juicy Studio's Colour Contrast Analyser and Luminosity Analyser. You type in your proposed background and text colour, and it tells you whether they're good or not.

To save you some bother, here's a table of some colours you might use which are just on the border of sufficient contrast. So you can use these, or anything with lighter background and/or darker text than these.

Purpose Example Background Foreground
Page numbers [Page 1] #ffffff #585858
Transcriber's note Note #e6e6fa #000000
Link in transnote Link #e6e6fa #0000d0

Notice that because my transnote background is pale blue, the default bright blue link had to be darkened a bit. And the colour "silver" (#c0c0c0) for page numbers is too pale on a white background. My CSS looks like

.num  { color: #585858;
        background-color: #ffffff; }
a:link {color:#0000d0; }
.transnote {background-color: #E6E6FA;
        color: #000000; }



  • WCAG 1, 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. (Priority 3)
  • Draft WCAG 2, Success criteria 1.4.3, 1.4.5 Text (and images of text) have a contrast ratio of at least 5:1, except if the text is pure decoration. (Level AA); Text (and images of text) have a contrast ratio of at least 7:1. (Level AAA)

You're allowed less contrast if the text is large, but I haven't included that since we rarely alter the colour of headings. Contrast in images is also an issue, and given higher priority, but we as eBook creators don't really have any control over that. Links above give more information.

Who benefits?

Sighted users whose sight isn't very good (such as most older people), colourblind people. Users with very poor vision can override colours using their own style sheet, but "ordinary" users often don't know how to do this.


You might not like how it looks. In particular, the use of grey for page numbers was meant to make them unobtrusive—since they're an optional feature anyway, you might feel paleness is justified.


Further Reading