Color contrast is essential not only to web accessibility but also to a quality user experience. Color contrast is the difference in color and brightness between two colors, usually a background and a foreground color. If the color contrast is too low, text might be difficult or impossible to read for people who are hard of sight, and even for people with perfect vision.
The Web Content Accessibility Guidelines (WCAG) specify color contrast ratios for foreground and background colors under certain circumstances. There are two levels of the WCAG requirements, AA and AAA. The AA requirements are the minimum requirements and AAA are enhanced requirements.
Color contrast WCAG AA requirements:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
Incidental
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes
Text that is part of a logo or brand name has no contrast requirement.
Color contrast WCAG AAA requirements:
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1.
Incidental
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes
Text that is part of a logo or brand name has no contrast requirement.
The intent behind these criteria is so that text can be read by people with moderately low vision. The contrast ratios are calculated so that people who have a color deficit will still have adequate contrast and legibility regardless of color.
Below is a visual example of the importance of color contrast ratios for people with low vision and for the rest of your users.
If your business’s web content does not pass WCAG AA, you are opening your business up to a web accessibility lawsuit. Web accessibility demand letters and lawsuits are currently on the rise.
Reach out by phone or email to see how we can help get your content fully accessible to the hard of sight!
Comments