{"id":15678,"date":"2018-07-24T10:36:55","date_gmt":"2018-07-24T09:36:55","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15678"},"modified":"2020-09-03T11:41:31","modified_gmt":"2020-09-03T10:41:31","slug":"science-color-contrast%e2%80%8a-expert-designers-guide","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/science-color-contrast%e2%80%8a-expert-designers-guide\/","title":{"rendered":"The Science of Color Contrast\u200a\u2014\u200aAn Expert Designer\u2019s Guide"},"content":{"rendered":"

This brief guide introduces UX designers to color contrast ratios and how to effectively apply this principle to your designs. This article does not delve into the complexities of choosing accessible colors for color blindness. Read more on color accessibility <\/em><\/strong>here<\/em><\/strong><\/a>.<\/em><\/strong><\/p>\n

The purpose of UX design is to facilitate a seamless interactive experience for users. As such, color selection and juxtaposition should not be solely based on your personal preferences. Of course, it should be grounded in your brand aesthetic, but also in the science of accessibility<\/p>\n

\"\"<\/a><\/p>\n

Core Concepts<\/h2>\n

Luminance<\/strong> \u2014 The intensity of light emitted from a surface per unit area in a given direction.<\/p>\n

Color Contrast \u2014 <\/strong>The difference in luminance between two adjacent colors or overlaid colors (foreground \/ background).<\/p>\n

Dynamic Range<\/strong> \u2014 The ratio between the largest and smallest values that a certain quantity can assume. For color contrast, this is the difference between the brightest luminance and the darkest luminance. The eyes take time to adjust to different light levels, so designers need to take into account the dynamic range of the human eye as applied to digital screens.<\/p>\n

\"\"<\/a>

Light Intensity and Dynamic\u00a0Range<\/a><\/p><\/div>\n

Optical Glare <\/strong>\u2014 Glare is caused by a significant ratio of luminance between the task and the glare source. This can also apply to digital and print sources, whereby reflected brighter light makes it more difficult for the human eye to discern adjacent objects. You can also apply this concept to screen glare, like what happens when you use a laptop outdoors.<\/p>\n

Color Contrast Ratio<\/strong> \u2014A property of a digital display system defined as the ratio of the luminance of the brightest color (white) to that of the darkest color (black) that the system is capable of producing. A high contrast ratio is a desired aspect of any display.<\/p>\n

Human Eye Dynamic Range<\/strong> \u2014 The dynamic range of the human eye is about 20 stops<\/strong>, or 1,000,000:1<\/strong>. The contrast sensitivity of the human eye is greatest when the frequency of detail in a scene is at about 4 cycles per degree (source<\/a>).<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

Calculating a Contrast\u00a0Ratio<\/h2>\n

Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).<\/p>\n

(L1 + 0.05) \/ (L2 + 0.05), whereby:<\/p>\n