Color contrast
Safe combinations for low-vision impairments
Text and background color
Our components comply with AA standard contrast ratios. To do this, we choose primary, secondary and extended colors that support usability. This ensures sufficient color contrast between elements so that users with low vision can see and use our products.
The combinations of text and their background colors do not fall below the WCAG recommended threshold ratio of 4.5:1 for standard or small text and 3:1 for larger text.
Varying text color is often used to create hierarchy. Your solution will take into account other factors such as font-size and font-weight to establish the proper relationship between elements in your design.
Light weights are never used with standard/small text; legibility is compromised no matter how high the color contrast. Semi-bold and Bold weights are often used to meet standards while allowing preference for diminutive font-size in a design.
The examples below are approved combinations for standard (e.g., paragraph) and small (e.g., labels) text, which use 10, 11, 12, 14, 16, and 18px font-size.
If a background is #ffffff, text color may be:
If a background is #f2f2f2, text color may be:
If a background is #212121, text color may be:
Additional resources
- Check out our accessibility toolbox to test color contrast and help you build inclusive experiences.