We’re all generally aware that websites – and perhaps library websites especially – should be accessible to people with impaired vision. One aspect of that accessibility is the contrast between the color of the text and the background color of a webpage; too little contrast and the text becomes too difficult for some people to read. Fortunately, there is no need to guess about the proper contrast, because there are standard measures and a number of software tools that can calculate the contrast ratio and tell you if it is within the correct range. Unfortunately, some web designers ignore color contrast in the interest of making websites prettier – at least to their eyes on their monitors.
- Usability: Accessibility (Material design | Google) “The contrast ratio between a color and its background ranges from 1-21 based on its luminance, or intensity of light emitted, according to the World Wide Web Consortium (W3C). Contrast ratios represent how different a color is from another color, commonly written as 1:1 or 21:1. The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors.”
- Calculate contrast ratio of two colors as per WACG guidelines (ilovefreesoftware | Salman Khan)
“WACG 2.0 (Web Content Accessibility Guideline 2.0) is actually a set of rules for content accessibility (mainly for people with impairment or color deficiency), and color contrast is one of the aspects of accessibility. The color contrast ratio is measured in two different types of accessibility compliant i.e. AA and AAA. According to the WACG 2.0, the standard AA ratio for normal text should be at least 4.5:1 and for larger text 3:1, whereas, the standard AAA ratio should be at least 7:1 for normal text and 4.5:1 for larger text. So, using these websites you can generate color contrast and check whether they pass or fail AA and AAA standard ratios.” - Contrast (Minimum): Understanding SC 1.4.3 (W3C Working Group Note) “Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of color choices for large text, which is helpful for design of pages, particularly titles. 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio. […] ‘18 point’ and ‘bold’ can both have different meanings in different fonts but, except for very thin or unusual fonts, they should be sufficient.”
- How the web became unreadable (Backchannel | Kevin Marks) “As LCD technology advanced and screens achieved higher resolutions, a fashion for slender letterforms took hold. Apple led the trend when it designated Helvetica Neue Ultralight as its system font in 2013. (Eventually, Apple backed away from the trim font by adding a bold text option.) As screens have advanced, designers have taken advantage of their increasing resolution by using lighter typeface, lower contrast, and thinner fonts. However, as more of us switch to laptops, mobile phones, and tablets as our main displays, the ideal desktop conditions from design studios are increasingly uncommon in life.”
Articles from Ohio Web Library:
- Web accessibility, libraries, and the law. (Information Technology & Libraries, March 2011, p.34-43 | Camilla Fulton)
- Vision: Brightness and contrast. (Salem Health: Psychology & Behavioral Health, 2015, p.1992-1995 | Bonnie S. Sherman)
- Accessibility is more than curb cuts and ALT tags. (Computers in Libraries, Jan./Feb. 2016, p.22-24 | jessamyn west)
