Contrast ratios
WCAG 2.0 specifies various minimum contrast ratios between foreground and background for different sizes of fonts, and for bolded and non-bolded fonts https://www.w3.org/TR/WCAG20-TECHS/G18.html.
...Priority 2 (AA), and Priority 3 (AAA). Whether or not you need to reach an AAA conformance depends on your target audience. Read more about this on the w3 site. For large text (over 18 points) the contrast ratio for AA is 3:1 and for AAA 5:1. For small text it's 5:1 for AA and 7:1 for AAA. (http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer)
More exact ratios and translations of font sizes to px directly from the WCAG first mentioned for bold and non-bold text are:
- BOLD and < 14pt (18.5px): 7:1 contrast ratio
- Not bold and < 18pt (24px): 7:1 contrast ratio
- BOLD and >= 14pt (18.5px): 4.5:1 contrast ratio
- Not bold and >= 18pt (24px): 4.5:1 contrast ratio
Using the contrast analyzer provided on the page above, the current Shoreditch contrast ratios are not sufficient in some contexts.
For example, on pages like New Contact and New Activity we get the following ratios:
Blue font #2786c2 on tan #efefe5 in 13px: 3.44:1 (below 5:1) Dimmed grey #999999 on offwhite #fff in 13px: 2.85:1 (below 5:1)
We should meet a 5:1 ratio for all text < 18pt.