An Image-Based Visual Strategy for Working with Color Contrasts During Design

  • Frode Eika SandnesEmail author
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 10896)


Many websites do not satisfy minimum contrast requirements. One reason could be that designers must select colors through trial and error using contrast calculators. This paper presents a visual framework for working with color contrasts. The foreground and background colors are detected automatically, and views are presented to simulate how a design is viewed with different levels of reduced vision. Moreover, saturation-brightness plots are introduced to help make valid color choices. Color corrections are proposed and visualized.


Color contrast Low-vision WCAG2.0 Visual design 


  1. 1.
  2. 2.
    Sandnes, F.E., Huang, Y.P.: Chording with spatial mnemonics: automatic error correction for eyes-free text entry. J. Inf. Sci. Eng. 22, 1015–1031 (2006)Google Scholar
  3. 3.
    Sandnes, F.E.: Evaluating mobile text entry strategies with finite state automata. In: Proceedings of the 7th International Conference on Human Computer Interaction with Mobile Devices & Services, pp. 115–121. ACM (2005)Google Scholar
  4. 4.
    Sandnes, F.E., Jian, H.-L.: Pair-wise Variability Index: Evaluating the Cognitive Difficulty of Using Mobile Text Entry Systems. In: Brewster, S., Dunlop, M. (eds.) Mobile HCI 2004. LNCS, vol. 3160, pp. 347–350. Springer, Heidelberg (2004). Scholar
  5. 5.
    Eika, E.: Universally designed text on the web: towards readability criteria based on antipat-terns. Stud. Health Technol. Inform. 229, 461–470 (2016)Google Scholar
  6. 6.
    Eika, E., Sandnes, F.E.: Assessing the reading level of web texts for WCAG2.0 compliance—can it be done automatically? In: Di Bucchianico, G., Kercher, P. (eds.) Advances in Design for Inclusion. AISC, vol. 500, pp. 361–371. Springer, Cham (2016). Scholar
  7. 7.
    Eika, E., Sandnes, F.E.: Authoring WCAG2.0-compliant texts for the web through text readability visualization. In: Antona, M., Stephanidis, C. (eds.) UAHCI 2016. LNCS, vol. 9737, pp. 49–58. Springer, Cham (2016). Scholar
  8. 8.
    Berget, G., Sandnes, F.E.: Do autocomplete functions reduce the impact of dyslexia on information searching behaviour? a case of Google. J. Am. Soc. Inf. Sci. Technol. 67, 2320–2328 (2016)CrossRefGoogle Scholar
  9. 9.
    Huang, Y.P., Chang, Y.T., Sandnes, F.E.: Ubiquitous information transfer across different platforms by QR codes. J. Mob. Multimed. 6, 3–13 (2010)Google Scholar
  10. 10.
    Sandnes, F.E.: What do low-vision users really want from smart glasses? faces, text and perhaps no glasses at all. In: Miesenberger, K., Bühler, C., Penaz, P. (eds.) ICCHP 2016. LNCS, vol. 9758, pp. 187–194. Springer, Cham (2016)Google Scholar
  11. 11.
    Sandnes, F.E., Eika, E.: Head-mounted augmented reality displays on the cheap: a DIY approach to sketching and prototyping low-vision assistive technologies. In: Antona, M., Stephanidis, C. (eds.) UAHCI 2017. LNCS, vol. 10278, pp. 167–186. Springer, Cham (2017). Scholar
  12. 12.
    Sandnes, F.E., Tan, T.B., Johansen, A., Sulic, E., Vesterhus, E., Iversen, E.R.: Making touch-based kiosks accessible to blind users through simple gestures. Univ. Access Inf. Soc. 11, 421–431 (2012)CrossRefGoogle Scholar
  13. 13.
    Gomez, J.V., Sandnes, F.E.: RoboGuideDog: guiding blind users through physical environments with laser range scanners. Procedia Comput. Sci. 14, 218–225 (2012)CrossRefGoogle Scholar
  14. 14.
    Lin, M.W., Cheng, Y.M., Yu, W., Sandnes, F.E.: Investigation into the feasibility of using tactons to provide navigation cues in pedestrian situations. In: Proceedings of the 20th Australasian Conference on Computer-Human Interaction: Designing for Habitus and Habitat, pp. 299–302. ACM (2008)Google Scholar
  15. 15.
    Tinker, M.: A, Paterson: D. G.: Studies of typographical factors influencing speed of reading. J. Appl. Psychol. 15, 241 (1931)CrossRefGoogle Scholar
  16. 16.
    Mathews, M.L.: Visual performance with coloured CRT displays: research update. Appl. Ergon. 20, 58 (1989)CrossRefGoogle Scholar
  17. 17.
    Stone, D.S., Fisher, K., et al.: Adults’ prior exposure to print as a predictor of the legibility of text on paper and laptop computer. J. Read. Writ. 11, 1–28 (1999)CrossRefGoogle Scholar
  18. 18.
    Lin, P.H., Lin, Y.T., et al.: Effects of anti-glare surface treatment, ambient illumination and bending curvature on legibility and visual fatigue of electronic papers. Displays 29, 25–32 (2008)CrossRefGoogle Scholar
  19. 19.
    Nasanen, R., Karlsson, J., et al.: Display quality and the speed of visual letter search. Displays 22, 107–113 (2001)CrossRefGoogle Scholar
  20. 20.
    Greco. M, Stucchi. N., et al.: On the portability of computer-generated presentations: the effect of text-background color combinations on text legibility. Hum. Factors 50, 821–833 (2008)CrossRefGoogle Scholar
  21. 21.
    Hall, R.H., Hanna, P.: The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. Behav. Inform. Technol. 23, 183–195 (2004)CrossRefGoogle Scholar
  22. 22.
    Ling, J., van Schaik, P.: The effect of text and background colour on visual search of Web pages. Displays 23, 223–230 (2002)CrossRefGoogle Scholar
  23. 23.
    Buchner, A., Baumgartner, N.: Text – background polarity affects performance irrespective of ambient illumination and colour contrast. Ergon. 50, 1036–1063 (2007)CrossRefGoogle Scholar
  24. 24.
    Lee, D.S., Shieh, K.K., et al.: Effect of character size and lighting on legibility of electronic papers. Displays 29, 10–17 (2008)CrossRefGoogle Scholar
  25. 25.
    Gonzalez, B., Latulipe, C.: BiCEP: bimanual color exploration plugin. In: CHI 2011 Extended Abstracts on Human Factors in Computing Systems, pp. 1483–1488. ACM (2001)Google Scholar
  26. 26.
    van den Broek, E.L., Kisters, P.M.F., Vuurpijl, L.G.: Design guidelines for a content-based image retrieval color-selection interface. In: Dutch HCI 2004, pp. 14–18. ACM (2004)Google Scholar
  27. 27.
    Douglas, S.A., Kirkpatrick, A.E.: Model and representation: the effect of visual feedback on human performance in a color picker interface. ACM T. Graph. 18, 96–127 (1999)CrossRefGoogle Scholar
  28. 28.
    Troiano, L., Birtolo, C., Miranda, M.: Adapting palettes to color vision deficiencies by genetic algorithm. In: Keijzer, M. (ed.) Proceedings of the 10th Annual Conference on Genetic and Evolutionary Computation, pp. 1065–1072. ACM (2008)Google Scholar
  29. 29.
    Meier, B.J., Spalter, A.M., Karelitz, D.B.: Interactive color palette tools. IEEE Comput. Graphics Appl. 24, 64–72 (2004)CrossRefGoogle Scholar
  30. 30.
    Moretti, G., Lyons, P.: Tools for the selection of colour palettes. In: Proceedings of the SIGCHI-NZ Symposium on Computer-Human Interaction, pp. 13–18. ACM (2002)Google Scholar
  31. 31.
    Reinecke, K., Flatla, D. R., Brooks, C.: Enabling designers to foresee which colors users cannot see. In: Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems, pp. 2693–2704. ACM (2016)Google Scholar
  32. 32.
    Webster, M.: Integrating color usability components into design tools. Interactions 21, 56–61 (2014)CrossRefGoogle Scholar
  33. 33.
    Sandnes, F.E.: On-screen colour contrast for visually impaired readers: selecting and exploring the limits of WCAG2.0 colours. In: Black, A., Lund, O., Walker, S. (eds.) Information Design: Research and Practice, pp. 405–416. Routledge (2016)Google Scholar
  34. 34.
    Sandnes, F.E., Zhao, A.: An interactive color picker that ensures WCAG2.0 com-pliant color contrast levels. Procedia-Comput. Sci. 67, 87–94 (2015)CrossRefGoogle Scholar
  35. 35.
    Sandnes, F.E., Zhao, A.: A contrast colour selection scheme for WCAG2. 0-compliant web designs based on HSV-half-planes. In: Proceedings of SMC2015, pp. 1233–1237. IEEE (2015)Google Scholar
  36. 36.
    Sandnes, F.E.: Understanding WCAG2.0 color contrast requirements through 3D color space visualization. Stud. Health Technol. Inform. 229, 366–375 (2016)Google Scholar
  37. 37.
    Tigwell, G.W., Flatla, D.R., Archibald, N.D.: ACE: a colour palette design tool for balancing aesthetics and accessibility. ACM Trans. Access. Comput. 9 (2017). Article no. 5CrossRefGoogle Scholar
  38. 38.
    Whitney, G., Keith, S., Bühler, C., Hewer, S., Lhotska, L., Miesenberger, K., Sandnes, F.E., Stephanidis, C., Velasco, C.A.: Twenty five years of training and education in ICT Design for All and Assistive Technology. Technol. Disabil. 3, 163–170 (2011)Google Scholar

Copyright information

© Springer International Publishing AG, part of Springer Nature 2018

Authors and Affiliations

  1. 1.Department of Computer ScienceOslo Metropolitan UniversityOsloNorway
  2. 2.Faculty of TechnologyKristiania University CollegeOsloNorway

Personalised recommendations