What is Minimum Contrast?
Minimum Contrast is the visual presentation of text and images of text. The minimum contrast has a contrast ratio of at least 4.5:1.
- Large Text: Large-scale text (with at least 18 point or 14 point bold) 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 minimum contrast requirement.
An important aspect of color on the Web for both low vision and colorblind users is sufficient contrast between foreground (text or graphics) and the background. Maximum contrast is black versus white, but this combination can be considered too overwhelming (it might cause glare). Other colors can be used—such as navy, dark green, or maroon for darks, and pastels for lights—to lessen the contrast.
However, some modern designs are so “subtle” that the contrast can actually be insufficient for some readers. Examples include contrasting light grey versus middle grey, middle pastels versus darks, or white versus light cyan (blue-green). If you plan to use a subtle color palette, it is recommended that you use a color analyzer to ensure there is sufficient contrast.
In most online tests, you enter in the hexadecimal color code for the foreground (text) and background colors, and the tester generates a numeric result. Usually a low number or ratio indicates too little contrast.
HELPFUL TOOLS & RESOURCES
Colorable – Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.
EightShapes Contrast Grid – Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.
Google’s Material Design – Google’s guidelines for designing for WCAG compliance
A11Y Project – A large list of resources for accessibility software, books, blogs, online tools, and more