Contrast ratio refers to how bright or dark colors appear on screens. The more scientific definition is that contrast is a ratio of the luminance of the brightest color to the darkest color that the system can produce. Contrast ratios range from 1 to 21 (written as 1:1 and 21:1). The first number, L1, refers to the relative luminance of light colors while L2 is the second number that refers to the relative luminance of dark colors.
When it comes to website accessibility, the contrast ratio is a concern for how websites will appear on devices by default. While virtually every modern device has its own internal settings for users to adjust brightness, contrast isn't always adjustable.
Guidelines for Color and Text Contrast Ratios
For colorblind and other visually impaired users, finding the right contrast for the different elements of your website is crucial. WCAG 2.0 guidelines dictate a minimum contrast ratio of 4.5:1 for the visual presentation of both text and images embedded as text. Large text (18 point, 14 point if bold, and larger font sizes plus images of very large text) requires a 3:1 contrast ratio.
There are no contrast requirements for logotypes and incidental text, which is text that has no context to the website's core purpose. This would include inactive user interface components, text for decoration, and text that is part of mainly visual content. For instance, the text would be considered decorative in a picture of a restaurant menu with random words surrounding pictures of food, while an image of a book cover with emphasis on the cover art that includes the author's name and title would be visual content.
Why is Contrast Important for Accessibility Purposes?
The background colors of webpages, including highlighted text, might be perceived differently by users with visual impairments, and those with visual or cognitive disabilities might also have difficulty reading text at certain contrast levels.
The 4.5:1 contrast ratio is intended to address the loss of contrast that users experience if they have low visual acuity, age-related loss of contrast sensitivity, or color deficiencies. WCAG recommends a 7:1 contrast ratio for users with vision loss equating to 20/80 vision, but 3:1 for large text since large print with wider character strokes is much easier to read at low contrast. This gives site owners more color choices for large text placement, such as in titles and headers.
Vision loss can be congenital, acquired, or happen as we age. All users should be able to read the text on your website and determine what your webpage elements are supposed to do. This list contains resources to check the color contrast of your website to help determine if your site meets the WCAG guidelines for contrast ratios. Just because your contrast ratio might need adjustment, that doesn't mean that you can't have a beautiful and media-rich website.
