Web Accessibility Perspectives: Colors with Good Contrast

Introduction

Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.

Video on Colors with Good Contrast

[ Previous: Keyboard Compatibility | Overview | Next: Clear Layout and Design ]

What is "Colors with Good Contrast"?

Colors must have sufficient contrast between text color and its background (technically called luminosity contrast ratio). This includes text on images, icons, and buttons. Also colors used to convey information on diagrams, maps, and other types of images must be distinguishable.

Who depends on this feature?

People with low contrast sensitivity, which is common in older people.
People with color blindness who cannot distinguish between certain colors.

What are the additional benefits?

Content works in different lighting conditions, such as sunlight and glare.
Content is easier to read by everyone, including those who do not have specific visual conditions.

What needs to happen for this to work?

Select text and background colors that provide sufficient contrast. There are tools to help check and select appropriate color combinations. This is ideally done during the early design stage and the selection of color palettes. While some people need high contrast, some people are sensitive to brightness and need to change the colors.